Thursday 1st November 2007

by Mr Me
This entry is part 2 of 3 in the series Gmail Architecture

Now we can see ajax everywhere. Most of the famous websites are now enabled ajax for providing faster navigation and browsing speed.

If you are a gmail user, the thing you noticed very attractively should be the file attaching part of the email composing window.

If you wait for sometime you can see, your file gets automatically uploaded without submitting the whole form. This is not Ajax. Because XMLHttpRequest (XHR) is not supporting multipart/form-data.

You can use iframe for this purpose by pointing the target of form submission towards the iframe (you can place it as hidden style=”display:none”)

<form target=”iframename” action=”upload.php”>

You can write javascript at the upload.php end, you can change the file uploaded updations just like ajax

Sample code for this “Ajax File Upload” or Gmail-Like File Upload is here :
File-Upload-Like-Gmail.rar

Winrar logo

Thanks and Regards

Sajith.M.R

Tags: , ,

· · · ◊ ◊ ◊ · · ·

26 Responses to “Upload Files Like Gmail”

  1. smore says:

    Thanks for the nice post !!
    The source code link is broken. Would appreciate if you could fix it.

  2. ALLEN says:

    Please upload the file again, I couldn’t download it :(

    Its urgent!

  3. Dmitrii says:

    Hi, very interesting post.

    Code cannot be download. Can you send me an email with the File-Upload-Like-Gmail.rar?

    Thanks.

  4. al says:

    ooopsss… code cannot be download..

  5. Brt says:

    Hi, a really interesting post. Except that the link does not work :(
    Can you send me an email with the new link?
    email: jim.maionese@gmail.com

  6. Praveen says:

    The link is broken so are the pictures throughout your website
    please look into this matter
    for a list of top ten file upload scripts all over the web
    here is a good link I found http://blog.geotitles.com/2011/08/top-10-most-popular-file-upload-scripts-live-demo-and-free-downloadpart-1/

  7. Meraj says:

    Hi,

    I am not able to upload “File-Upload-Like-Gmail.rar”.
    kindly mail to me.

    Thanks & Regards
    Meraj Alam

  8. [...] And that’s about it. For an example, click here. The related website is here. [...]

  9. Belal says:

    Hi ! Take my love

  10. manjusha says:

    how i can implement separate attachment progress bar with this demo?(like actuall GMAIL does..) if u have demo on that please send me the link.

    Thanks,
    MTV

  11. Tang Si Han says:

    source code in asp.net?

  12. I have finished a very very large raw javascript solution for this.. I had to take care of 100 things at the same time and this simple iFrame has the same effect!! Thanks a lot..

  13. Will says:

    Fabulous! Makes my life easy compared to Every other script out there I found that tries to do this same thing and ends up being like 1000 lines long.

  14. James says:

    Another great example is here:
    Web Framework

  15. Malik says:

    I want to upload pics and other videos on my gmail account. Can I do that, if yes then how I can do that…
    If anyone knows then let me know…
    Thanks

  16. [...] Gmails file uploading is another interesting thing. I already posted ajax file uploading : http://www.sajithmr.com/upload-files-like-gmail/ [...]

  17. manish says:

    it ir realy gud yar.
    gr8 work

  18. saul says:

    very simple and usefull
    going to join it on my code igniter project
    great job

  19. Jamie says:

    Thanks for this. Just one thing: it would be handy for non-Windows users if you could put up future downloads in a more conventional compression format, e.g. zip. (OS X users: download something like UnRarX to open this file).

  20. uchup says:

    hmm.. i still do not understand about use ajax..

  21. Sudhin says:

    I tried with your script and reach almost to the target…..i think i can..

  22. cc says:

    I test your script and I meet the following :
    - as far the input point to hiddenframe how I will escape from form using html redirect tag ? – other suggestion ?
    Thanks.

  23. Nishant Mittal says:

    Sajith, Excellent articles. I like the step by step writing style.
    One interesting thing about GMAIL file upload is that it handles the browser’s back button elegantly. Most Iframe based file upload solutions create an entry into the browsers history (BACK/FORWARD button). IE is very easy to trick but Opera is very unforgiving. GMAIL however works fine even with OPera. I dont know how they manage to do it. do you?

  24. Sajith M.R says:

    XMLHTTP Request does not support multipart data. So upto now (April 2008) there is no file uploading via ajax is possible. And form javascript , you can get the intermediate information of a file uploading. So mere javascript cant create a progress bar or anything with this file uploading. You can use applet or some activeX script for this purpose. Then what you can do with ajax is after uploading , you can make the needful changes.

  25. Victor says:

    I have soe problem about upload file in hidden iframe, would you pls give me some suggestion????

    I have make a form and submit it through AJAX, and everything is work. And now I would like to provide a file upload function. I would like to keep my form submit in AJAX way, but file upload must upload through form.submit().

    The problem is when I use ajax to post a form while the file is still under uploading, the ajax request would ignore the file upload. So what can I do to make it wait untill the file is fully upload?

  26. AJAX is very handy and effective tool for any Rich Web Application. However it has few limitations too:

    1) It can not make a remote call to another server.
    2) It can not post anything to the server other than text.

    But don’t let this effect you ! All this can still be done with a little work around.

    For more details: http://www.rochakchauhan.com

· · · ◊ ◊ ◊ · · ·

Leave a Reply

Need your support
More in Downloads, html, php, php source code, webworld (134 of 177 articles)


How come i  didnt  noticed this before ??  If you have a gmail id , you can use it ...