Gmail Type Attachment – How to make one?

Standard

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 !

  • Pablo

    Great demo. Thanks a lot.

    did you use ajax?

  • http://altertunes.com/ admin

    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. :)

  • Pablo

    I understand. Thank you.

  • http://altertunes.com/ admin

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

  • Pablo
  • http://altertunes.com/ admin

    Hey buddy, thanks a lot. :)

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

  • Adithya

    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?

  • http://altertunes.com/ admin

    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!

  • Adithya

    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

  • Pingback: How to create an upload meter in PHP? Explained | Abhi's Weblog()

  • Nitin

    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

  • http://abhinavsingh.com admin

    Hi,

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

  • Mithil Deshmukh

    Hello Abhinav,

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

    Thanks

  • Shayne

    Their is also the problem of a person navigating away from the page but the files remaining wherever they were uploaded too.  Worse yet if its part of an “email” like gmail you’re form doesn’t look like it sets a “hidden” field of sorts to send those attachments along with the email.  So while your script gets people started its also missing a significant portion of the requirements.

  • http://abhinavsingh.com admin

    Hi Shayne,

    I thought some work can be left on developers ;) Yes indeed, we need to save the upload id/key in a hidden field, so that we can later on identify the uploaded files for a particular mail.

    Other way around, you can even manage this at server side without having to save upload id/key in hidden fields.

  • Param

    Hi ,

    I was searching for gmail type mail attachment.So , I happened to see Your demo . It is better if ‘remove’ option is implemented and sending mail with attachments are implemented in the application.

    Best Regards,
    Param.

  • http://abhinavsingh.com Abhinav Singh

    Yeah Param, But I prefer leaving a few thing to readers :D My intension was to show multiple attachment, removing one of them should be fairly easy.

    Simply update the backing storage e.g. db when a user adds an attachment. Then place a remove button which removes this entry from the db. You can also have soft deletes to ensure you have a track of all the uploads on your system.

    – Abhi

  • Jenny Phillipe

    Any chance of image preview / resize before upload?

  • Abdul hafeez Awan

    how i can get the attachments of gmail in php

  • Randy

    Thanks! This was exactly what I was looking for. Simple and fully functional!

  • swarnim prabhat

    can u tell how i can use this concept in struts 2.
    Thanks

  • Poonam Ghangas

    Hi ,
    Thank you very much for such nice code.. please kind upgrade showing uploading with progress bar .

  • http://findoutanswer.com Sam

    it is not working on my production environment http://findoutanswer.com