Getting drag and dropped files icon using Javascript

Question

I want to get an icon's image when a user drags and drops it over some kind of div, but that it'll show exactly what the user sees (e.g. thumbnail, *.ico), is it possible to do so, or does anyone know of any projects that do similar things?

Just to make sure I got your question right: You want to somehow extract the Icon that the system uses on the clients computer for the file type that the user is uploading. So i.e. if the user uploads a MS Word document you want to show this icon: http://www.angelclubgartow.de/assets/images/word_icon.jpg ? And if the user has set a custom icon for those files, you want to get that custom item? — klaustopher, Sep 25 '11 at 15:08

score 1 · Answer 1 · answered Sep 19 '11 at 06:40

You may need some extra work for converting ico files to file formats viewable in browsers (e.g., JPEG, PNG.)

Drag and drop the images to the browser is possible if you use HTML5's Drag and Drop API. (https://developer.mozilla.org/en/DragDrop/Drag_and_Drop, http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/).
After capturing the user input, you can upload the images to your server. After that you can convert the images whatever you want them to be. Finally you can show the images to the users.

score 1 · Accepted Answer · edited May 23 '17 at 10:34

I would suggest a mix of:

This great drag and drop upload library: http://valums.com/ajax-upload/

This javascript code to preview uploaded images before they upload How to upload preview image before upload through JavaScript

You would have to add a listener in Valum's uploader to get the file that is being uploaded and then display it using the code in the second link.

Getting the local image path via javascript is not an easy task... and being able to do that while supporting most browsers will be even worst...

An easier way to solve your problem would be to upload the image in a temporary location on your server, return that temporary path and display the image that was just uploaded. Then you add a second "Keep" and a "Discard" button that saves the uploaded image to a real path if the user likes what he uploaded and you delete the temporary image. Since your images are .ico, I assume they are not really big files, so they would upload pretty fast and the user would get a "preview" fast too using that technique.

You should ask yourself if all the time invested on tweaking your code to show the user a preview before the upload really improves the user's experience using your tool !

Oscar · Answer 3 · 2011-09-22T12:03:47.107

0

Here is a great tutorial that I think can help you with many problems. If I understood your problem right. http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

edited Sep 22 '11 at 12:03

answered Sep 22 '11 at 11:56

Oscar

107
2
10

That is great, but I'm asking about dragging files from outside the browser and catching their icon to display. – Itai Sagi Sep 22 '11 at 12:08

score 0 · Answer 4 · answered Sep 25 '11 at 14:59

I don't know if you want to use html5, but I think that with jQuery you can do that. I've found this url: http://decafbad.com/2009/07/drag-and-drop/api-demos.html#data_transfer

Here you've a "Using drag feedback images", maybe this can help to you :)

Getting drag and dropped files icon using Javascript

4 Answers4