Gmail Type Attachment – How to make one?

Written on May 30, 2008 – 7:09 pm | by admin under Web Tutorials

WP Greet Box icon
Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Google and its wide range of web applications have simple changed the way we used to look at internet. Be it the revolutionary fast Google search engine or mail by Google i.e Gmail. You will find enormous amount of threads and forums discussing How do google achieve doing XYZ? or How do they make it happen fast and efficiently?.

One of the most talked about thing about Gmail is probably how do they achieve making Gmail so simple, convinient, sober, fast and easy. One of the Gmail’s feature which contribute hugely in making it easier and faster for users is: Its ability to attach your files while you are writing your mail.

I have tried to come up with an exact clone for gmail attachment. Kindly click here for the demo and the source files.

This is achieved by using an iframe which contains your server side script responsible for handling uploads. As soon as the user select a file to upload, the upload form gets submitted to upload.php, which lies in an iframe. Hence at no point does the user leaves the page and still he gets his file uploaded. Find attached below all the files you need to implement this on your server. Just unzip the file on your server, and you are ready. All the uploaded files will go in th upload folder by default. You may change that in upload.php.

Feel free to post a comment back here for any queries etc.

Cheers !

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • DZone
  • E-mail this story to a friend!
  • LinkedIn
  • MySpace
  • NewsVine
  • Ping.fm
  • Print this article!
  • Propeller
  • Slashdot
  • StumbleUpon
  • Technorati
  • Twitter
  • Yahoo! Buzz
, , , , , , ,

5 Related Post(s)

  1. 13 Comment(s)

  2. By Pablo on May 30, 2008 | Reply

    Great demo. Thanks a lot.

    did you use ajax?

  3. By admin on May 30, 2008 | Reply

    No you can’t have a file upload using ajax. Ajax doesn’t supports file upload.

    I did tried to give an explanation, but lemme try once again. If you consider classical file upload, as soon as we used to press a submit button. The page used to get submitted i.e. the whole page refreshes. Now in our case, instead of submitting the thing to the original page, we submit it into a hidden iframe in the page.

    Hence your user never gets the main page refreshed but still they are able to upload the images, etc etc.

    I hope I helped you make things clear. :)

  4. By Pablo on May 30, 2008 | Reply

    I understand. Thank you.

  5. By admin on May 30, 2008 | Reply

    Welcome, just download the source code and play with it. Probably its not that tough as it may seem :)

  6. By Pablo on May 30, 2008 | Reply

    added to http://unixbsd.blogspot.com :P

  7. By admin on May 30, 2008 | Reply

    Hey buddy, thanks a lot. :)

    And yours is a nice blog, will go through in my free time

  8. By Adithya on May 31, 2008 | Reply

    Hi,,,Well done…I just had one doubt..where are the files getting uploaded to??and could u suggest a site which you referred for web development?

  9. By admin on May 31, 2008 | Reply

    Hi Adithya,

    I guess I made this point clear in the post. Anyways I won’t mind doing that again.

    The file gets uploaded to the /upload. When you download the source code from here and unzip that, you automatically gets a folder inside it named upload.

    However you can change the target upload folder in the upload.php file.

    Regarding websites for web development. There isn’t a bible for this which can help you for everything. To start with W3 School and Tizag are a few good ones.

    Anyways you start with something and everything will come with need and experience. If you have any specific question relating to web development feel free to ask about the same.

    Cheers!

  10. By Adithya on May 31, 2008 | Reply

    Thanks for the reply..many sites have this option where we can subscribe to their site upon which we get the updates in our mail..i tried it using feedburner but somehow i dont get any code which i need to place in my site’s html code..could you please tell me how you did yours as you too is have used feed burner

  11. By Nitin on Sep 21, 2008 | Reply

    hi,

    May be its late, but if you try to upload another file while one is already in progress (i.e. if you click on “attach another file”), the current uploading gets canceled.

    regards

  12. By admin on Sep 21, 2008 | Reply

    Hi,

    Oh is it, well I didn’t really rested this stuff. Must be some silly mistake, will chk out

  13. By Mithil Deshmukh on Sep 25, 2008 | Reply

    Hello Abhinav,

    Do you know how to do the upload.php code in vb.net?

    Thanks

  1. 1 Trackback(s)

  2. Aug 29, 2008: How to create an upload meter in PHP? Explained | Abhi's Weblog

Post a Comment

Name (required)

E-mail (required)

Website