StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p>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?</p> </blockquote> <p><em>Note, this technique would only work in modern browsers:</em></p> <p>You could convert the <a href="https://developer.mozilla.org/en-US/docs/data_URIs" rel="nofollow noreferrer"><code>data-uri</code></a> present in the <code>src</code> attribute of the <code><img></code> tag that the preview is rendered upon to a <code>Blob</code>, and then use <a href="http://docs.fineuploader.com/branch/master/api/methods.html" rel="nofollow noreferrer">FU's API method <code>addBlobs()</code></a> to add it to the list of files being uploaded. </p> <p><a href="https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata">SO#4997908</a> 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)</p> <p>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 <code>addBlobs</code> is called on it, another preview will be generated for that, and ... well that could continue <em>ad infinitum</em>.</p> <p>This is because -- if we look at UI mode's <a href="https://github.com/Widen/fine-uploader/blob/master/client/js/uploader.api.js#L224" rel="nofollow noreferrer"><code>onSubmit</code> handler</a> -- it is adding the file to the file list every time.</p> <pre class="lang-js prettyprint-override"><code>_onSubmit: function(id, name) { this._parent.prototype._onSubmit.apply(this, arguments); this._addToList(id, name); } </code></pre> <p>To get around this caveat in UI mode you could create another instance of Fine Uploader in core mode, call <code>addBlobs</code> on that instance, and eventually call <code>uploadStoredFiles</code> 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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload