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

[Dan Osipov]

I'm having some issues when testing... What should be the value of 
$TYPO3_CONF_VARS['BE']['fileExtensions']?


Dan Osipov
Calkins Media
http://danosipov.com/blog/

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/
>