multipart/form-data ajax and laravel

[Joveice]

So I'm really not good at front end, but I would like to create a nice page where I upload files with no page updates. (I have already done this with deleting files in a table).

 

So my issue is that I think laravel is not getting any data at all.

 

The form code is really long so I shortened it down to the inputs and selects as thats whats important (this form worked as is before this ajax so it's nothing wrong with it)

I have removed urls but they do work.

<form action="/" method="post" enctype="multipart/form-data" id="file-upload">
  <input type="hidden" name="_token" value="csrftokengoeshere">
  <input type="file" name="file" id="file-select">
  <select id="categoryselector" class="form-control m-b div-toggle" name="iscategory" data-target="#categorys">
    <option selected="" value="false">No</option>
    <option value="true" data-show="#program">Yes</option>
  </select>
  <input placeholder="Program name" name="name" class="typeahead_1 form-control">
  <input placeholder="version" name="version" class="form-control">
  <select id="scan" class="form-control m-b" name="scan">
    <option selected="" value="false">No</option>
    <option value="true">Yes</option>
  </select>
  <button class="btn btn-white btn-block" id="upload-button">Upload</button>
</form>

        $('#file-upload').submit(function(e) {
            e.preventDefault();

            var $form = $(this);
            $form.find('input, select, button, textarea');
            var serializedData = $form.serialize();

            $.ajax({
                url: '/',
                type: 'POST',
                data: $form,
                processData: false,
                contentType: false,
                success: function( msg ) {
                    if ( msg.status === 'success' ) {
                        Snackbar.show({
                            text: msg.msg,
                            pos: 'top-right'
                        });
                    } else {
                        Snackbar.show({
                            text: 'Oops.. ' + msg.msg,
                            textColor: '#ff0000',
                            pos: 'top-right'
                        });
                    }
                },
            });

            return false;
        });
    

 

Currently laravel says token mismatch, in chrome I see that request payload is [object Object]

 

What do I do to fix this?

[leodaniel]

/* Get the CSRF token from meta tag */
xsrfToken = () => $('meta[name="csrf-token"]').attr('content');

/* Set it on every ajax request */
$( document ).ajaxSend((element,request)=>{
	request.setRequestHeader('X-CSRF-TOKEN',xsrfToken())
})

I think this is how it is done in Ajax, of course you can set the CSRF token on every request but setting it globally is way easier

 

This assumes that there is a meta field with the xsrf token

<meta name="xsrf-token" content="********************************" />

 

Edited August 28, 2017 by leodaniel
Added Meta field