© Copyright 2012 ABCoder | 
Core JavaScript tips and tricks: playing with javascript
Gmail uploader clone with drag drop feature : Free Download with source code
On 13, May 2009 | 43 Comments | In Core JavaScript, JavaScript, jQuery | By abcoder
Recently I developed the gmail file uploader clone using jQuery. Here is the online demo.
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.
-
Looks great, going to try it out now!
-
Thank you sam
-
hi
how does it work???????
plz tell me >>>>> -
Thankyou Adnan that is a cool uploader.
-
Adnan bhai, ekdam mast !
-
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?? -
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.
-
thank u forthis code
-
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 -
@Dreamer, that’s not supposed to happen. Please check everything again.
-
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. ,
-
Hi!! Does the progressbar works? or is there any signal while a pic it’s being uploaded?
Thanks for this nice script..
-
@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
-
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
-
@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 -
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
-
Do you want to make thumbnail of .psd files using php? I’m not sure how to do that.
-
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.
-
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!
-
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.
-
Great Job……., one more how can i remove Add Comments
-
Please Tell How to remove Add comments from that images
Reply Me via my email also
Thanks
-
@parthi, you’ll get that bit of code in ajaxify.iform.js file
-
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
-
Hi Adnan how r u?
Pls. tell how validation for this images to be done pls. tell me
-
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.
-
Thanks
Adnan U hav done a great job help -
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
-
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
-
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.
-
Hi Adnan … very nice script…
But m facing a problem here like if i upload any image and without clicking on submit button if i close this page then still image and its thumbnail is there in upload folder but i want it to be removed in this case …. can u pls help me with this ? -
Lol the demo was hacked.
-
Interesting post. I may msg about it my to dad! Grafik Komputerowy.
-
thanks !
is it the realtyna property listing of the joomla component’s code ? -
hi
-
The web page http://abcoder.com/Gmail-Uploader/ has been hacked
can you please fix it ? -
Gmail uploader clone with drag drop option – enlightening
-
Check out the cool file upload scripts at http://wp.me/p1JzvG-6T
Submit a Comment
Comments