CODEWITHSUNDEEP
jquerydrag-and-drop
Martin
Martin

Reputation: 2017

jQuery: Drag'n'drop - info doesn't update in textarea after change and new drop

I have a dropzone where you can drag'n'drop files and the file size is returned in a textarea (for easy copy-paste).

When you cut the text or change it and drop another file, the textarea doesn't update :(

var dz = $("#dropzone"),
    dzt = $("#dropzone-text"),
    ta = $("textarea#dropzone-info");

function handleDragOver(evt) {
    //evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show the drag'n'drop is a copy
}

function handleFileSelect(evt) {
    //evt.stopPropagation();
    evt.preventDefault();
    ta.text("");
    var files = evt.dataTransfer.files,
        fn = files.length;
    for (var i = 0, f; f = files[i]; i++) {
        ta.append(f.size + '\n');
        console.log(f.size);
    }
    ta.show().select().focus();
    var rows = ta.val().split("\n").length;
    ta.attr('rows', rows);
}

// Setup the dnd listeners.
var dropZone = document.getElementById('dropzone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

Test: http://jsfiddle.net/LFSNb/1/

Upvotes: 1

Views: 255

Answers (1)

Romain Dénarié
Romain Dénarié

Reputation: 91

Change 

     ta.append(f.size + '\n');

by

     ta.val(ta.val()+f.size + '\n');

in your for.

Then, the textarea content will be updated correctly.

Upvotes: 2

Related Questions