Gmail uploader clone with drag drop option

Gmail uploader clone with drag drop feature : Free Download with source code

Recently I developed the gmail file uploader clone using jQuery. Here is the online demo.

Gmail uploader clone with drag drop feature screen shot

I added some extra functionalists.
You can see the image thumbnails after the uploading is completed. There is a cross button at top right of each thumbnail, clicking on it will delete the image. If you right click on the image you’ll see a context menu from which you can delete the image too along with replace the existing image option.

The most interesting feature is you can drag drop the thumbnails to change the order. Yes this is essential when you need to maintain the order of images in classified sites after uploading them, also a little modification will let you edit the image order later time by dragging the thumbnails. The image name and the image title is dynamically added in the “updateInfo” form and send(post) via the hidden fields imgs[] and imgComment[] array. You can easily get the order by php using foreach loop on $_POST['imgs'] field. Just hit the submit button after uploading 2 images and you will see the output on post.php page. (hope that makes sense).

Download it for free in a single zip file

If you have any better example of gmail uploader clone please share the links in comments.

Sam 13 May 2009 at 7:49 pm #

Looks great, going to try it out now!
adnan 14 May 2009 at 7:58 am #

Thank you sam :)
Nueve scripts de carga de archivos | Christian Soronellas

[...] uploader clone with drag drop feature NombreGmail uploader cloneLibreria JavascriptjQueryEnlacehttp://abcoder.com/javascript/gmail-uploader-clone-with-drag-drop-feature-free-download-with-source-…SHARETHIS.addEntry({ title: “Nueve scripts de carga de archivos”, url: [...]
adnan 20 May 2009 at 8:01 pm #

Thank you Nueve for sharing my script on your blog.
abhijeet gupta 22 June 2009 at 10:36 am #

hi
how does it work???????
plz tell me >>>>>
adnan 22 June 2009 at 11:35 am #

@Abhijeet, just download the source code and u’ll understand easily.

http://www.abcoder.com/Gmail-Uploader/Gmail-Uploader.zip
julian 29 June 2009 at 11:49 am #

Thankyou Adnan that is a cool uploader.
adnan 29 June 2009 at 12:03 pm #

Thank you @julian
mangesh 3 July 2009 at 12:24 pm #

Adnan bhai, ekdam mast !
adnan 3 July 2009 at 2:03 pm #

@mangesh, do I know you?? !!
Irfan 18 July 2009 at 3:13 pm #

hi andan gr8 gr8 work
i reach here while finding free ebooks for javascript, asp.net, cs/vb.net can you plz guid where i can get it??
FDisk 5 August 2009 at 8:02 pm #

This script do not works on Opera v 10b. And there is also a bug. Then you dynamically upload a picture and delete it after pressing submit button still image name was submitted.
amritesh 7 September 2009 at 11:34 am #

thank u forthis code
Dreamer 9 September 2009 at 10:41 am #

i have a problem when i tried to upload the third option, this duplicate tha pic, why?, but the cod is very good.
congratulations and gracias por todo
adnan 9 September 2009 at 11:08 am #

@Dreamer, that’s not supposed to happen. Please check everything again.
John74 22 October 2009 at 8:52 pm #

Perhaps one voted no because one actually preferred a more honestly socialist response, in which the federal government nationalized these banks or their transactions, and thus made voters not just indirect beneficiaries of any money that might be recouped though the recovery of Wall Street banks, but actual owners of the assets in question themselves. ,
Santomas 10 March 2010 at 6:42 am #

Hi!! Does the progressbar works? or is there any signal while a pic it’s being uploaded?

Thanks for this nice script..
adnan 10 March 2010 at 11:41 am #

@Santomas, No, I’ve not added the progress bar feature for this one. You may try http://abcoder.com/javascript/flickr-uploader-clone-free-download-with-source-code/ for progress bar.

Thanks