Javascript preview with new FileReader and DataURL APIs looks inefficient

Question

I am using the new FileReader API to preview images before downloading. This is done using DataURL. But DataURLs can be massive if the images are large. This is especially a problem for me, as the user can upload several images at once, and previewing the group actually slows down my browser significantly and actually breaks chrome several times.

Is there an alternative to using DataURL to preview images on the client before downloading?

Answer 1

You can also store data on the client’s disk (in another place so that you can access the file using JavaScript). This article is quite extensive when it comes to this topic:

http://www.html5rocks.com/en/tutorials/file/filesystem/

However, it is not supported in all browsers.

You need to request storage space (file system), then create a file, write data to it, and finally get the URL:

window.requestFileSystem(window.PERSISTENT, 5*1024*1024, function(fs) { fs.root.getFile(filename, {create: true}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { var arr = new Uint8Array(data.length); // fill arr with image byte data here var builder = new BlobBuilder(); builder.append(arr.buffer); var blob = builder.getBlob(); fileWriter.write(blob); location.href = fileEntry.toURL(); // navigate to file. The URL does not contain the data but only the path and filename. }); }); }, function() {});