dropzone.js文件上传遇到问题

Question

I'm using for the first time dropzone.js inside another form...so as two forms can't be nested, I removed dropzone's form:

html snippet:

<form id="addproduct" name="addproduct" action="receiveAddForm" method="post" enctype="multipart/form-data">
  <fieldset class="form-horizontal">
    <div class="form-group">
      <div class="col-sm-2">
        <small class="text-navy"><b>* Campos Obligatorios</b></small>
      </div>
    </div>
    <div class="form-group"><label class="col-sm-2 control-label">Nombre (Modelo) *:</label>
      <div class="col-sm-10"><input name="name" type="text" class="form-control"></div>
    </div>
  </fieldset>

  <div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>
</form>

js snippet:

Dropzone.options.myAwesomeDropzone = {
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100,
        maxFiles: 3,
        addRemoveLinks: true,
        maxFilesize: 10,
        url: 'receiveAddForm',

        init: function() {
            var myDropzone = this;                

            $("#submit_form").click(function (e) {
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });

            this.on("sendingmultiple", function() {
            });
            this.on("successmultiple", function(files, response) {
            });
            this.on("errormultiple", function(files, response) {
            });

            this.on("maxfilesexceeded", function(file){
                // alert("No more files please!");
            });

            this.on("uploadprogress", function(file, progress) {
                console.log("File progress", progress);
            });
        }
    }

so in server side I'm getting this after echoing $_FILES:

array (size=1)
'files' => 
  array (size=5)
    'name' => string '' (length=0)
    'type' => string '' (length=0)
    'tmp_name' => string '' (length=0)
    'error' => int 4
    'size' => int 0

what seems to be the problem here? my php.ini is set to 1000MB in upload max file size, memory limit and so on... any help would be appreciatted!

Answer 1

The 'error' => int 4 means that no file has been uploaded, i think this is because you are submitting the form like if it was a regular form, if you want to include dropzone inside a regular form i don't think you can submit the form the regular way and attach to it the files dropped in the dropzone element, or at least there is no simple way to do it, one solution could be to encode the file in base64 and then add the encoded string to an input to send.

But an easy one I think is to send the form using dropzone and append the input values to the request using javascript, here generic example.

html:

<form id="addproduct">
    <label>Input 1: </label>
    <input type="text" name="input1">
    <label>Input 2: </label>
    <input type="text" name="input2">
    <div id="myAwesomeDropzone" class="dropzone"></div>
</form>
<button type="button" id="submit_form">Submit</button>

js:

Dropzone.options.myAwesomeDropzone = {
    url: 'receiveAddForm',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 3,
    maxFiles: 3,
    init: function () {
        var myDropzone = this;
        $('#submit_form').on("click", function() {
            myDropzone.processQueue();
        });
        this.on("sending", function(file, xhr, formData){
            $('#addproduct').find('input').each(function() {
                formData.append( $(this).attr('name'), $(this).val() );
            });
        });
        this.on("success", function(file, response) {
            console.log(response);
        });
        this.on("completemultiple", function(files) {
            // Here goes what you want to do when the upload is done
            // Redirect, reload , load content ......
        });
    },

};

receiveAddForm (php):

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') 
{
    echo "RECEIVED ON SERVER: \n";
    print_r($_FILES);
    print_r($_POST);
}

The server file just prints the data received on the server, so you can see it in browsers console. I omitted bootstrap classes and elements only to show the relevant part, but you cand add them no problem.

Answer 2

to have a dropzone inside another form you can put a div in the form with class="dropzone" and convert it to dropzone element like this:

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("#my-awesome-dropzone", {
  autoProcessQueue: false,
  url: "receiveAddForm",
  // other options
});

then you can call the events like this:

myDropzone.on("addedfile", function(file) {
  console.log("File added:", file.name);
});

jsfiddle with your form : fiddle