Skip to content

Instantly share code, notes, and snippets.

@RainerRoss

RainerRoss/UploaderWithPreview.html

Created May 15, 2019 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save RainerRoss/5901b8a824ccb7c64887e45ff04e09a4 to your computer and use it in GitHub Desktop.
Save RainerRoss/5901b8a824ccb7c64887e45ff04e09a4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
UploaderWithPreview.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uploader mit Vorschau</title>
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.min.css">
<style>
.picture_selector .webix_image {
background-size: contain;
border: 1px solid #A4BED4;
background-position:center;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://cdn.webix.com/edge/webix.min.js"></script>
<script>
webix.ui({
rows:[
{
view:"toolbar",
css:"webix_dark",
elements:[{view:"label", label:"Uploader mit Bildvorschau"}]
},
{
template:"",
height:10
},
{
id: "uploader",
view: "uploader",
type: "imageTop",
datatype: "json",
label: "klicken, um eine Datei auszuwählen<br><br>oder<br><br>Datei auf dieses Feld ziehen",
height: 300,
width: 300,
css: "picture_selector",
multiple: false,
autosend: false,
on: {
onAfterFileAdd: function(file) {
var reader = new FileReader();
reader.onload = function(e) {
var button = $$("uploader");
button.config.image = reader.result;
button.config.label = '';
button.refresh();
$$("uploadForm").elements.data.setValue(reader.result);
$$("uploadForm").elements.file.setValue(file.name);
}
reader.readAsDataURL(file.file);
}
}
},
{
template:"",
height:35
},
{
view:"form", id:"uploadForm", elements:[
{view:"text", label:"Pfad:", name:"path", value:"/home/daten/"},
{view:"text", label:"Datei:", name:"file"},
{view:"text", label:"Bilddaten:", name:"data"},
{cols:[
{view:"button", type:"form", value:"Daten senden", width:200,
click:function(){
var values = this.getFormView().getValues();
webix.message({text:'Formulardaten: ' + '<pre>' + JSON.stringify(values, 0, 1) + '</pre>', expire:-1}); //xxx
}
}
]}
]
}
]
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment