2

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.

Dima Deplov
  • 3,688
  • 7
  • 45
  • 77

2 Answers2

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.

Dima Deplov
  • 3,688
  • 7
  • 45
  • 77
2

A simple way with jQuery UI, check out:

EDIT:

Good luck! :-)

Community
  • 1
  • 1
Mr. B.
  • 8,041
  • 14
  • 67
  • 117
  • No, this is not what I looking for. I want to drag images from my desktop. – Dima Deplov Sep 30 '13 at 22:28
  • @flinth Ok, you didn't mention it. Please update your Question! – Mr. B. Sep 30 '13 at 22:29
  • @flinth: Take a look at my edit. It seems this Question is a duplicate. – Mr. B. Sep 30 '13 at 22:32
  • I don't look for drag and drop honestly, there is much example of it, I look to how to handle image drop from desktop to textarea for my example – Dima Deplov Sep 30 '13 at 22:33
  • @flinth: I guess, you've to upload the image first (on drag over textarea) and then load it into your textarea-editor. It's a combination of "HTML 5 drag/drop", "HTML 5 upload" and displaying it in your textarea-editor. – Mr. B. Sep 30 '13 at 22:36
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/38378/discussion-between-flinth-and-mr-bombastic) – Dima Deplov Sep 30 '13 at 22:41