FineUploader: thumbnails on the fly customers

Question

I am working on an implementation of FineUploader. A special request is to create thumbnails on the client side and then upload the files with the original image upload .

I have an implementation that works on FF, but doesn't seem to work on iOS. It looks like this:

var uploader = new qq.FineUploaderBasic({ button: document.getElementById(buttonID), request: { endpoint: '/up/load/a/' + $('section#ajax-viewport').data('albumid') }, callbacks: { onSubmit: function(id, fileName) { // getFile obtains the file being uploaded file = this.getFile(id); // create a thumbnail & upload it: ThumbDown(file, id, 200, fileName); }, } }) 

This code calls the function:

 function ThumbDown(file, id, dimension, fileName) { var reader = new FileReader(); reader.onload = function(e) { var img = document.createElement("img"); img.onload = function (ev) { var thumbnailDimensions; // object holding width & height of thumbnail var c=document.getElementById("canvas-for-thumbnails"); // must be a <canvas> element var ctx=c.getContext("2d"); // set thumbnail dimensions of canvas: thumbnailDimensions = calcThumbnailDimension (img.width, img.height, dimension ) c.width = thumbnailDimensions.width; c.height = thumbnailDimensions.height; var ctx = c.getContext("2d"); ctx.drawImage(img, 0, 0, c.width, c.height); uploadThumbnail(c.toDataURL('image/jpeg'), //a base64 encoded representation of the image id, fileName); // we need filename to combine with mother-image on the server }; img.src = e.target.result; } reader.readAsDataURL(file); } // end function 

Finally, Thumbnail boots with a dumb ajax call:

 function uploadThumbnail (base64encodedString, id, fileName) { $.post('/up/thumb', { img : base64encodedString, id: id, fileName: fileName }, function(data) {}); } 

My questions:

1) I currently have two downloads: one for the image of the mother and the other for the thumbnails. I would like to combine this in a single FineUploader call. However, I see no way to do this because of the asynchronous nature of the thumbnail creation.

Am I missing something? Is it possible to reduce this to one FineUploader call?

2) This code loads base64-encoded thumbnails. I would like to upload a thumbnail as an image (or as a blob ?). Perhaps following this recipe of Jeremy Banks. Will this work with FineUploader?

3) Are there any other FineUploader options / methods that I missed, but should I use?

Any help, as always, is greatly appreciated.

Answer 1

So, it is already trivial to load the original image. The exact bootloader will take care of this for you. If I understand correctly, you also want to download a scaled version of the image (which you have already created). I suggest you take the image you painted on the canvas and convert it to Blob . You can then send this Blob directly to the Fine Uploader, where it will download it for you.

For example, change the value of uploadThumbnail to this:

 function uploadThumbnail(thumbnailDataUri, id, filename) { var imageBlob = getImageBlob(thumbnailDataUri, "image/jpeg"), blobData = { name: filename, blob: imageBlob }; // This will instruct Fine Uploader to upload the scaled image uploader.addBlobs(blobData); } function getImageBlob(dataUri, type) { var binary = atob(dataUri.split(',')[1]), array = []; for(var i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } return new Blob([new Uint8Array(array)], {type: type}); } 

Note: the getImageBlob function was adapted from this stack overflow response . If this works for you, be sure to confirm the answer I'm connected with.

Server Side Note

A Blob is pretty much a File without a name property. Your server-side code will handle the Blob download in much the same way as a File or a form containing a form field <input type="file"> . The only noticeable difference with your server will be the value of the filename parameter in the Content-Disposition header of the multi-page border containing the file. In other words, your server might think that the image is called a "blob" or possibly another generic name, due to the fact that most browsers generate multi-line encoded requests containing Blob objects. Fine Uploader should be able to get around this by explicitly specifying the file name that the browser should include in the Content-Disposition blob header, but this ability does not have broad browser support. Fine Uploader bypassing this limitation, to some extent, including the parameter "qqfilename" with a request containing the actual name of Blob .

Future built-in support for generating and scaling thumbnails

It is planned to add built-in support for thumbnail preview in Fine Uploader. This is described in feature requests # 868 and # 896 . Other related feature requests are opened, such as image rotation and image - related verification . These features and other image-related features are likely to be added to the Fine Uploader in the near future. Be sure to comment on existing feature requests or add additional requests if you want.

Answer 2

Starting with version 4.4 of FineUploader, as Rai Nichols noted, this functionality was baked within their framework.

The following is an example of setting download sizes when creating an instance of FineUploader:

 var uploader = new qq.FineUploader({ ... scaling: { sizes: [ {name: "small", maxSize: 100}, {name: "medium", maxSize: 300} ] } }); 

See their page when downloading scaled images .