Use single request for both data and file submission to server

user_8526432 0
Viewed 89

A dropzone js need to create a new form but I want to use the same form to post both data and image, how can I achieve this, any idea.

<form method="POST" enctype="multipart/form-data">
  <input type="text" name="name" id="name">
  <!-- how to replace this field with dropzone but in this form in order to use the same ajax as below -->
  <input type="file" name="photo" id="photo">
  <button type="submit">send</button>
</form>

$("form").on('submit', function(e) {
  $.ajax({
    url: 'add.php',
    type: 'POST',
    data: new FormData(this),
    dataType: 'JSON',
    contentType: false,
    cache: false,
    processData: false,
  }).done(function(data) {
    if (data.success == false) {
      if (data.errors.name) {
        $('#name').append('<span class="text-danger">' + data.errors.name + '</span>');
      }
      if (data.errors.photo) {
        $('#photo').append('<span class="text-danger">' + data.errors.photo + '</span>');
      }
    }
  });
  
  e.preventDefault();
});
dropzone.js php jquery ajax
1 Answers

You need to append dropzone files separately to FormData. Here is my solution,

$(document).ready(function () {
    // get a reference to photo dropzone
    var photoDropzone = Dropzone.forElement('#photo-dropzone');

    $("form").submit(function (e) {
        e.preventDefault();
        // create the complete FormData here
        var fd = new FormData(this);
        // append dropzone files into the form data
        for (var i = 0; i < photoDropzone.files.length; i++) {
            fd.append('file[]', photoDropzone.files[i]);
        }

        $.ajax({
            url: 'add.php',
            type: 'POST',
            data: fd,
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
        }).done(function (data) {
            console.log('done');
            if (data.success == false) {
                if (data.errors.name) {
                    $('#name').append('<span class="text-danger">' + data.errors.name + '</span>');
                }
                if (data.errors.photo) {
                    $('#photo').append('<span class="text-danger">' + data.errors.photo + '</span>');
                }
            }
        });
    });
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/basic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    // prevent auto processing in dropzone configuration
    Dropzone.options.photoDropzone = {
        autoProcessQueue: false
    };
</script>

<form method="POST" enctype="multipart/form-data">
    <input type="text" name="name" id="name">
    <button type="submit">send</button>
</form>
<!-- add dropzone form in the same page -->
<form action="add.php" class="dropzone" id="photo-dropzone">

user_84601320
Related