Hej :) robię galerię zdjęć i próbuję dodać funkcjonalność drag&drop za pomocą jQuery. Moje pole działa na dwa sposoby - albo przez kliknięcie w nie i wybranie pliku albo przez przeciągnięcie właśnie. I o ile przy kliknięciu wszystko jest ok, obraz się ładuje i zostaje zapisany w folderze, o tyle przy przeciąganiu nie jest przekazywany. Siedzę nad tym drugi dzień i nadal nie wiem co jest nie tak.

Mój kod JS:

$(function() {

    $("html").on("dragover", function(e) {
        e.preventDefault();
        e.stopPropagation();
        $("h1").text("Drag here");
    });
    
    $("html").on("drop", function(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
    });
    
    $('.upload-area').on('dragenter', function (e) {
        e.stopPropagation();
        e.preventDefault();
        $("h1").text("Drop");
    });
    
    $('.upload-area').on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
        $("h1").text("Drop");
    });
    
    $('.upload-area').on('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();
    
        var fd = new FormData();

        var file = e.originalEvent.dataTransfer.files;    
        fd.append('file', file[0]);
        uploadData(fd);
        $("h1").text("Uploaded a file");

    });
    
    // kliknięcie
    $("#uploadfile").click(function(){
        $("#file").click();
    });
    
    // wybrany plik
    $("#file").change(function(){
        var fd = new FormData();
    
        var files = $('#file')[0].files[0];
    
        fd.append('file',files);
    
        uploadData(fd);
    });
});
    
    // AJAX i ładowanie pliku
    function uploadData(formdata){
    
    $.ajax({
        url: '',
        type: 'post',
        data: formdata,
        contentType: false,
        processData: false,
        dataType: 'json',
        success: function(response){}
    });
    }

I jeszcze mój kod php z formularzem i zapisywaniem do folderu


<!doctype html>
<html>
	<body>
		<?php
        if(isset($_POST['upload'])){

            // Getting file name
            $filename = $_FILES['file']['name'];
            // Valid extension
            $valid_ext = array('png','jpeg','jpg');

            // Location
            $location = "images/".$filename;
            $thumbnail_location = "images/thumbnail/".$filename;

            // file extension
            $file_extension = pathinfo($location, PATHINFO_EXTENSION);
            $file_extension = strtolower($file_extension);
            $return_arr = array();

            // Check extension
            if(in_array($file_extension,$valid_ext)){  
                
                // Upload file
                if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){

                   
                    $src = $location;
                   
                
               
                }echo "Successfully Uploaded";
               

            }                 


        }

        ?>

       
   <!-- Upload form -->
  <div class = "add-area">
    <div class="form-wrapper">
        <div class="row">
          <div class="col-md-8 offset-md-4" >
            <form method='post' action='' enctype='multipart/form-data'>
              <div class="form-group"> 
                <label for="title">Tytuł obrazka</label><br />
              </div>
              <div class="form-group">
                <input type="text" name="file_title" class="form-control" placeholder="Tytuł obrazka" >
              </div>
              <div class="form-group">
                <input type='file' name='file' id='file'>
              </div>
              <div class="form-group">
              <div class="upload-area"  id="uploadfile">
                <h1>Drag and Drop file here<br/>Or<br/>Click to select file</h1>
               </div>
              </div>
              <div class="form-group">
          
                <button type='submit' value='Upload' name='upload'> Dodaj</button>
              </div>
            </form>
          </div>
        </div> 
      </div>
    </div>
 </body>
</html>