Laravel 5 - upload file using ajax

Question

I have this HTML form:

<form action="{{ route('send_form') }}" method="post" class="send_form" enctype="multipart/form-data">
        <input type="hidden" name="_token" class='token' value="{{ csrf_token() }}" />
        <input type="text" id="fullname" name="fullname" placeholder="" >
        <input type="file" id="myfile" name="myfile" />
        <button>Send</button>
</form>

I'm tring to upload the file via ajax in this why:

$(".send_form").submit(function(e) {

    e.preventDefault();
    $this = $(this);

    var $form = $( this),
        url = $form.attr( "action");

    $.ajax({
        url: url,  //Server script to process data
        type: 'POST',
        headers: { 'X-CSRF-TOKEN':$form.find('.token').val() },
        // Form data
        data: new FormData($form[0]),
        cache: false,
        contentType: 'json',
        processData: false,
        //Ajax events
        success: function( data ) {
            conosle.log('yesss');
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR, textStatus, errorThrown);
        }
    });

    return false;
});

I can see that the file sent via the Request payload in the Chrome dev tools:

------WebKitFormBoundaryBXAYgtRKJjEyH6NP
Content-Disposition: form-data; name="myfile"; filename="01.png"
Content-Type: image/png

In my Laravel controller, I can't get the input in any why. The Input::all() return empty, the Request::instance()->all() is empty, also Input::get('fullname') is empty.

At the start of my controller code I have all this:

namespace App\Http\Controllers;

use App\Http\Requests;

use Request;
use Response;
use Carbon\Carbon;
use Illuminate\Support\Facades\Redirect;
use Lang;
use Validator;
use Input;

What can I do?

Thanks

You're asking what you can do? You can ask yourself why you try to get a file via the regular input method. In plain PHP is the file also a special kind of input which has it's own array ($_FILES) and that's not different in Laravel. laravel.com/docs/5.2/requests#files — Charlotte Dunois
– Charlotte Dunois, Commented Jan 13, 2016 at 16:04
when I do print_r($_POST); print_r($_FILES); it's also shows two empty arrays. As I said, the problem is not only in the file, also the input field gets empty — Nir
– Nir, Commented Jan 13, 2016 at 18:39

Josh · Accepted Answer · 2016-01-13 15:47:50Z

1

Assuming the file is actually uploaded (see below), you don't access it like a normal input. There is a special method for accessing files called file. So \Request::instance()->file('myfile') is what you want.

Be careful when doing AJAX file uploads without a third party fallback like Blueimp. It looks like most modern browsers support it now, but IE 8 and 9 do not and IE 10 and 11 do not support responseType: 'json'. Support on mobile (Android 4.4 and below, Opera Mini) is limited as well. (Source + some fun past bug fixing)

answered Jan 13, 2016 at 15:47

Josh

8,1993 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nir Over a year ago

As I said, the problem is not only in the file, also the input field gets empty

Collectives™ on Stack Overflow

Laravel 5 - upload file using ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related