Dropzone form into a global form : impossible to get the file with Laravel

I'm trying on the homepage on my website, to have a form which contains a dropzone area with a preview to see the file with three other inputs. Goal is that at validation, everything is stocked into the database and I'm able to open the document on another page.

The problem is that, whatever I try, it seems like I'm not able to get the file on the server side once the file is loaded with Dropzone.JS.

Each time on the server side I'm able to have the data of my form, but never the file itself, which gives me an error on the server (controller) side.

Furthermore, another problem is that the progress bar is leaving empty, and not even filling once I'm submitted the form. Best would be that it loads the file (putting the progress bar at 100%), then once it's "loaded", I can submit it with the rest of my form.

I'm using part of the code provided with the Bootstrap implementation : dropzone-bootstrap.

Here is my HTML form :

<form method="post" action="/upload-free-document" id="send-files-form" files="true" enctype="multipart/form-data">
<h3 class="form-title text-left">@lang('landing.get_started')</h3>

<div class="form-header">
    <div class="form-group icon-addon addon-lg">
        <input type="text" name="email" id="email" class="form-control wow fadeInUp" placeholder="@lang('landing.your_email')" required>
        <label for="email" class="glyphicon glyphicon-user wow fadeInUp" rel="tooltip" title="@lang('landing.your_email')"></label>
    </div>
    <div class="form-group icon-addon addon-lg">
        <input type="text" name="signatories-email" id="signatories-email" class="form-control wow fadeInUp" placeholder="@lang('landing.signatories_email')" required>
        <label for="email" class="glyphicon glyphicon-envelope wow fadeInUp" rel="tooltip" title="@lang('landing.your_email')"></label>
    </div>
    <div class="form-group">
        <div class="col-md-12 input-group">
            <span class="input-group-addon message-icon wow fadeInUp"><span class="glyphicon glyphicon-pencil message-glyph-icon"></span></span>
            <textarea id="document-message" name="document-message" rows="10" cols="20" class="form-control input-message wow fadeInUp" maxlength="1500" placeholder="@lang('landing.your_message')" required></textarea>
        </div>
        <span class="caracters-left"><span id="chars">1500</span> @lang('landing.caracters_left')</span>
    </div>

    <div id="actions" class="row">
        <div class="col-lg-6">
            <span class="btn btn-success fileinput-button upload-buttons add-file-button">
                <i class="glyphicon glyphicon-plus"></i>
                <span>@lang('landing.add_file')</span>
            </span>
        </div>
    </div>
    <div class="table table-striped files" id="previews">
      <div id="template" class="file-row">
        <div>
            <span class="preview"><img data-dz-thumbnail /></span>
        </div>
        <div>
            <p class="name" data-dz-name></p>
            <strong class="error text-danger" data-dz-errormessage></strong>
        </div>
        <div>
            <p class="size" data-dz-size></p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
              <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
            </div>
        </div>
      </div>
    </div>

    <div class="form-group last">
        <input type="submit" id="submit-document" class="btn btn-warning btn-block btn-lg" value="@lang('landing.demo_sign_document')">
    </div>
    <p class="privacy text-center">@lang('landing.privacy_text') <a href="privacy.html">@lang('landing.privacy_link')</a>.</p>
</div>

And here is the Dropzone configuration :

    // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: "/upload-free-document",
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false,
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
    maxFiles: 1,
    acceptedFiles: ".pdf", //is this correct? I got an error if im using this
    maxFilesize: 3145728,
    parallelUploads: 1,
    uploadMultiple: false,
    autoProcessQueue: false,

    // The setting up of the dropzone
    init: function() {
        var myDropzone = this;

        $("#submit-document").click(function (e) {
            // e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        }); 

        myDropzone.on("addedfile", function(file) {
            console.log("Fichier ajouté");
        });

        // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
        // of the sending event because uploadMultiple is set to true.
        this.on("sending", function(file, xhr, formData) {
            console.log(formData);
            formData.append("email", $('#email').val());
            formData.append("_token", $('[name=_token').val());
            console.log("Fichier en cours d'envoi."); 
        });

        this.on("success", function(files, response) {
            // Gets triggered when the files have successfully been sent.
            // Redirect user or notify of success
             myDropzone.removeAllFiles();
            console.log("Succès de l'envoi.");
        });

        this.on("error", function(files, response) {
            // Gets triggered when there was an error sending the files.
            // Maybe show form again, and notify user of error
            console.log("Erreur de l'envoi.");
        });
      }
});

What is wrong with my form or dropzone configuration ?

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2vZ747a
via IFTTT