[TYPO3-core] RFC #10639: Integration of mass file uploader

[Patrick Broens]

Hi Benni,

First of all, I like this feature!
I've tested it and here are my remarks:

* Move the buttons "Select Files", "Cancel Upload" and "Close" to the
top before the queue. When doing a mass upload, they will be pushed
downwards, after the queue of all the files. The user won't notice it's
there anymore. Secondly the list is updated constantly, the uploaded
files are deleted from the list, which makes the list shorter very fast
when having small filesizes. This makes it very hard to click the
"Cancel Upload" or "Close". You have to chase them :-)

* "Cancel upload" is a bit confusing. It only cancels the upload of the
current file being uploaded. The user might think it cancels the whole
upload, which happens when you push the "Close" button. You might
reconsider the labels of these two buttons.

* I've noticed a very strange behaviour when pushing the "Close" button
when there is a very long list of files in the queue. When you click the
"Upload Files" button again in the docheader, the extJS panel is empty,
but the height is according to the previous list of files in the queue.
This happened once and I had to refresh the whole backend to get rid of
it. I couldn't reproduce it at a later stage in the same browser (FF3),
strangely, but it happened again when trying it in another one (IE7).
Opera, Safari and Chrome did not have this behaviour. Did somebody else
see this behaviour?

* Could you add the same functionality to the "Upload Files" button in
the clickmenu of the fileadmin tree?

* Some nitpicking :-) The cursor of the "Select Files" button is not a
hand (pointer) but the default (arrow), contrary to the "Cancel Upload"
and the "Close" button, which use the pointer. This is only in FF3.
Somehow the object takes over the cursor in FF3.

* And another nitpicking: The extJS shadow is not behind the whole panel
in all browsers, but only up to the line "You can upload files with a
maximum size of 10000000 KB." After dragging it to another position on
the screen the shadow will adapt itself to the correct height.

Tested on FF3.0.8, IE7, Opera9.63, Safari4 beta and Chrome1.0 Windows

Cheers,

Patrick

Benjamin Mack wrote:
> Hey team,
> 
> this is a SVN patch request.
> 
> Branches: trunk only
> 
> BT reference: http://bugs.typo3.org/view.php?id=10639
> 
> RFC Type: New feature (yay!)
> 
> 
> == Problem
> If you currently want to upload a bunch of files into your filelist
> module, you'd rather use FTP or a Java-based extension than the current
> upload module where you need to select each file manually. The selection
> of only one file per <input type="file"...> is a browser limitation.
> This way it's a pain in the butt to upload multiple files at once
> (use-case: like 50 images for a new image gallery, not that uncommon,
> right?). So I thought of a better solution.
> 
> 
> == Solution
> To overcome the browser limitations, you can use flash to select
> multiple files at once in the "select files" dialog when uploading.
> There are several opensource flash tools out there that provide a simple
> Flash file and a JS script wrapping around it. Just as an FYI: About 97%
> of all users [1] have flash enabled in their browsers.
> 
> One of the most prominent solutions for handling multiple uploads is
> called "SWFupload" [2] having a MIT license. It uses an event-based
> approach that replaces an existing DOM element with a flash movie. Once
> you click on it (Flash 10 requires you to click on the movie to start
> the event-process), it shows the "Select files" dialogue. It then starts
> to upload each file one after another.
> I then created a wrapper to put the Flash uploader in a ExtJS
> environment window, so we can use all the fancy stuff like a EXT
> progressbar JS object and also the event handling that can be used from
> every module iframe, thus allowing to call back to the actual frame,
> once the global process is done.
> Once all uploads are done, the Ext window is hidden and all existing
> events that modules used to hook in, are cleared.
> 
> One design approach (in terms of code design) was that I wanted to make
> it very simple (with only a few lines of code) to trigger the uploader,
> having lots of the default options already set in the global instance.
> This way people can add the uploader in a quick way in their own
> extensions (or other places in the core) without having to deal with the
> Flash instance at all.
> 
> The actual patch is quite easy to review, as it stripped out everything
> else (like code cleanups and prerequisits) in earlier RFCs.
> It consists of the main extJS wrapper classes (I used the TYPO3
> namespace for that) in typo3/js/flashupload.js. The first (and for now
> only) use-case is in the filelist module (typo3/file_list.php). The
> other changes are adding the TYPO3 global object in javascript and the
> localization, as well as the changes in the user setup.
> 
> 
> == Your questions
> * What happens to people if they don't have flash enabled in their browser?
> If they enable the Flash uploader in their options and they use a
> browser with no flash then nothing happens. However for the future we
> can think of a better solution detecting the Flash player at runtime and
> then have it degraded whether Flash uploading works or not.
> 
> * Why is there only one instance of this dialog?
> * Why can't we run that upload in the background so editors can work
> while uploading?
> Well, it's really tricky to deal with frames. So that's why we have a
> global instance running in the backend.php page. If a module gets
> reloaded the movie file still exists (and the browser doesn't crash -
> this would happen if we'd have the uploader in every module). However, I
> chose a modal approach for the dialog, because we start that global
> instance of the Flash Uploader in a module. Through the
> top.TYPO3.FlashUploader JS object you can add callbacks running in the
> context of the module iframe (which is really cool, btw!), but if you
> start navigating any further (and thus the context doesn't exist
> anymore), the callback throws a JS error, because the context in that
> module doesn't exist anymore. That's why I chose to only have one
> instance running and nothing else is allowed while uploading, thus
> elimiting lots of side effects.
> 
>  * Why didn't you take any existing extJS plugins that already implement
> SWFUpload?
> They're GPLv3
> 
> * Dude, there are way better GUIs out there, to cancel every item in the
> uploading queue etc, can we do something here?
> Yes, we can! However, I'd really like to address more important issues
> first (Localization, Degration) and focus on the code, not design
> improvements. Design etc can be discussed in the Design team and/or HCI
> team.
> 
> == How to test the solution
> It's quite simple actually: Apply the patch to current trunk, extract
> the zip file in the main directory (it'll add SWFupload in
> typo3/contrib/) and then refresh your configuration cache (to enable the
> AJAX call registration that was implemented a couple of revisions ago).
> Then, in the User Setup, use the new option "Enable Flash Uploader",
> save the changes, go to the filelist module, select a folder and then in
> the module, use the button in the docheader to start the uploader. The
> upload window should pop up. Enjoy!
> 
> == Notes
>  * You have to explicitly enable the flash uploader on a per user basis
> in the user setup, don't know if we should handle it in a different way.
>  * Localization is currently implemented with String.format() from extJS
> and all the labels are in backend.php so it's globally available.
> However it's not coming from an XML file yet, this will be done with a
> separate patch once this is in (we already thought of extracting all the
> labels in typo3-lang-fr.js, that file could be compiled at the same
> point when we fetch the translations from the translation server.
> Details & discussions for this will follow soon on the 4.3 list)
>  * This feature was sponsored by AOE Media! Thanks!
> 
> 
> Next steps (once we have a safe bet on this patch):
>  * Update NEWS.txt file (with the commit)
>  * I really need to get some documentation up for people wanting to
> integrate this in their own extensions, or to integrate it even more
> tightly into other places in the core.
>  * Activate uploader when using the clickmenu in the file menu and the
> TCEforms.
>  * Move Localization into a base XML for Javascript, and at a later
> stage move compiled JS files into , write documentation on how to handle
> JS localization, so extension developers can hook into it here.
> 
> 
> All the best,
> Benni.
> 
> 
> [1]
> http://www.statowl.com/flash.php?1=1&timeframe=last_6&interval=month&chart_id=13&fltr_br=&fltr_os=&fltr_se=&fltr_cn=&chart_id=
> 
> [2] http://swfupload.org/
>