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

[Benjamin Mack]

Hey devs,

I updated the Flash Uploader. The latest version includes:

* Updated UI, less "Window"-like, more "Widget"-like, also: every queued 
upload can be canceled separately now (by hovering over the=).
* Possible to start the flash uploader from the context menu
* Automatic check for the Flash version on the fly, fallback as well, 
even when the User Setup checkbox is activated
* uC-value for the BE user now turned on by default, only existing BE 
users need to explicitly activate this feature.
* Problem with the Hash Clause for Flash. It is now done using the 
existing "veriCode" from the $BE_USER object which is now available in 
"top.TS.veriCode" and will be checked during the fetching of the session 
instead of the hashClause when using the Flash userAgent.

Next steps (after 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 in TCEforms.
  * Write Localization Handler for JS, so it fetches XML files and loads 
it into the new TYPO3.LLL object.
  * Update the UI list, by showing "12 more files in the queue" instead 
of listing all files as progressbars in the queue.

All the best,
benni.


On 15.04.2009 19:20 Uhr, 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/