views:

3013

answers:

6

I'm trying to create an "upload file, and email as an attachment" form where the file starts uploading after it has been selected (like Gmail), before sending the email. I would also like to implement a progress bar to show the status of the upload.

There should be all sorts of examples out there, but I just can't find them!

Do you know of any examples, or tutorials, plugins, helpers, or have you done this yourself and would like to share some code samples?

Thanks!

+3  A: 

Try using the jQuery form plugin, which has support for ajax uploading, examples can be found on the link provided. Zend Framework has a jQuery helper.

karim79
actually, that looks like a nice plugin. Is there a good tutorial somewhere that shows how to do this upon selecting a file (instead of on form submit)?
Andrew
+2  A: 

I suggest you uploadify.com with jquery. The example is on the site. You can use this jquery plugin and store the file into the DB (maybe a temporany table). When the user will send the email you will fetch the files, attach it and delete it from the database.

PS: if you have some sessions problems take this: http://stackoverflow.com/questions/604555/zend-framework-losing-session

denadai2
it use swf object, aka flash!
DaNieL
A: 

Have you looked at http://digitarald.de/project/fancyupload/ ? Seems to satisfy your requirements.

Mayuresh
+4  A: 

Have a look at

There is also an example of integrating fancyupload with Zend Framework: although fancyupload is based on mootools, you can learn from what's explained.

Note: as fancyupload, uploadify uses flash. However, it degrades when flash is not available.

Gregory Pakosz
it use swf object, aka flash!
DaNieL
so what?, you're stuck on a pentium 4 with gnash ? ;)
Gregory Pakosz
anyway, the fact you dislike flash is subjective and doesn't imply the answer is wrong
Gregory Pakosz
i never said the answer is wrong, but here he's asking how to do that with jquery, not flash. Anyway, is not that i dont like flash, but simply that using flash for this kind of issue is rarely a good solution, and NEVER a reliable solution.
DaNieL
updated my answer, give it a look to see why i **dont suggest flash for the file upload**
DaNieL
You realise that GMail uses Flash for the upload, don't you? Basically all the fancy file uploads use Flash.
Kitson
gmail **dont** use flash as default, and however, i suppose gmail team should have someone (or kinda more than one) who can build his own swf object, to edit it, keep it update and changing it in short time. Anyway, the question is about ajax and jquery, not flash ;)
DaNieL
First off, Gmail does use Flash, there is no other way for the box to pop up as soon as you click attach file. You have to click browse in the HTML version for security. I would disagree. I find a flash uploader is just a reliable as any other one. Also, from a developer's standpoint, it allows you to focus on utilizing the attachment and dealing with how to upload it. Also, just because he never mentioned flash in his question doesn't mean he doesn't want to use flash: even his own answer uses flash. Have you considered he wasn't aware of Flash + jQuery options when he asked the question?
Ramblingwood
And yes, I saw that he said he'd rather not use flash, but to emulate Gmail he will have to.
Ramblingwood
Well, in my opinion there are kind of issues that require flash, other that could be done in flash and other where flash is the worste bet... the upload is the 2° case; I prefer to handle them in js and php, for many reason, but this is my opinion.. i havent said that flash is bad or wrong for this issue, but just that i wont use it for upload that can be easly and efficently done with other (that i consider more flexible, but this is another my imho) languages.
DaNieL
A: 

SWFUpload looks promising:

Pros:

  • Upload multiple files at once by ctrl/shift-selecting in dialog
  • Javascript callbacks on all events
  • Get file information before upload starts
  • Style upload elements with XHTML and css
  • Display information while files are uploading using HTML
  • No page reloads necessary
  • Works on all platforms/browsers that has Flash support.
  • Degrades gracefully to normal HTML upload form if Flash or javascript is unavailable
  • Control filesize before upload starts
  • Only display chosen filetypes in dialog
  • Queue uploads, remove/add files before starting upload

There's even a SWFUpload jQuery Plugin to make working with SWFUpload even easier, and a tutorial on How to use the SWFUpload jQuery Plugin to do Multiple File Upload with Progress Bar

Cons:

Requires Flash. =/

Also, according to this blog post:

One issue many people run into when using SWFUpload with Zend Framewok is that sessions are often lost in the upload process.

But the author offers a solution to lost sessions when using SWFUpload and the Zend Framework. Here also is a Stack Overflow solution to lost sessions when using SWFUpload and the Zend Framework.

Andrew
Why use flash when a simple iframe + 10 js rows will do the trick?
DaNieL
How can you have a cons section that does not mention that it requires Flash?! Nobody wants to use Flash! It comes with security risks as well.
Josh Stodola
I totally agree. I don't want to use flash. I'd rather use pure javascript. I only posted this as a suggestion. But I don't think that deserves a down vote.
Andrew
The cons section should probably consist of a heading that says `<fail>Requires Flash</fail>`
Josh Stodola
i've updated my answer.
DaNieL
A: 

As someone else suggested, Jquery has the plugin you need.

A simple iframe will do the trick, and you'll need APC for the progress bar.

This is an 'heavy-tested' solution, for example the cms Drupal use it (dont know if with jquery, but im sure about the iframe and APC).

Some tutorial:

Creating an Upload Progress Bar in PHP with APC

Creating an Upload Progress Bar in PHP with APC: js/Ajax part in page 4

Upload con progress bar per APC + jQuery (italian language)

Upload progress bar with PHP5, APC and jQuery

HOWTO: PHP and jQuery upload progress bar

Asynchronous file upload with AJAX progress bar in PHP

Zend Framework: Documentation (Chapter 21.1.5. Progress for file uploads)

EDIT:

I wont post the code becose is useless; just follow one of the tutorial i've posted (the first one, for example) and you'll find all the code you need with a full explanation of waht the cose do (that is more important than the code itself, imho).

[OT]

Stop this stupid down/up votes war. We are not here to win stupid reputation, but to help each other in programming skill, right?

I didnt downvote all whom suggested flash solution, just the andrew answer becose was kindly uncorrect and not a usefull analysis of the swf 'issue'.

The point is not that i dont like flash, but that flash is good (indispensable) for other kind of issues (video, music, etc..) but NOT a reliable solution for handling file uploads, things that can be easly done by Javascript and php itself (with APC, if you cant use APC on your server, then go with 'flash solution').

With swf object, you just have to hope that the 'api' to handle it fulfill all you needs, else.. do they give you the source (.fla) file? do you have a license of adobe flash, and the knowledges to edit it? Are you ready to do taht everytime your fancy upload need even the simplier modification? You agree with me that find help for js or php is easyest than finding help for flash?

Thats why i don like the flash solution for this kind of issues.

Then, feel free to keep you downvote on me, im here to learn not to gain silly rep point.

[/OT]

DaNieL
..i downvoted just Andrew answer....not the others...
DaNieL