How can I display an image from file_input field before upload to database

[Joni de Campos]

I need to display a selected image from the file system ( I am making a webbased system) and display it on image component before uploading to the database.

This way the usercan confirm if this is the correct image to be uploaded

Any idea ?

[Serhii Kulibaba]

Hello Joni,

Sure it is possible to do. Please use method readAsDataURL() for that, here is an example: https://developer.mozilla.org/en/docs...

[Joni de Campos]

Thanks Sergiy...but how do I assign the select file image to the Appery image component, tried the following bellow code, but it does not work...

imageHolder is the Appery image component name.

I replaced the input file with the file_input field from Appery:

//This is called from the file_input value change event

// var preview = document.querySelector('img');
// var file = document.querySelector('input[type=file]').files[0];

var file = $(this)[0].value;

var reader = new FileReader();

reader.addEventListener("load", function () {

Code: Select all

 //preview.src = reader.result; 

// replacing preview.src with imageHolder
Appery("imageHolder").attr("src",reader.result);

}, false);

if (file) {
reader.readAsDataURL(file);
}

[Serhii Kulibaba]

Please check if there are any errors in the browser console. You can learn here: https://devcenter.appery.io/documenta... how to open the console.

[Joni de Campos]

I manage to make the code to work:

// Show image before Upload

// 'foto' is the name of the image Appery component

// 'file_name' is the name of the input file Appery component

// get a reference to the image photo holder
var preview = Appery("foto")[ 0 ];

// get a reference to the file input
var file = Apperyio("file_input")[ 0 ].files[0];

var reader = new FileReader();

reader.addEventListener("load", function ()
{
preview.src = reader.result; // show image
}, false);

if (file)
{
reader.readAsDataURL(file);
}

if the user is ok with the image it then uses a upload button to upload the selected image to the database using

uploadMultipleFilesHelper(uploadService, Apperyio('file_input'));

[Galyna Abramovych]

Joni,

Thanks for your update here. Glad it works.