1

I am learning drag and drop file upload. Is this following method can be used for uploading file. it is just a simple program where if i upload image via input type="file"; i can get the file information in array format but if i use drag and drop method; i get following output. thank you in advance....

home.html

<html>
<head>
    <title>try try</title>
    <link href="style.css" rel="stylesheet"></link>
    <script src="jquery.js"></script>
    <script src="upload.js"></script>       
</head>
<body>
    <form id="upload">
        <div style="display:block; width:300px; height:300px;border:4px dashed #ccc;" id="upload_area" ondragover="return false"></div>
        <span class="result" style="border:1px solid black;"></span>
    </form>
</body>

upload.js

$(document).ready(function(){
jQuery.event.props.push('dataTransfer');
$('#upload_area').bind('drop', function(e) {
    var files = e.dataTransfer.files;
    var formobj = document.getElementById("upload");
    var ans = new FormData(formobj); 
    $.ajax({
        type:"post",
        data:ans,
        cache : false,
        url:"upload.php",
        processData:false,
        contentType:false,
        success:function(response){

            $(".result").html(response);

        }
    })
    return false;
});
})

upload.js

<?php
   echo "<pre>";
   print_r($_FILES);
   echo "</pre>";
?>

Output

array()
Ganesh Patil
  • 68
  • 1
  • 7
  • where is your input type="file" field in your code? – Saty Apr 03 '15 at 13:56
  • there is no `input` with `type as file` in your html. Update your html. – Raja Apr 03 '15 at 13:57
  • possible duplicate of [How can I upload files asynchronously?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) – Ahmed Ziani Apr 03 '15 at 14:11
  • no. there are to different methods. uploading through or draging to upload_area... if i upload file through it becomes successful. bt draging doesnt work. i have removed bcoz it gets successful. i am getting error in drag and drop. – Ganesh Patil Apr 04 '15 at 04:35

2 Answers2

2

You have mistake at ajax, because You don't send file, for send file throw ajax use that: https://github.com/blueimp/jQuery-File-Upload

Or mb its my bad, and u just have to check $_POST (:

Legendary
  • 2,243
  • 16
  • 26
  • hea @Legendary, even $_POST gives same result.and yes i can definately use a jquery plugin but i want to learn what acually happns in drag and drop. by the way... u can use $_FILES for sending file through ajax.... – Ganesh Patil Apr 04 '15 at 04:57
0

got the answer; a small change in upload.js file

upload.js

$(document).ready(function(){
$("#upload_area").bind("dragover", function(e) {
    e.preventDefault();     
})
$("#upload_area").bind("drop", function(e) {
    var file = e.originalEvent.dataTransfer.files;
    processFileUpload(file); 
    return false;
});

function processFileUpload(droppedFiles) {
    var formobj = document.getElementById("upload");
    var uploadFormData = new FormData(formobj);


    uploadFormData.append("file",droppedFiles[0]);

       $.ajax({
            url : "upload.php", // use your target
            type : "POST",
            data : uploadFormData,
            cache : false,
            contentType : false,
            processData : false,
            success : function(ret) {
                //alert(ret);
                $(".result").html(ret);
            }
       });

}

})

Ganesh Patil
  • 68
  • 1
  • 7