Upload multiple images, TokenMismatch Error although I do have the token in the form. Any ideas?

Question

I'm trying to upload multiple images at the same time and after the request, display them on the same page, beneath the form such that later (after multiple uploads) I can select which pictures i would like to keep. I used all the posible answers found here (How to upload multiple files using PHP, jQuery and AJAX,
Uploading Multiple Files using AJAX and PHP ) , but no success.

I keep getting TokenMismatchException

500 (Internal Server Error) + TokenMismatchException in VerifyCsrfToken.php line 68:

Any ideas?

Here is my code:

HTML:

<form id="uploadForm" enctype="multipart/form-data">
   <div class="container upload-picture-device">
      <div class="col-md-2 col-sm-1 col-xs-12"></div>
         <div class="col-md-4 col-sm-5 col-xs-12">
             <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <span class="btn btn-de-pe btn-file">
                                Choose <input id="fileInput" type="file" name="files[]" class="pics" multiple>
                            </span>
                        </span>
                        <input type="text" class="form-control input-upload" readonly>
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-5 col-xs-12 text-left">
                <button id="uploadPhotos" type="submit" class="btn-continua">Upload picture</button>
            </div>

        </div>
        </form>

Javascript:

$('#uploadForm').submit(function (e) {
    e.preventDefault();

    var form = new FormData();
    var files = document.getElementsByClassName('pics');
    for (var i=0; i<files.length; i++) {
        form.append("files[pic" + i + "]", files[i][0]); // add receipt to form
    }
    form.append('action', 'upload-photos'); // specify action

    $.ajax({
        url: '{{url("/photos/device")}}',
        type: 'POST',
        data: form,
        cache: false,
        processData: false,
        contentType: false,
        success:function(data) {
            console.log(data);
        },
        error: function(xhr, desc, err) {
            // I have some error handling logic here
        }
    });
});

You are doing an AJAX request and not sending the csrf token. — Can Vural, Apr 24 '17 at 07:47
TokenMismatchException in VerifyCsrfToken.php line 68: + 500 Internal Server Error — Marius Stanciu, Apr 24 '17 at 07:50

score 0 · Accepted Answer · edited May 23 '17 at 11:54

0

In your case, you have 2 forms

<form id="uploadForm" enctype="multipart/form-data">

var form = new FormData();

and I think "TokenMismatchException" is coming from the second form so you can append csrf_token with the second form

See this question

edited May 23 '17 at 11:54

Community

1
1

answered Apr 24 '17 at 07:53

Mohamed Elorbany

18
1
3

Thanks a lot for the answer , I was missing $('form')[0] from new FormData($('form')[0]). – Marius Stanciu Apr 24 '17 at 08:03

score 0 · Answer 2 · answered Apr 24 '17 at 07:59

You are making an AJAX request and not sending the csrf token. You are creating new empty form data, not using the actual form.

You can check the documentation to see the different ways to include the csrf token in a request.

Basically you can do something like this, before the ajax request:

form.append('_token', {{ csrf_token() }})

Upload multiple images, TokenMismatch Error although I do have the token in the form. Any ideas?

2 Answers2