CODEWITHSUNDEEP
javascriptdrag-and-dropdom-events
Itai Sagi
Itai Sagi

Reputation: 5615

Getting drag and dropped files icon using Javascript

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?

Upvotes: 2

Views: 1760

Answers (4)

newpatriks
newpatriks

Reputation: 581


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 :)

Upvotes: 0

pgratton
pgratton

Reputation: 663

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 !

Upvotes: 1

Oscar
Oscar

Reputation: 105

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/

Upvotes: 0

lemoncider
lemoncider

Reputation: 1218

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

Upvotes: 1

Related Questions