how to upload any file using dropzone.js in php?

Question

i am unable to upload image using dropzone.js in php.

i have tried everything but nothing work for me.

MY HTML Code

<form method="post" enctype="multipart/form-data">
    <div class="dropzone" id="mydropzone">
        <input type="file" name="img">
        <div class="dropzone-previews"></div>
    </div>
    <button type="submit" id="submitbtn">Upload</button>
</form>

MY Javascript Code

   Dropzone.options.mydropzone = {
                url:"upload.php",
                uploadMultiple: true,
                maxFilesize: 99,
                maxFiles : 3,
                autoDiscover:false,
                acceptedFiles: ".png,.jpg,.jpeg",
                previewsContainer: '.dropzone-previews',
                autoProcessQueue : false,
                parallelUploads: 100,
                addRemoveLinks: true,       
                init:function(){
                    var myDropzone = this;
                    $("#submitbtn").on('click',function(e) {
                       e.preventDefault();
                       myDropzone.processQueue();
                    });
                }

           }

MY PHP Code (I Tried it work 100% fine but with dropzone.js not work) $upload_dir = "img/";

$name = $_FILES['img']['name'];
$tmp_file = $_FILES['img']['tmp_name'];

move_uploaded_file($tmp_file, $upload_dir.$name);

What does "not working" mean? Error messages? Have you checked the browsers console to see if you get any JS errors? Have you checked the network tab in your browsers dev tools to see what actually gets passed and what the response is? — M. Eriksson
– M. Eriksson, Commented Aug 26, 2019 at 10:11

Vaibhavi S. · Accepted Answer · 2019-08-26 10:57:33Z

2

You don't need to add input type file in your html

<form method="post" enctype="multipart/form-data">
<div class="dropzone" id="mydropzone">
    <div class="dropzone-previews"></div>
</div>
<button type="submit" id="submitbtn">Upload</button>

Try this Code. Hope this will work

 var fileList = new Array;
 var i = 0;
 var myDropzone = new Dropzone("div#mydropzone", { 
     url:"upload.php",
     uploadMultiple: true,
     maxFilesize: 99,
     maxFiles : 3,
     autoDiscover:false,
     acceptedFiles: ".png,.jpg,.jpeg",
     previewsContainer: '.dropzone-previews',
     autoProcessQueue : false,
     parallelUploads: 100,
     addRemoveLinks: true,       
     init:function(){
        this.on("success", function (index, response) {
            var res = JSON.parse(response);
            console.log(res);
            fileList = res.images;
            for (i = 0; i < fileList.length; i++) {
              var imgname = fileList[i];
              $(".dz-remove").eq(index).attr('data-url',imgname);
           }
        $('.dz-success-mark').show();
        });
     }
 });

In you upload.php file return response with image name

  $name = $_FILES['img']['name'];
$tmp_file = $_FILES['img']['tmp_name'];
$filesCount = count($_FILES[$img]['name']);
for($i = 0; $i < $filesCount; $i++) { 
   move_uploaded_file($tmp_file[$i], $upload_dir.$name[$i]);
   $upload_image[] = $name[$i];
}
$response_data=array('images'=>$upload_image);
echo json_encode($response_data);

edited Aug 26, 2019 at 10:57

answered Aug 26, 2019 at 10:50

Vaibhavi S.

1,0938 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

N'Bayramberdiyev Over a year ago

It will not work. Console error: Uncaught Error: Dropzone already attached.

Vaibhavi S. Over a year ago

Try html code without form tag` <div class="form-group col-md-12"> <div class="dropzone dz-square" id="mydropzone"></div> </div>`

Collectives™ on Stack Overflow

how to upload any file using dropzone.js in php?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related