CODEWITHSUNDEEP
phphtml
Roman
Roman

Reputation: 3749

HTML5 drag and drop question

I'm trying to implement HTML5 drag and drop to upload a file. When the file is dropped, I want to call the php file to handle the dropped file. How can I call the php file and access the dragged file in php file. Also, I want to send the success or error message back from php file.

I'm unable to figure out how can I post the file to php and get the response from there. My code so far is: 

function drop(evt) {
        evt.stopPropagation();
        evt.preventDefault();

        var files = evt.dataTransfer.files;
        handleFiles(files); 
    }

    function handleFiles(files) {

        var file = files[0];    
        var reader = new FileReader();

        reader.onload  = uploadFile;  //main function
        reader.onloadend = uploadComplete;
        reader.readAsDataURL(file);
    }

    function uploadFile(evt)
    {
        //call upload.php
        //get success msg or error msg
        //alert(success) or alert(error)
    }

Here's example upload.php file:

<?php
    $dropped_file  //how to get the file

    if (filesize($dropped_file) > 1024)
    {
        echo "size error"   //how to send this error
    }
    else
    {
        echo "success"      //how to send this success msg.
    }
?>

Upvotes: 1

Views: 655

Answers (3)

Mohamed Atef
Mohamed Atef

Reputation: 196

Use jQuery UI will give you the ability to drag and drop in the most easy way

Upvotes: -1

Jack
Jack

Reputation: 15872

You can use jQuery, upon the drop callback perform an AJAX call.

$("body").droppable({
    accept: "img", //Your element type goes here e.g. img
    drop: function(event, ui){
       //Perform an AJAX call here. You can access the current dropped item through
       //ui.draggable 
    }
)}

Upvotes: 0

Janis Lankovskis
Janis Lankovskis

Reputation: 1040

This should help - http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

Upvotes: 2

Related Questions