View Selected Image Before Upload

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.

Advert

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.

Github Live Demo Download

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. Github Live Demo Download

Comments

Wow ! you have someting to tell us. That's great! Please keep in mind that comments are moderated, we employ rel="nofollow" for links, avoid using a spammy word or a domain in name field, it might end up as a Spam. Thanks for reading.

Last 5 Articles

All Articles >

  1. Mitigating Risks In Custom Software Development

     
  2. Container Security to Secure Microservices

     
  3. Strategic Messaging

     
  4. URL Shortener in Django

     
  5. MySQL as Database Option

     

News Letter

Subscribe to our email newsletter for useful tips and valuable resources, sent out every new article release.