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 !
Abhi's Weblog is a collection of blog articles written by
Great demo. Thanks a lot.
did you use ajax?
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.
I understand. Thank you.
Welcome, just download the source code and play with it. Probably its not that tough as it may seem
added to http://unixbsd.blogspot.com
Hey buddy, thanks a lot.
And yours is a nice blog, will go through in my free time
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?
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!
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
[...] form submits into an iframe. To understand more on this one read through one of my previous post on Gmail Type Attachment – How to make one? [...]
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
Hi,
Oh is it, well I didn’t really rested this stuff. Must be some silly mistake, will chk out
Hello Abhinav,
Do you know how to do the upload.php code in vb.net?
Thanks
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.
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.
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.
Yeah Param, But I prefer leaving a few thing to readers
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