Dropzone Laravel Form Validation

Problem: Form post validation on images fails. Error: Images are required

In my validation rules, i've set:

'images' => 'required|image',

In my form i've built the following:

<div class="panel panel-default">

    <div class="panel-heading">Add photos</div>

    <div class="panel-body">

        <div id="myDropzone" class="dropzone">
            
        </div>

    </div>

</div>

I'm not sure how to insert the file upload form field? I am expecting the validator to throw the error. But with regards to dropzone, i'm not sure how to do it.

This is my javascript to initiate dropzone

Dropzone.autoDiscover = false;

$('#myDropzone').dropzone({
    url: 'dashboard/add/products',
    uploadMultiple: true,
    maxFiles: 10,
    acceptedFiles: '.jpg, .jpeg',
    autoProcessQueue: false, // myDropzone.processQueue() to upload dropped files
    addRemoveLinks: true,
    dictRemoveFile: "Remove image"
});

My Ajax request to post the form is this:

var form = $(this);

var formdata = new FormData(form[0]);

form.find('div.alert').remove();

e.preventDefault();

var action = $(this).attr('action');

var method = $('input[name=_method]').val() || 'POST';

$.ajax({
    type: method,
    action: action,
    data: formdata,
    processData: false,
    contentType: false,
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(data) {
        var errors = data.responseJSON;

        $.each(errors, function(key, value) {
            console.log(key + ' - ' + value);
            $('#' + key).after('<div class="alert alert-danger">' + value + '</div>');
        });

    }

});

Thank you for reading this.

davidfaux

11 years ago

Level 7

The dropzone docs mention that uploaded files can be handled as if there would have been an input like <input type="file" name="file" />

This means your validation should be linked to a filed named file or your need to add a paramName entry setting a new "name"

$('#myDropzone').dropzone({
    url: 'dashboard/add/products',
    uploadMultiple: true,
    paramName: "images",
    maxFiles: 10,
    acceptedFiles: '.jpg, .jpeg',
    autoProcessQueue: false, // myDropzone.processQueue() to upload dropped files
    addRemoveLinks: true,
    dictRemoveFile: "Remove image"
});

1 like

kennethjaysone

11 years ago

Level 4

Hi @dfaux

Thank you for taking the time to help me.

I did add paramName: "images",

Just that i'd like the image upload to happen if validation passes. This form is submitted via ajax. I'm not quite sure where to add

$('#myDropzone').processQueue();

Because i'm trying to use the following ajax script on submit of the form

$.ajax({
    type: method,
    action: action,
    data: formdata,
    processData: false,
    contentType: false,
    dataType: 'json',
    success: function(data) {
        console.log(data);
        $('#myDropzone').processQueue(); // Am i doing this right.
    },
    error: function(data) {
        var errors = data.responseJSON;
        $.each(errors, function(key, value) {
            console.log(key + ' - ' + value);
            $('#' + key).after('<div class="alert alert-danger">' + value + '</div>');
        });

    }

});

My controller is doing this

if ($request->ajax()) {

    return $request->all();

}

Again thank you for helping @dfaux

davidfaux

11 years ago

Level 7

No 100% sure to be honest, haven't used Dropzone in a project before however I don't think you use the processQueue() function when using ajax.

You need to process the file upload in your controller, at the moment you're merely passing back what was sent from the form.

nitinsridar

9 years ago

Level 1

You have to do front end validation for this using " responseText['file']; " on success of the image upload in temp folder.

In javascript: Use an global array and store responseText['file']; in array and onsubmit check if the array is empty or not.

eugenefvdm

6 years ago

Level 31

I agree with @nitinsridar that you have to use Javascript or jQuery or whatever. The reason is if you use the Laravel validation the uploaded file won't be there again when the page reloads.

Do anyone have sample source code on how to do this:

Properly handle the CSS error output around the Dropzone upload area.
The actual Javascript. :-)

Please or to participate in this conversation.