Fine Uploader image previews uploaded to Amazon S3?

Question

Since Fine Uploader 4.0 has the ability to create image previews entirely client side (other than IE 9.0 and lower), is it possible to use the same technique to create thumbnails that are also uploaded along side the original files, in particular to Amazon S3. As you know, Amazon S3 offers no server side processing, therefore making it difficult to create thumbnails of media uploaded directly to Amazon S3, without either creating the thumbnails ahead of time, or using a separate server for nothing more than processing images to create thumbnails.

If it is possible to create thumbnail images of pictures being uploaded, and do so client side only, how would one go about including the thumbnails in the list of files that get uploaded?

Along those lines, we would also like to create a simple HTML page with the files that where uploaded included in the page, and then upload it at the same time as the rest of the files. This HTML page would be provided to the user as a delivery page, that could then be passed onto the ultimate destination recipient. We could of course have the server side portion record in a DB the files that are to be uploaded, and allow for the server to rendered the delivery page. But I would first like to try creating a custom HTML delivery page client side only, and use that instead. The reason being that first, we would like to avoid and undue stress on our normal server, and secondly, in the event that files are uploaded by a user that cause the content to be flagged, I do not want our domain name getting black listed because it appears as though we are serving nefarious content (however we fully intend on monitoring any file uploaded using this service). Instead if all files are delivered via S3, though they would all be coming from a bucket we control, I am assuming that black listing a specific bucket at S3 is far less likely. If you have anything to add to this idea/concern/theory I would love to hear it.

Thanks.

Answer 1

If it is possible to create thumbnail images of pictures being uploaded, and do so client side only, how would one go about including the thumbnails in the list of files that get uploaded?

Note, this technique would only work in modern browsers:

You could convert the data-uri present in the src attribute of the <img> tag that the preview is rendered upon to a Blob, and then use FU's API method addBlobs() to add it to the list of files being uploaded.

SO#4997908 appears to have code that can do the data-uri to blob conversion. (I have tested Maurizo's solution to that answer and it appears to work correctly although I only tested it minimally)

One caveat with this technique is if you are using FU UI mode then the newly added thumbnail will be rendered into the file list when addBlobs is called on it, another preview will be generated for that, and ... well that could continue ad infinitum.

This is because -- if we look at UI mode's onSubmit handler -- it is adding the file to the file list every time.

_onSubmit: function(id, name) {
    this._parent.prototype._onSubmit.apply(this, arguments);
    this._addToList(id, name);
}

To get around this caveat in UI mode you could create another instance of Fine Uploader in core mode, call addBlobs on that instance, and eventually call uploadStoredFiles on that instance as well. This would enable you to upload your image, it's preview, and not have the extra file in the file list.