I want to make text area that will handle image drop event on it from the desktop.

I found that I could attach event to html element, but it doesn't work properly. I don't find any error, but it doesn't work. Here is my code:

var imageDragOver = function imageDragOver(evt)
{
    console.log('imageDragOver');
    evt.stopPropagation();
    evt.preventDefault();
}

var imageDrop = function imageDrop(evt)
{
    console.log('imageDrop');
    evt.stopPropagation();
    evt.preventDefault();

}


document.addEventListener($('textarea'), imageDragOver, false);
document.addEventListener($('textarea'), imageDrop, false);

There is no any message in console log. What I do wrong? I don't look for an already made solutions.

I want to make text area that will handle image drop event on it from the desktop.

I found that I could attach event to html element, but it doesn't work properly. I don't find any error, but it doesn't work. Here is my code:

var imageDragOver = function imageDragOver(evt)
{
    console.log('imageDragOver');
    evt.stopPropagation();
    evt.preventDefault();
}

var imageDrop = function imageDrop(evt)
{
    console.log('imageDrop');
    evt.stopPropagation();
    evt.preventDefault();

}


document.addEventListener($('textarea'), imageDragOver, false);
document.addEventListener($('textarea'), imageDrop, false);

There is no any message in console log. What I do wrong? I don't look for an already made solutions.

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 30, 2013 at 22:29 Dima Deplov asked Sep 30, 2013 at 22:21 Dima DeplovDima Deplov 3,71877 gold badges4848 silver badges7777 bronze badges 5

• You aren't specifying an event to bind with. – CP510 Commented Sep 30, 2013 at 22:23
• possible duplicate: stackoverflow./questions/6604622/… – CP510 Commented Sep 30, 2013 at 22:24
• @CP510 a read this question, but it doesn't answer my question – Dima Deplov Commented Sep 30, 2013 at 22:27
• @CP510 Oh, I'm don't specify an event. Mm can you show an example how to do this proper? – Dima Deplov Commented Sep 30, 2013 at 22:30
• 1 Read this... htmlgoodies./html5/javascript/… – CP510 Commented Sep 30, 2013 at 22:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

To handle drop event on your area (text area or div) you need to do this:

var dropzone = document.getElementById('ta'); // paste your dropzone id here
dropzone.ondrop = function(e){
    console.log('drop'); // for debugging reasons
    e.preventDefault();  // stop default behaviour

    readfiles(e.dataTransfer.files); // function to handle file(s) that was added to dropzone
};

Next you need to send this files to server and show it in the browser if you want.

function readfiles(files) {
var formData = new FormData(); // we initialise a new form that will be send to php 

for (var i = 0; i < files.length; i++) {  // if we have more that one file
    previewImg(files[i]); // function to preview images

formData.append('file'+i, files[i]);

}

formData.append('moreInfo','myValuableValue');// you can append additional string info

$.ajax({
    url: './path_to_file_handler.php',
    type: 'POST',
    data: formData,
    async: true,
    success: function (data) {
        console.log(data);
    },
    cache: false,
    contentType: false,
    processData: false
 });


}       


function previewImg(file) {
var reader = new FileReader();

reader.onload = function (event) {

     var image = new Image();

    image.src = event.target.result; // set image source

    image.width = 550; // a fake resize


    document.getElementById('body').appendChild(image); // append image to body

};
reader.readAsDataURL(file);
}

Code for testing path_to_file_handler.php

<?php 
  print_r($_POST);
  print_r($_FILES); 
?>

Hope it will help somebody.

A simple way with jQuery UI, check out:

• http://jqueryui./draggable/

• http://jqueryui./droppable/

EDIT:

• Duplicate of: Drag and drop desktop to browser HTML5 Javascript ?

Good luck! :-)