It will be a good user experience if you can show the user how the image they are gonna upload will look like in your system before they start uploading.
- It saves a few Data in their account
- It gives the user a chance to see how it looks with and test without waiting for upload.
- Saves a small bandwidth for you as well
This is done with FileReader API, it allows web applications to asynchronously read the contents of files stored on the user’s computer, using File or Blob objects to specify the file or data to read.
In this demo, once the user selects the file, a validation for data type to check if the selected file is image or not is performed, as there is no point in trying to display a non image file :p.
Once verification is passed, a new FileReader is created, it can take any image file as argument and return the blob. With the returned blob create an image object and append it to the view you have it.
Note The java script processing part can handle multiple file but I did find an issue with Filereader in reading multiple file at same time, so I have limited the file section to one will get an update once I have a fix on it. If you find one please let me know i’ll get it here.
function showfiles(event){
//Clear previous images and errors
$("#errors").empty();
$("#selectedimage").empty();
files = event.target.files;
// Variables for handling errors
var error = 0;
var errorMessage = "";
for (var i = 0; i < files.length; i++) {
file = files[i];
if(!file.type.match('image.*')){
/* Check if the selected file is an image or not */
error = 1;
errorMessage = """ + file.name + """ + errorMessage ;
}else{
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function() {
console.log(reader.result);
var img = new Image();
img.src = reader.result;
$("#selectedimage").append(img);
};
}
}
if(error && errorMessage){
/* If error variable is triggered print error*/
errorMessage = errorMessage + " is not image file";
$("#errors").append(errorMessage);
}
}
I have used the following technique on my project Mobiopush, where the user chooses icon of his choose for the notification pop.
The icon user selects is shown in the position where it will be once it's uploaded.
