Hi Stefan.
Please follow these steps:
1 Add HTML component on the page. And populate it with following code: http://prntscr.com/3p4f65/direct
precode
<form enctype="multipart/form-data" method="post" name="fileinfo" style="visibility:hidden">
<fieldset>
<input type ="file" name ="fileselect" id="fileselect">
</fieldset>
</form>
<script type="text/javascript">
// set event listener for call preview after select file
var fileselect = $('#fileselect');
fileselect.bind("change", fileSelectHandler);
</script>
/code/pre
2 Add Button with text "Choose file".
3 Add JS event handler on "click" event to this button. Populate with following code:
precode
$('#fileselect').trigger('click');
/code/pre
4 Add new JS asset and populate it with following code: http://prntscr.com/3p4ji1/direct
precode
var file;
function fileSelectHandler(e) {
var files = e.target.files || e.dataTransfer.files;
file = files[0];
previewFile();
}
function previewFile() {
Code: Select all
var previewContainer = $('table[dsid=preview]');
var fileName = $('[name=fileName]');
var fileContentType = $('[name=fileContentType]');
// make the preview container visible once a file was selected
previewContainer.toggle();
// set the file name
fileName.text(file.name);
fileContentType.text(file.type);
var reader = new FileReader();
reader.onloadend = function(e) {
var fileDataUrl = e.target.result;
localStorage.setItem("fileDataUrl", fileDataUrl);
};
//reader.readAsText(file);
//reader.readAsBinaryString(file);
//reader.readAsArrayBuffer(file);
reader.readAsDataURL(file);
}
/code/pre
5 Then you can access file raw source with following code:
precode
//Set file to image component
Apperyio("imgcomponentName").attr("src", localStorage.getItem("fileDataUrl"));
//Log out to console file content
console.log(localStorage.getItem("fileDataUrl"));
/code/pre
So you have file source in the "fileDataUrl" LSV. From this time you can store it in DB. Or assign to image component as shown in prep step.
That's all.
Regards.