Display Image after drag and drop on html page

drag-and-drop, html, javascript, jquery

Solution

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]);
}
}

Problem

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: Can you help in this regard? Thanks

Original source