Drag and Drop Jquery upload to PHP

Question

I have seen many topics about this problem but none of them got a legit answer or a including PHP file.

I want to make a drag & drop saving tool. The problem is that my files are not getting uploaded to my ftp folder.

I got the following code:

HTML:

<div id="drop_zone">
  <p>Drop Here</p>
</div>

<form enctype="multipart/form-data" id="yourregularuploadformId">
       <input type="file" name="files[]" multiple="multiple">
</form>

JS:

$(function() {
var dropZone = document.getElementById('drop_zone');    
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

etc.... dropping part

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

    files = evt.dataTransfer.files; 
    uploadFile(files);

etc... getting file to my method

function uploadFile(droppedFiles){
    // add your files to the regular upload form
   var uploadFormData = new FormData($("#yourregularuploadformId")[0]); 
    if(droppedFiles.length > 0) { // checks if any files were dropped
        for(f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped
            uploadFormData.append("files[]",droppedFiles[f]);  // adding every file to the form so you could upload multiple files
        }
    }
 // the final ajax call
    alert(uploadFormData);
       $.ajax({
        url : "php/uploadFile.php", // use your target
        type : "POST",
        data : uploadFormData,
        cache : false,
        contentType : false,
        processData : false,
        success : function(ret) {
                 alert(ret);
        }
       });
  }

Got the above code from another topic. (alert(uploadFormData); -> gives me a Formdata aboject)

PHP:

      move_uploaded_file($_FILES["file"]["tmp_name"],
      "ftp/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];

Can't make it work :<

The message i get from the callback function in my JS is:

Undefined index: file

Answer 1

Your PHP code needs to iterate over all of the files in the request. Based on your javascript, your PHP code should look something like this:

foreach ($_FILES["files"] as $file) {
    move_uploaded_file($file['tmp_name'], $target);
}

The $target variable must point at the local destination for your file. See the PHP manual for more details.