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.

Related posts:

  1. Flickr Uploader Clone: Free Download with source code
  2. Advanced cycle plugin integration
  3. New Phonetic keyboard in Gmail
  4. IE6 png alpha transparency fix for dynamically loaded images via ajax
  5. Finally Gmail has got Themes

35 Comments to “Gmail uploader clone with drag drop feature : Free Download with source code”

  1. Sam 13 May 2009 at 7:49 pm #

    Looks great, going to try it out now!

  2. adnan 14 May 2009 at 7:58 am #

    Thank you sam :)

  3. 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: [...]

  4. adnan 20 May 2009 at 8:01 pm #

    Thank you Nueve for sharing my script on your blog.

  5. abhijeet gupta 22 June 2009 at 10:36 am #

    hi
    how does it work???????
    plz tell me >>>>>

  6. 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

  7. julian 29 June 2009 at 11:49 am #

    Thankyou Adnan that is a cool uploader.

  8. adnan 29 June 2009 at 12:03 pm #

    Thank you @julian

  9. mangesh 3 July 2009 at 12:24 pm #

    Adnan bhai, ekdam mast !

  10. adnan 3 July 2009 at 2:03 pm #

    @mangesh, do I know you?? !!

  11. 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??

  12. 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.

  13. amritesh 7 September 2009 at 11:34 am #

    thank u forthis code

  14. 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

  15. adnan 9 September 2009 at 11:08 am #

    @Dreamer, that’s not supposed to happen. Please check everything again.

  16. 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. ,

  17. 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..

  18. 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

  19. giftyleo6 24 June 2010 at 10:49 am #

    Can i upload any type of file, Actually my requirement is that I want to upload various types of file like .dst,.cdr,.psd etc. Is this is possible in this script

  20. ABM Adnan 24 June 2010 at 11:51 am #

    @giftyleo6, yes you can, the checking is done in initUploader.js (http://abcoder.com/Gmail-Uploader/initUploader.js). Edit line number 10 to support your file extensions.

    Thanks
    Adnan

  21. giftyleo6 24 June 2010 at 11:59 am #

    Yes i try it but the problem is that it is not coming when i did the final post “Submit Query”, As the other format files are not comming in the post values “Submit Query”. but they physically uploaded well

  22. ABM Adnan 24 June 2010 at 12:24 pm #

    Do you want to make thumbnail of .psd files using php? I’m not sure how to do that.

  23. giftyleo6 24 June 2010 at 12:34 pm #

    No i don’t want to do that , I only need name of the file and i want to add it in my database also.

  24. ABM Adnan 24 June 2010 at 12:50 pm #

    Oh! I see, please open uploadPropertyImage.php and you’ll see what is done there. Just remove/comment code for resizing image and directly echo the name of the file passed as GET variable (echo $_GET['img']). It’ll definitely work!

  25. giftyleo6 24 June 2010 at 1:11 pm #

    ok It is working now Thanks But Can we display Name in the box in which image is show after uploading. Suppose i upload two .txt files and i need to show the name of the files in the above box.

  26. parthi 3 July 2010 at 6:11 pm #

    Great Job……., one more how can i remove Add Comments

  27. parthi 3 July 2010 at 6:23 pm #

    Please Tell How to remove Add comments from that images

    Reply Me via my email also

    Thanks

  28. ABM Adnan 3 July 2010 at 10:48 pm #

    @parthi, you’ll get that bit of code in ajaxify.iform.js file

  29. parthi 5 July 2010 at 9:52 am #

    Thanks Adnan,
    Iam happy, that have removed Add Comments fully,

    And onemore help pls. tell me the code that how to insert these uploaded image path to mysql using php That’s urgent for my web site

  30. parthi 6 July 2010 at 9:44 am #

    Hi Adnan how r u?

    Pls. tell how validation for this images to be done pls. tell me

  31. ABM Adnan 6 July 2010 at 11:04 am #

    the validation is already done in initUploader.js file.

    for saving the images use move_uploaded_file() function and then save the path in mysql database.

  32. parthi 6 July 2010 at 3:42 pm #

    Thanks
    Adnan U hav done a great job help

  33. parthi 9 July 2010 at 10:06 am #

    Adnan

    Pls.help me in online it shows while uploading

    Error with file
    phpThumb() v1.7.9-200805132119

    “” does not exist Array

    Pls. help me very urgent

  34. parthi 9 July 2010 at 12:12 pm #

    Adnan

    Pls.help me in online it shows while uploading

    Error with file
    phpThumb() v1.7.9-200805132119

    “” does not exist Array

    Pls. help me very urgent

  35. ABM Adnan 9 July 2010 at 12:17 pm #

    First try to run a phpThumb demo. you’ll get it from php thumb sourceforge page. May be phpthumb is not working on your server.


Leave a Reply