CODEWITHSUNDEEP
laravel-5dropzone.js
Leoh
Leoh

Reputation: 670

Laravel and dropzone using div and another form inputs

I want to use dropzone to upload multiple images with another form inputs so i want a div that show the images when the user click, also i have a button that trigger the form.

i have this but its not working

html:

<div class="col-md-12">
        <h1>Upload Multiple Images using dropzone.js and Laravel</h1>
        {!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => '', 'id' => '' ]) !!}

        {!! Form::text('name'); !!}
        <div class="dropzone" id="image-upload">
            <h3>Upload Multiple Image By Click On Box</h3>

            <button type="submit" class="btn btn-success" id="submit-all">
            Enviar files
            </button>
        </div>
        {!! Form::close() !!}
    </div>

dropzone:

    Dropzone.autoDiscover = false;

    var imageUpload =  new Dropzone("div#image-upload", { 
        url: "dropzone/store", 
        autoProcessQueue:false,
        uploadMultiple: true,
        maxFilesize:5,
        maxFiles:3,
        acceptedFiles: ".jpeg,.jpg,.png,.gif",

        init: function() {
            var submitButton = document.querySelector("#submit-all")
                //imageUpload = this; // closure

            submitButton.addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                imageUpload.processQueue(); // Tell Dropzone to process all queued files.
            });

            // You might want to show the submit button only when 
            // files are dropped here:
            this.on("addedfile", function() {
              // Show submit button here and/or inform user to click it.
            });

        }

    }

this gave me this error: http://127.0.0.1/project/public/dropzone/store 419 (unknown status)

myController:

 public function dropzone()
 {
    return view('dropzone-view');
 }

/**
 * Image Upload Code
 *
 * @return void
 */
public function dropzoneStore(Request $request)
{


    $dir = public_path().'/upload/';
    $files = $request->file('file');

    foreach($files as $file){
        $fileName = $file->getClientOriginalName();
        $file->move($dir, $fileName);
    }
}

routes: web.php

Route::get('dropzone', 'HomeController@dropzone');
Route::post('dropzone/store', ['as'=>'dropzone.store','uses'=>'HomeController@dropzoneStore']);

Upvotes: 0

Views: 2794

Answers (1)

Don&#39;t Panic
Don&#39;t Panic

Reputation: 14520

Laravel returns a 419 response when there is a token mismatch problem. The code you've shown POSTs files to your server, but does not pass a _token with the request. The web middleware, which is applied by default, will do token verification, and since there is no token, that will fail and throw a 419.

You can probably see this yourself if you look in your browser's devtools, click the network tab, click the POST request where the file is uploaded, and click the Preview or Response tabs.

So you need to pass a _token along with the request. There are many ways to do that, but the simplest is probably what is described in the docs:

  1. Add the token to your <head>

    <meta name="csrf-token" content="{{ csrf_token() }}">

  2. Automatically pass it with every AJAX request:

    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

Upvotes: 2

Related Questions