Display thumbnail of a file immediately after user upload

When a end user uploads an image you want to show a thumbnail image within your web page after the File Picker dialog is closed. How can you do this with the File Picker?

Start by listening to "complete" event

FileSpin.on('complete', function(data) { showThumbnail(data); });

Here is the sample function showThumbnail() which receives event 'data' object when upload completes. Use this File's "id" in the data object to prepare a on-demand URL like below. 

For this example, we assume only one file was uploaded so we just get the first file's id.

function showThumbnail(data) {
 //get the file id
  var file_id = data["files"][0]["id"]; 

  //prepare the on-demand url
  var thumb_url = "https://cdn.filespin.io/api/v1/conversion/"+file_id+"?resize=400,400";

  //update a img html element with the image
  document.getElementById("thumbnail").src= thumb_url; 
}

Here's a example UX flow

Low-resolution preview image with a short expiry time

When a file upload completes, we immediately generate a low-resolution preview that is stored in our redis cluster . We serve this low-res image with a very short expiry time--typically 3 or 5 seconds--while the processing servers work on generating high-res on-demand images.

Once the proper images are ready, we replace the quick preview images with the proper ones. As a developer, you can simply use the on-demand URLs to show thumbnails during file uploads. We take care ensuring the URLs work as expected in the background.