I've checked in a quick tweak in r79029 that adds thumbnail previews of image files on Special:Upload before you submit the form, in browsers supporting the HTML 5 FileAPI [1] (such as the current stable releases of Firefox and Chrome).
This helps with a longstanding problem that's bugged me for years: when the AJAX filename conflict thingy trips, you get a thumb of the *existing* file but not of the file you're about to upload, making comparisons harder! Now you've got the file you just selected sitting right above it, which is rather more convenient.
Files larger than 10MB aren't previewed as a guard against accidentally hitting a really big file that eats your browser's memory and kills everything. :)
On browsers that don't include the FileAPI FileReader class, or when selecting a file that isn't a PNG, JPEG, GIF, or SVG file, you won't see any change in behavior.
[1] http://www.w3.org/TR/FileAPI/ [2] https://developer.mozilla.org/en/using_files_from_web_applications
-- brion vibber (brion @ pobox.com)
On Sun, Dec 26, 2010 at 5:09 PM, Brion Vibber brion@pobox.com wrote:
I've checked in a quick tweak in r79029 that adds thumbnail previews of image files on Special:Upload before you submit the form, in browsers supporting the HTML 5 FileAPI [1] (such as the current stable releases of Firefox and Chrome).
Awesome!!! I'm eager to see this feature deployed on Wikimedia Commons.
-Katie (@aude)
This helps with a longstanding problem that's bugged me for years: when the AJAX filename conflict thingy trips, you get a thumb of the *existing* file but not of the file you're about to upload, making comparisons harder! Now you've got the file you just selected sitting right above it, which is rather more convenient.
Files larger than 10MB aren't previewed as a guard against accidentally hitting a really big file that eats your browser's memory and kills everything. :)
On browsers that don't include the FileAPI FileReader class, or when selecting a file that isn't a PNG, JPEG, GIF, or SVG file, you won't see any change in behavior.
[1] http://www.w3.org/TR/FileAPI/ [2] https://developer.mozilla.org/en/using_files_from_web_applications
-- brion vibber (brion @ pobox.com) _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
On Sun, Dec 26, 2010 at 6:31 PM, aude aude.wiki@gmail.com wrote:
On Sun, Dec 26, 2010 at 5:09 PM, Brion Vibber brion@pobox.com wrote:
I've checked in a quick tweak in r79029 that adds thumbnail previews of image files on Special:Upload before you submit the form, in browsers supporting the HTML 5 FileAPI [1] (such as the current stable releases of Firefox and Chrome).
Awesome!!! I'm eager to see this feature deployed on Wikimedia Commons.
We should be able to pick this up in REL1_17 for the deployment.
-Chad
Hi,
Le dimanche 26 décembre 2010 à 14:09 -0800, Brion Vibber a écrit :
I've checked in a quick tweak in r79029 that adds thumbnail previews of image files on Special:Upload before you submit the form, in browsers supporting the HTML 5 FileAPI [1] (such as the current stable releases of Firefox and Chrome).
Neat :)
Would it require a lot of work to also include these thumbnail previews to the file selection step of Special:UploadWizard?
On 12/27/10 7:47 AM, Guillaume Paumier wrote:
Hi,
Le dimanche 26 décembre 2010 à 14:09 -0800, Brion Vibber a écrit :
I've checked in a quick tweak in r79029 that adds thumbnail previews of image files on Special:Upload before you submit the form, in browsers supporting the HTML 5 FileAPI [1] (such as the current stable releases of Firefox and Chrome).
Neat :)
Would it require a lot of work to also include these thumbnail previews to the file selection step of Special:UploadWizard?
Nope. It's designed explicitly so this should be easy. There are "frontend" and "backend" parts to every upload, that can be mixed and matched. I would be happy to help anyone who is interested.
HTML5 upload controls can show progress, so we can have real progress bars instead of just spinners. FileAPI can do things like previews and we could even implement the Firefogg-style upload-in-multiple-requests protocol, which might have other advantages.
But so far there's always something else to do that's more important. For better or worse we prioritized getting basic features to work with ancient browsers and relatively obscure browsers (and without using crutches like Flash) over using the cool features of modern ones.
On Mon, Dec 27, 2010 at 8:52 AM, Neil Kandalgaonkar neilk@wikimedia.orgwrote:
On 12/27/10 7:47 AM, Guillaume Paumier wrote:
Neat :)
Would it require a lot of work to also include these thumbnail previews to the file selection step of Special:UploadWizard?
Nope. It's designed explicitly so this should be easy. There are "frontend" and "backend" parts to every upload, that can be mixed and matched. I would be happy to help anyone who is interested.
\o/ :D
If nobody else gets to it I'll give it a whack in a few days.
The actual previewing doesn't tie too specifically into anything in the current upload page, so it should work well to split out the code that does the [check API availability, set up event handler on the input, handle the slurping in of the file, create a thumbnail div] as its own module which can be easily used on any form.
Possibly do that as a jquery extension so can do something like:
$('#mw-htmlform-source').parent().prepend('<div id="mw-thumbnail-area"></div>'); $('#wpFileInput').previewUploadThumbnail('#mw-thumbnail-area');
(Extending forms to also support HTML 5 drag-n-drop would be a bit harder because it complicates the actual form submission, but the preview-y part could hook in similarly because file transfer there is also based on FileAPI.)
-- brion
wikitech-l@lists.wikimedia.org