CODEWITHSUNDEEP
javascriptjqueryhtmldrag-and-drop
Azeem
Azeem

Reputation: 2924

Display Image after drag and drop on html page

I am implementing Drag and Drop Images Control using JQuery/JS. What has been accomplished is that user drag some image file and drop into html page. After dropping file, I only show filename and its size.

What I need to display image on the page as well. But I am not able to get image file content in jquery.

Following is code which i have written:

function handleFileUpload(files, obj) {
for (var i = 0; i < files.length; i++) {
    var fd = new FormData();
    fd.append('file', files[i]);

    var status = new createStatusbar(obj); //Using this we can set progress.
    status.setFileNameSize(files[i].name, files[i].size);
    sendFileToServer(fd, status);

}
}
$(document).ready(function () {
var obj = $("#dragandrophandler");
obj.on('dragenter', function (e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).css('border', '2px solid #0B85A1');
});
obj.on('dragover', function (e) {
    e.stopPropagation();
    e.preventDefault();
});
obj.on('drop', function (e) {

    $(this).css('border', '2px dotted #0B85A1');
    e.preventDefault();
    var files = e.originalEvent.dataTransfer.files;

    //We need to send dropped files to Server
    handleFileUpload(files, obj);
});
$(document).on('dragenter', function (e) {
    e.stopPropagation();
    e.preventDefault();
});
$(document).on('dragover', function (e) {
    e.stopPropagation();
    e.preventDefault();
    obj.css('border', '2px dotted #0B85A1');
});
$(document).on('drop', function (e) {
    e.stopPropagation();
    e.preventDefault();
});

});

On debugging function handleFileUpload, it only displays following attributes:

enter image description here

Can you help in this regard?

Thanks

Upvotes: 11

Views: 12534

Answers (2)

Kiruse
Kiruse

Reputation: 1733

I haven't tried it out, but you're making use of the HTML5 File API. Your image is an instantiation of the File class, which itself is a subclass of Blob. Using the FileReader you can access the file's contents. This article over at the MDN links to another article in the network which shows how to use it: Showing thumbnails of User-selected images

Basically, you access the contents like so:

function handleFileUpload( files, obj ) {
    for( var i = 0; i < files.length; i++ ) {
        // ... your other code
        var reader = new FileReader();
        reader.onload = function(){
            // Should look like data:,<jibberish_data> based on which method you called
            console.log(reader.result);
        };
        reader.readAsDataURL(files[i]);
    }
}

Upvotes: 10

Azeem
Azeem

Reputation: 2924

So, here is how I resolved the issue:

function handleFileUpload(files, obj) {
for (var i = 0; i < files.length; i++) {
    var fd = new FormData();
    fd.append('file', files[i]);
    var status = new createStatusbar(obj); //Using this we can set progress.
    //status.setFileNameSize(files[i].name, files[i].size);
    //sendFileToServer(fd, status);

    var list = document.getElementById("image-list");
    var cell = document.createElement("td");
    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = files[i];
    cell.setAttribute("align", "center");
    cell.setAttribute("valign", "bottom");
    cell.appendChild(img);
    list.appendChild(cell);

    var reader = new FileReader();
    reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(files[i]);
}
}

Upvotes: 8

Related Questions