CODEWITHSUNDEEP
javascriptjqueryajaxdropzone.js
Kim Carlo
Kim Carlo

Reputation: 1223

sending a separate input type file with DropzoneJs

I am using dropzoneJS in my registration form. I have form with DropZone and a separate input file type. I am able to send the other input text together with the dropzone but the input file type doesn't. I am using AJAX request to upload the files and send the additional data.

here's my form

<form enctype="multipart/form-data">
  <input type="text" name="name" id="name" placeholder="Full Name" >
  <input type="email" name="email" id="email" placeholder="Email Address" >
  <input type="password" name="password" id="password" >

  <input type="file" name="avatar" id="avatar" >

  <div class="dropzone-container file_upload" id="file_upload_container">
      <div class="dz-message default-dropzone-text" data-dz-message>
         <span class="text-default">Drag or click here to upload your credentials (i.e. Certificates, CV etc.)</span>
       </div>
       <div class="fallback">
            <input name="file[]" type="file" id="file" multiple required />
       </div>
  </div>
  <button type="button" id="submit">Submit</button>
</form>

and here's my javascript code

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div.file_upload", {
    url : sendData,
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
    },
    autoProcessQueue: false,
    addRemoveLinks: true,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    acceptedFiles: 'application/pdf, .doc, .docx, .pub, .jpeg, .jpg, .png, .gif, .xls, .xlsx, .ppt, .pptx',
    maxFilesize: 500,
    paramName: "file",
    init: function(){
        $("#submit").click(function(e) {
          e.preventDefault();
          e.stopPropagation();
          myDropzone.processQueue();
        })
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("name", $("#name").val());
            formData.append("email", $("#email").val());
            formData.append("password",$('#password').val());
            formData.append("avatar",$('#avatar'));
        });
        this.on("successmultiple", function(files, response) {
            console.log(response);
        });
        this.on("errormultiple", function(files, response) {
          myDropzone.removeAllFiles();
        });
    }
});

Upvotes: 0

Views: 1849

Answers (1)

Kim Carlo
Kim Carlo

Reputation: 1223

Okay I got it, I was trying to send an object to the API instead of the actual file so I replaced 

formData.append("avatar",$('#avatar'));

with 

formData.append("avatar",$('#avatar')[0].files[0]);

and it worked!

Upvotes: 0

Related Questions