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

Benjamin Mack benni at typo3.org
Wed Apr 15 19:20:32 CEST 2009


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/
-------------- next part --------------
A non-text attachment was scrubbed...
Name: flash_uploader_v8.patch
Type: text/x-diff
Size: 35645 bytes
Desc: not available
Url : http://lists.netfielders.de/pipermail/typo3-team-core/attachments/20090415/7530c6af/attachment-0001.patch 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: flash_uploader_v8_data.zip
Type: application/zip
Size: 35162 bytes
Desc: not available
Url : http://lists.netfielders.de/pipermail/typo3-team-core/attachments/20090415/7530c6af/attachment-0001.zip 


More information about the TYPO3-team-core mailing list