Upload Image In Laravel With jQuery AJAX

Question

I am trying to upload photos in Laravel using jQuery AJAX. But it's always failed many times with error message

The photo must be an image. The photo must be a file of type: jpeg, png, jpg, gif, SVG.

I have no idea why. What's wrong with my code below?

Controller

$validator = \Validator::make($request->all(), [
    'photo' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
    
if ($files = $request->file('image')) {
    //---Insert new file
    $destinationPath = 'public/product_images/'; // upload path
    $image_path = date('YmdHis') . "." . $files->getClientOriginalExtension();
    $files->move($destinationPath, $image_path);
}

$productId = DB::table('products')->insertGetId([
    'product_photo' => $image_path
]);

View

$("#photo").fileinput({
    theme: 'fa',
    uploadUrl: '{{ route('products.store') }}',
    uploadExtraData: function() {
        return {
            _token: $("input[name='_token']").val(),
        };
    },
    allowedFileExtensions: ['jpg', 'png', 'gif'],
    overwriteInitial: false,
    maxFileSize: 2000,
    maxFilesNum: 5,
    slugCallback: function(filename) {
        return filename.replace('(', '_').replace(']', '_');
    }
});
                        
$('#saveBtnForCreate').click(function(e) {
    e.preventDefault();
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        url: "{{ route('products.store') }}",
        method: 'post',
        enctype: 'multipart/form-data',
        cache: false,
        dataType: 'JSON',
        data: {
            photo: $('#photo').val()
        },
        success: function(result) {
            if (result.errors) {
                $('.alert-danger').html('An error in your input!');
                $.each(result.errors, function(key, value) {
                    $('.alert-danger').show();
                    $('.alert-danger').append('<strong><li>' + value + '</li></strong>');
                });
            } 
        }
    });
});

BABAK ASHRAFI BABAK ASHRAFI · Accepted Answer · 2021-04-20T08:39:55

Apparently your uploaded file does not meet the validation rules. Another issue that you have in your code is the line `` that you're trying to save image, while you're passing photo. Below code is from laravel doc for storing files

$validator = \Validator::make($request->all(), [
    'photo' => 'required|file|mimes:jpeg,png,jpg,gif,svg',
]);
if ($files = $request->file('photo')) {
    //insert new file
    $destinationPath = 'public/product_images/'; // upload path
    $image_path = $request->file('photo')->store($destinationPath);
}

Upload Image In Laravel With jQuery AJAX

1 Answers