图像未通过 ajax 在 Laravel 中上传

Question

Hello i am submitiing my form through ajax.

<form id="addProductForm" action="javascript:void(0)" enctype="multipart/form-data">
    <input type="hidden" id="productId">
        <div class="row">
            <label for="caption" class="col-md-4 col-form-label">Post Image</label>
            <input type="file" class="form-control-file" id="image" name="image">   
         </div>
    <div class="row ">
        <button type="submit" id="submitAddProduct" class="btn btn-primary mr-auto ml-auto" style="margin-top:15px;">Submit</button>
    </div>
</form>

This is the submit script

$('#submitAddProduct').click(function(e){
    e.preventDefault();
    
    var image = $('#image').val();

    $.ajax({
        type:'GET',
        url:'/submitAddProduct',
        async:false,
        data:{
            'image' : image,
        },
        success:function(response) {
            $('#productId').val(response.msg);
        }
    });

});

In my controller,

public function submitAddProduct(Request $request){
        $data = $request->validate([
            'image' => ['required','image']
        ]);

        public function submitAddProduct(Request $request){
        $data = $request->validate([
            'image' => ['required','image']
        ]);

        // dd(request('image')->store('uploads','public'));

        $imagePath = request('image')->store('uploads','public');

        $image = Image::make(public_path("storage/{$imagePath}"))->fit(1200, 1200);
        $image->save();

        $id = Products::insertGetId($data);

        if($id){
            $arr = array('msg' => $id);
        }
        return Response()->json($arr);
    }

        $id = Products::insertGetId($data);

        if($id){
            $arr = array('msg' => $id);
        }
        return Response()->json($arr);
    }

image val is something like C://fakepath//name; I want image to be uploaded to storage/uploads in my public folder.

But i am getting errors. 422 Unprocessable Entity

Please Help. Thank You

Answer 1

My current guess would be that your image gets stripped from the request, because it is bigger than upload_max_filesize and post_max_size allow. Can you try posting a very small (<100kB) image?

My rationale for this is that, if the file is too big, it gets stripped. If it is stripped, the validation rules fail, thus resulting in a 422.

Edit: I just noticed you're working with GET as an HTTP verb. Files can only be sent using POST (and PUT and PATCH, but let's leave those out for now).

Answer 2

You are using GET to upload files which does not make any sense.

1. change the route from get to post in the routes file.

2. Change the ajax code to send POST rather than GET.

3. include the CSRF token in the ajax request:

   • Using headers:

     1. Add the following html meta tag to head (if it does not exists already): <meta name="csrf-token" content="{{ csrf_token() }}"> .
     2. Add the header to your ajax:

      $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

   • Or simply, add the token as parameter in the request itself:

      $.ajax({ type:'POST', ... data:{ '_token' : {{ csrf_token() }}, ... },

4. That should do the trick!

Side note: try using named routes (easier to maintain), and I recommend using Axios.

By default, the resources/js/bootstrap.js file includes the Axios HTTP library which will automatically send this for you - Laravel docs