I recently published an article at The Bakery which explains how to incorporate SWFUpload into your CakePHP application. SWFUpload is a fantastic javascript/flash library which facilitates multiple file uploads with real-time upload progress.
The article includes the SwfUploadComponent as well as usage tips. I developed this component because I needed to handle uploads which could be associated with any number of objects in Mango. One of the key goals of Mango is to be user-friendly, and since file uploading is one of the least fun experiences on the Web (in my opinion, anyway), I needed to find a way to at least simulate the kind of user interaction that the desktop operating system offers. SWFUpload meets that need.
I’m working on a project page for SwfUploadComponent which will have the API for the component. Stay tuned.
Thanks to Eelco Wiersma for the original code which I used as a basis for development. Also, thanks to gwoo for guidance and cakebin pastes – he helped me to tweak it for performance and readability.
Very nice and good news! Your component really came just in time, because I prolly need it in the following weeks for Pagebakery.
Cheers!
Hello James,
I’ve tried out your code, turned out it wasn’t really what I needed, but 2 things came up anyway:
– you’ve got a typo: In your SwfUploadComponent you’re calling $this->getUploadErrorMessage (in validate()) when it should be $this->getUploadError. Also, shouldn’t the name be the same as the class name (the very top, var $name = “SwfUploadComponent” instead of “UploadComponent”). I’m new to Cake, so I might need some enlightenment on this.
– The second bit is what I changed for my purposes, and I found it much easier to read: In your controller, you upload the file, dealing with this->params quite a lot. Then, in the component, you take over the same params. I changed it a bit so that when you call the component, you pass the needed params. Makes the component independent from what you call your upload form, fields and all. In my case, in the controller:
if ($this->Upload->upload($this->params[‘data’][‘Reference’][‘thumbnail’])) {
//next line is db stuff.
$this->params[‘form’][‘data’][‘Reference’][‘thumbnail’] = $this->Upload->filename;
}
and more changes in the component. I basically take the file everywhere, like:
function upload($file) {
$ok = false;
if ($this->validate($file)) {
$this->filename = $file[‘name’];
$ok = $this->write($file);
}
if (!$ok) {
$this->setError();
}
return ($ok);
}
Of course you need to change the reference to params in the called functions validate and write, and I’m never sure when to pass by reference and when by value, so you might want to change that, too. Find as zipped example the controller “Reference” (it’s part of a portfolio) and the amended upload component here: http://clients.willerich.com/upload_component.zip
Now, I’m using this with a “traditional” file upload, within a regular form mixed with other data, but the handling is very nice due to the component.
Nice work, Matthias. I hadn’t thought about passing in the file data to make the component less dependent on the view because my main goal was to implement a controller for SWFUpload, which is always going to send a file field called ‘Filedata.’ Still, I know that future versions of SWFUpload will probably allow renaming of the file field. I like your idea and will indeed incorporate it into the next version of the upload component.
Your other 2 corrections were right on. The name variable value must have gotten changed when I did a global find/replace or something. The other one was just something that I guess never got called, so I never noticed it. Thanks. I’ll update the bakery article soon so that everyone can benefit from your corrections. It was nice of you to contribute the info.
My pleasure.
I’d love to use this component fully, but I really needed something that works in context with a regular form. An interesting side effect: If the swf part uses AMFPHP to upload the file, it’s potentially faster than a regular form upload, and on top, the upload doesn’t time out any more. We’ve done tests at my current work where we uploaded 30MB, 50MB, over a dsl connection that some people have at home, and it was pretty quick and without timeouts because of apache max values or whatever else there is.
Now, if I were a flash dev…
That’s great that you were able to handle 50MB uploads over DSL. I’ve been using this primarily over an intranet, and I’ve successfully uploaded a 2GB file, but I think I did have to click the button a few times to allow the script to continue. Can you expand on how you would like the component to handle regular form uploads? When I’m testing just the component, I use a regular form. I understand that there is the issue of the component natively only supporting the file field named Filedata, but aside from that what were you looking for? I’d just like to understand as it might help me make the component more portable. Thanks.
hello james,
thank you for the upload-component. i tried to post a comment on your entry but the bakery somehow ate it π
however – i have 2 questions:
– when uploading a file with the component [‘Filedata’][‘type’] always contains “application/octet-stream” – i guess this is propably due to the flash-http-post. any suggestions how to get a proper mime-typ?
– when performing e.g. thumbnail-processing to the uploaded data it often takes several seconds to do so for bigger files (‘bigger’ means > 800kb). but the creation of this thumbnail is skipped and swfupload continues uploading the other files. the php-script (or the swf: http://swfupload.mammon.se/forum/viewtopic.php?id=63) doens’t wait for the thumbnail to be created…
do you have any suggestions on this?
hope you get what i thought of π
regards, leo.
Is this another typo? link(‘swfupload/mmSWFUpload’); ?>
mmSWFupload? not sure what the ‘mm’ is or am i missing a file? also, if you could get on #cakephp to give me a hand, that would be great. i’m usually on there as codeCowboy.
Maybe I’m just screwing it up, but should this work in 1.2? Cause I can’t get it to.
Hi James,
Well, I thank you for creating this wonderful component. I made a few add-ons that maybe of use also to others. Here is the link to my post http://cakensoda.wordpress.com/2007/05/20/swfupload-component/
Wow, perfect! I was just thinking of integrating this myself and stumbled across your post in the bakery. Thanks for the tutorial.
@leo: unfortunately, the mime type sent is entirely in the hands of flash, as you correctly guessed. I think the only recourse at the moment is to write a file-extension-to-mime-type lookup table or hash map and manually figure out what it is before saving it to the database. There are some posts on the SWFUpload site about it. There may be more info there that would be useful to you. Check their forum.
Regarding thumbnail processing, I’m not sure. I thought that the php script was blocking, so I thought it would finish doing whatever was in your upload handling routine. If it’s not, perhaps you could look at thumbnail generation upon the first request of the thumbnail image, rather than as part of the upload. I’ll look into other options and post again if I come up with anything.
@luke: mmSWFUpload was the name of the file when I wrote the first version of the SWFUploadComponent. You’re right – it should just be ‘SWFUpload’. Thank you.
@peter: i wrote it against 1.13. i have no idea what it will do in 1.2. My next version will surely have support for CakePHP 1.2, and it will be released before the end of the month.
@rachel: excellent – I’ll check that out soon.
@timmy: glad I could help.
Hi James,
I’m working on a file uploader and would like to use SWFUpload with my cake app.ur example looks handy, but the naming-conventions are different to the latest SWFUpload: like mmSWFUpload insted of SWFUpload.im refering to ur bakery post.would u happen to have a basic example using swfupload 1.0.2 with cakephp 1.2?
Cheers!
Aeshan
what about CakePHP V1.2 and SWFUpload V2.x ?
It moved to http://swfupload.org/project
your component was great fo rthe old SWFuplaod and CakePHP v1.1…. any updates?
hey,
Great article. I am running the stable release of cakephp : 1.1 and downloaded SWFUPload V2… I was hoping you would could update the article ? I am getting a javascript error here:
swfu.loadUI();
because loadUI is not part of the new version…..
Thanks.
Hi James
thanks for all the work you put in on this article and bakery tutorial .
I know it is a long time after you wrote it! I just wanted to ask if you have a copy of the version you mention that would work with cake 1.2?
I am actually having problems with my view part, I got 1.0.2 SWFU from the site and use your sample code and have tried tweaking it so I think I have the form right, but the submit button does nothing when I click on it, despite the javascript not throwing an error.
The swf seems to load on the page too as I check it in view – generated source in FireFox. π
Hi Luke,
I’ll do my best to look into this soon.
Thanks,
Jim
Hi James,
I know it’s been a while since you wrote this component, but I was just wondering if you were going to do an update for CakePHP 1.2 and SWFUpload 2.1.0?
If so… do you have an ETA? π
Thanks,
Japh
In the article a huge thank you all for the cause, a lot of people are using