Mailing List Archive

Special:Upload tweaks: thumbnail boxes for your boxing day
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)
_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: Special:Upload tweaks: thumbnail boxes for your boxing day [ In reply to ]
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
>
_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: Special:Upload tweaks: thumbnail boxes for your boxing day [ In reply to ]
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?

--
Guillaume Paumier
Product manager - Wikimedia Foundation
Support free knowledge: http://donate.wikimedia.org


_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: Special:Upload tweaks: thumbnail boxes for your boxing day [ In reply to ]
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

_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: Special:Upload tweaks: thumbnail boxes for your boxing day [ In reply to ]
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.

--
Neil Kandalgaonkar (| <neilk@wikimedia.org>

_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Re: Special:Upload tweaks: thumbnail boxes for your boxing day [ In reply to ]
On Mon, Dec 27, 2010 at 8:52 AM, Neil Kandalgaonkar <neilk@wikimedia.org>wrote:

> 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 mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l