How to use Dropzone in Laravel 5 with existing form and submit everything by pressing a button

问题

I have:

{!! Form::open(['route'=>'admin.some.store', 'method' => 'post', 'id' => 'creation-form']) !!}
    {!! Form::text('name', null, ['class' => 'form-control', 'id'=>'name']) !!}
    {!! Form::text('name1', null, ['class' => 'form-control', 'id'=>'name1']) !!}
    {!! Form::button('Submit', ['class' => 'btn btn-primary', 'type'=>'submit']) !!}
{!! Form::close() !!}

I need to to use dropzone.js with such a form. I need to submit all the data of my form and images to the same controller at once. How can I do it. I discovered other questions and documentation, but I faced with some problems (for example, previews are displayed unstyled, when I am not using dropzone class. This class is not only id which automatically starts the plugin but also important element of styling, programmatical activation, etc). Dropzone has very unlogic documentation.

回答1:

There's a couple ways about this. Presumably, your current form Model (lets call it Element) has at least a one to many relationship with the images, if not many-to-many.

I generally solve this by processing the uploads normally (as they're dropped in the Dropzone) and appending the returned IDs to my main Form

Create your Laravel form as usual:

{!! Form::open(['method' => 'POST', 'route' => ['some.route.name'], 'class' => 'myForm') !!}

// various fields...

{!! Form::close() !!}

Create your Dropzone form area:

{!! Form::open(['route' => ['some.route.location'], 'class' => 'dropzone', 'files' => true]) !!}


{!! Form::close() !!}

Then add the Javacript for your Dropzone intsance:

$(document).ready(function() {
    Dropzone.options.myUploadForm = {
        success: function(event, response) {
            $('.myForm').append("<input type='hidden' name='image_ids[]' value='"+response.photo_id+"' />");
        }
    };
});

Then, your main form submits to your Controller Method as normal, at which point you can loop through the image_ids array and pass them to their own method which associates them with your model:

public function storeSomething(Request $request)
{

    $new_element = $this->element->create($request->all());

    // depending on the type of relationship, you can now use the
    // IDs to update your Photos
    $new_element->associateWithImages($request->input('image_ids'));
}

The disadvantage with this approach is that the User may upload images but fail to complete the form, in which case, you may end up with a handful of 'orphaned' images. However, this could be handled with a Cron job which deletes orphaned images periodically.

Otherwise, you can attempt to upload everything in one go using some of the Dropzone configuration options. You'll need to queue up the images that are dropped in the Dropzone, and manually process the Queue once your main form is submitted. Take a look here

来源：https://stackoverflow.com/questions/33975769/how-to-use-dropzone-in-laravel-5-with-existing-form-and-submit-everything-by-pre

标签

laravel

file-upload

dropzone.js