Dropzone Laravel表单验证错误？

Question

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

Answer 1

Dropzone sets the file field to 'file' on default.

You can change it by modifying your .dropzone() function to this:

Dropzone.autoDiscover = false;

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

You can browse their documementation here: http://www.dropzonejs.com/#configuration