laravel 5.2 send form data to controller with ajax

Question

I try to write script that send image data to controller and save it , I get the image with jQuery then create form data and send it with ajax but in controller my index is undefined , I try to save the image with $_FILES, my code is : my ajax script is :

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var title_image = $('#questionTitleImage').prop('files')[0];
var form_data = new FormData();
form_data.append('file', title_image);
$('#addQuestionLoader').show();
$.ajax({
    url: '/imageUpload/',
    type: 'GET',
    data: form_data,
    contentType: false,
    processData: false,
    success: function (data) {
        console.log(data);
    },
    complete:function () {
        $('#addQuestionLoader').hide();
    }
});

And my controller is :

public function imageUpload(Request $request) {
    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    } else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }
}

Please help me to complete my project , if you have best way to save image with ajax please help me.

Answer 1

I think you aren't sending the file to the server at all. I could be mistaken though, but you could try something like this:

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var title_image = $('#questionTitleImage').prop('files')[0];

var xhr = new XMLHttpRequest();
if (xhr.upload) {
    formData.append('file', title_image);
    // you forgot including the token
    formData.append('_token', CSRF_TOKEN);
    // change your request to POST, GET is not good for files
    xhr.open("POST", '/imageUpload', true);
    xhr.send(formData);

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert("Uploaded");
        }
    }
}

This is the javascript code I'm using to send an image file to the server.

As for the controller, the move_uploaded_file function you're using should be working fine, although I'm using Laravel's native file handling plus a library called Intervention image.

http://image.intervention.io/

Intervention image is great, you could do a whole lot with it, I recommend it!

Here's how I handle the image upload:

use Illuminate\Http\Request;
use Intervention\Image\ImageManager;

public function upload(Request $request)
{
    // get image
    $file = $request->file('file');

    // instantiate Intervention Image
    $imageManager = new ImageManager();
    $image = $imageManager->make($file);

    // save image with a new name
    $image->save(public_path() . '/img/new-image.jpg', 100);

    return response()->json([
        'success' => true,
    ]);
}

If you don't want to use intervention image, you could just transfer the file using Laravel's native file handler:

// get image
$file = $request->file('file');
// save it
$file->store('img');

Hope this helps, keep me posted with what's happening and I'll help :)

EDIT: Here's the full example

// javascript
$('body').on('change', '#questionTitleImage', function(e){
    e.stopPropagation();
    e.preventDefault();

    var CSRF_TOKEN = $('input[name=_token]').val();
    var files = e.target.files || e.dataTransfer.files;
    var file = files[0];

    var xhr = new XMLHttpRequest();
    if (xhr.upload) {
        var formData = new FormData();
        formData.append('file', file);
        formData.append('_token', CSRF_TOKEN);
        xhr.open("POST", '/image', true);
        xhr.send(formData);

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert('Success');
            }
        }
    }
});

CSRF Token field:

// this goes below your input type file
{{ csrf_field() }}

And afterwards, append it to the formdata like this:

formData.append('_token', $('input[name=_token]').val());