How can I get Gmail-like file uploads for my web app?

Question

I want to add gmail-like file upload functionality for one of my projects. Can anybody help me with this?

My application is built in vb.net.

I would appreciate any kind of help or guidance.

Thanks Mithil Deshmukh

Answer 1

Check out SWFUpload, which is essentially a javascript api to flash's absolutely superior file upload handling capabilities. Best thing out there until the browsers finally catch up.

From link:

• 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

Demos

----- iframe upload -----

To start, you want to have an iframe on your page. This is meant for server communication. You'll hide it later, but for now, keep it visible. Give that iframe a name attribute, like "uploader" or something.

Now, in your form, set the target to the iframe's name and the action to a script you have on the server that will accept a file upload (like a normal form with a file upload). Add a link inside that form with the text "Add File". Set that link to run a javascript function which will add a new input to the form. This can be done via the DOM, but I would recommend a javascript library like jquery.

Once the new file input is added to the form, set the blur event of that input to a javascript function that will submit the form and then check it periodically for output. Reading an iframe can be tricky, but it's possible.

Have your file upload script output a "Done." or a filename or something when the upload is complete.

Check it every second or so until there is content. Once you have content, kill your timer and replace the file input with the name of the file (or "File Uploaded") or whatever.

Hide your iframe with css.

Answer 2

From YUI! (Yahoo User Interface), http://developer.yahoo.com/yui/uploader/

1. Multiple file selection in a single "Open File" dialog.
2. File extension filters to facilitate the user's selection.
3. Progress tracking for file uploads.
4. A range of file metadata: filename, size, date created, date modified, and author.
5. A set of events dispatched on various aspects of the file upload process: file selection, upload progress, upload completion, etc.
6. Inclusion of additional data in the file upload POST request.
7. Faster file upload on broadband connections due to the modified SEND buffer size.
8. Same-page server response upon completion of the file upload.

Totally Free

Answer 3

I'd like a little more clarification of "Gmail-like" file uploading.

do you mean how if it sits for a little bit, it automatically attaches it to a draft?

Answer 4

What Gmail uses? Flash? IFrame?

Answer 5

What I meant by gmail like using iframes. In gmail there is no "attach" button once you select the file to be uploaded. There is just a link and once the file is selected we don't have to perform the added functionality of attaching the file. I hope I made it clear, if not please add your comment.

Answer 6

I found many code samples which does this..but those are in php. I am trying to implement the same in vb.net.

Answer 7

Gmail's code is difficult to find your way around, but if I had to guess, this is how it works:

• When you click "attach another file", it inserts a regular input type file control. On IE, it may also programmatically trigger the click event on the "browse" button so the file dialog opens immediately (it doesn't do this on firefox, and I don't have IE handy, but I believe IE allows for this)
• After you select a file, it detects the change event of the input control, and starts a timer.
• When the timer triggers, it detaches the input element from the form, and adds it to a different form in a hidden iframe, placing a simple link in the main (visible) form. The hidden iframe is then submitted to upload the file. (It may also clone the input element, but I haven't tried whether this works.)

Answer 8

You can use iFrames for this

Answer 9

For a non-flash solution, you can use NeatUpload. I used it on an extensive project last year with a no-flash requirement. It's very easy to integrate into existing solutions. I thought it was a breeze to work with. Easier, in my limited experience, than working with SWFUpload in ASP.NET. Probably because NeatUpload is built just for ASP.NET.

Answer 10

Are you talking about an upload without a full page postback? Take a look at http://www.phpletter.com/Demo/AjaxFileUpload-Demo/, which creates a hidden iframe, copies the input control, and uses the iframe to perform the post to get the file on the server.

If you're looking for the behavior where when the user clicks "attach file" and the file browsing dialog automatically pops up, that can be done via javscript but doesn't work in FireFox, which has the security precaution of requring the user to invoke the "Browse" button directly (rather than programmatically through script).

For the "automatic" upload, use javascript to attach to the "change" event for the "value" property of the the 'input' control so that the will perform when a file has been selected.

Answer 11

Here is the gmail uploader clone. This is the exact clone of gmail uploader with some extra facilities. You can see the thumbnails of images after uploading, Drag the thumbnails to change the order and replace any thumbnail. It is done using jQuery. You can see the demo here. The source code is free to download in a single zip file.

I hope you can easily remove some code and get the desired thing. You may leave comments on the ABCoder blog if you need further help.

Answer 12

Hi

You may use Flickr Uploader clone instead.