formData return empty object on file upload ajax laravel

Question

I'm trying to upload image through ajax but i'm not able to get image file on controller as formData always return empty object.

form:

<form id="category_add" method="#">
        <div class="card">
            <div class="formBlock">
                <div class="row">
                    {{ csrf_field() }}
                    <div class="col-md-12">
                        <div class="browseImg">
                            <i></i>
                            <span>Uplolad Here</span>
                            <input type="file" class="browseField" name="image" id="c_image">
                        </div>
                        <!-- <div class="formControl static">
                                    <label for="" class="formLabel">Category Name</label>
                                    <input type="text" name="" class="formField" placeholder="Enter your name" id="">
                                </div> -->
                    </div>
                    <div class="col-md-4">
                        <div class="formControl static">
                            <label for="" class="formLabel">Category Name</label>
                            <input type="text" name="name" class="formField" placeholder="Enter your name" id="name">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="formControl static">
                            <label for="" class="formLabel">Category Status</label>
                            <select name="status" class="formField" id="status">
                                <option value="0">Inactive</option>
                                <option value="1">Active</option>

                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="formControl static">
                            <label for="" class="formLabel">Position</label>
                            <input type="text" name="position" class="formField" placeholder="Enter position" id="position">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="formControl static textarea">
                            <label for="" class="formLabel">Description</label>
                            <textarea class="formField" placeholder="Enter your description" rows="5" name="description" id="description"></textarea>
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <div class="btnBlock d-flex justify-content-end">
            <a href="#;" class="btn btn-link btn-md">Cancel</a>
            <button type="submit" class="btn btn-md">Add</button>
        </div>
    </form>

controller:

public function categoryAdd(Request $request)
    {


        return $data = $request->all();
        $rules = [
            'name' => 'required',
            'status' => 'required',
            'position' => 'required',
            'description' => 'required',
            // 'image'=>''
        ];
        $validator = Validator::make($data, $rules);
        if ($validator->fails()) {
            $errors = $validator->errors();
            $errors = json_decode($errors);
            return response()->json(['success' => false, 'error' => 1, 'message' => $errors], 422);
            //Toastr::error("All field required");
            //return redirect()->route('category.list');
        } else {
            $token = Session::get('auth_user')['token'];



            try {
                $url = $this->base_api_url . 'services/category/add/';
                if (isset($data['image'])) {
                    
                    return $apiResponse = Http::withHeaders([
                        'Authorization' => 'Token ' . $token
                    ])->post($url, [
                        'data' =>
                        [
                            'name' => $data['name'],
                            'status' => $data['status'],
                            'position' => $data['position'],
                            'description' => $data['description'],

                            'encrypted' => false
                        ],
                        'c_image' => $data['image'],
                        "encoded_data" => "yes",


                    ]);
                } else {
                    $apiResponse = Http::withHeaders([
                        'Authorization' => 'Token ' . $token
                    ])->post($url, [
                        'data' =>
                        [
                            'name' => $data['name'],
                            'status' => $data['status'],
                            'position' => $data['position'],
                            'description' => $data['description'],

                            'encrypted' => false
                        ],
                        "encoded_data" => "yes",


                    ]);
                }



                if ($apiResponse['status'] == false) {
                    $response['error'] = 1;
                    $response['success'] = false;
                    $response['message'] = $apiResponse['message'];

                    //Toastr::error('category add failed', 'Please Try Again');
                    return response()->json($response);
                } else {
                    $response['error'] = 0;
                    $response['success'] = true;
                    $response['message'] = $apiResponse['message'];
                    // session(['auth_user' => $apiResponse['data']]);
                    //Toastr::success('category added successfully');
                    return response()->json($response);
                }
            } catch (\Exception $ex) {
                $response['error'] = 1;
                $response['success'] = false;
                $response['message'] = $ex->getMessage();

                //Toastr::error('Please contact with support', 'Something Went Wrong');
                return response()->json($response);
            }
        }
    }

on start i'm returning data but its showing image object empty

ajax request:

$(document).ready(function () {
    var home = "{{route('category.list')}}";
    $(document).on('submit', '#category_add', function (e) {
        e.preventDefault();
         let add = "{{route('category.add')}}";
        var formData = new FormData(this);

        formData.append('c_image', $('#c_image')[0].files[0]);

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

            },
            type: "POST",
            url: add,

            contentType: false,
            processData: false,
            data: formData,
            dataType: "json",
            success: function (response) {
                console.log(response);
                if (response.success == true) {
                    toastr.success("category add successful");
                    setTimeout(function () {
                        //window.location.href = home;
                    }, 2000);
                } else {
                    toastr.error(response.message);
                    setTimeout(function () {
                        // window.location.reload();
                    }, 2000);
                }

            },
            error: function (response) {
                if (response.status == 422) {
                    toastr.error("All field required");
                }
                else {
                    toastr.error("Something went wrong");
                }
                setTimeout(function () {
                    //window.location.reload();
                }, 2000);
            }
        })
    });
});

i'm getting this data after form submit:

{}"_token":"pPHld3dWcEmkVQszMajQZYoqrOLfcm3PmCQzs3GE","name":"check","status":"0","position":"88","description":"test","image":{},"c_image":{}

but as i can see on request payload its showing the data:

Rahul Jat · Accepted Answer · 2021-08-27 12:08:39Z

1

I tried same code on my local and found these problems in your code..

In Javascript section, remove add variable from ajax request

    type: "POST",
    url: add, // Undefined variable error, I think correct variable  name is  home

In Your controller, In my knowledge,it is almost impossible to return requested image object, You will always get empty object.
If you want you can do this too to remove this line from your code because you always get same image with two object key

formData.append('c_image', $('#c_image')[0].files[0]);

In dd function you will get image object

$rules = [
    'name' => 'required',
    'status' => 'required',
    'position' => 'required',
    'description' => 'required',
    'image'=>'required|image|mimes:jpeg,png,jpg,gif,svg' //
];
$validator = \Validator::make($data, $rules);
if ($validator->fails()) {
    $errors = $validator->errors();
    $errors = json_decode($errors);
    return response()->json(['success' => false, 'error' => 1, 'message' => $errors], 422);
    //Toastr::error("All field required");
    //return redirect()->route('category.list');
} else {
    dd($data);
}

Hope this will help you, Thanks. #happycoding

answered Aug 27, 2021 at 12:08

Rahul Jat

7061 gold badge7 silver badges14 bronze badges

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

2 Comments

Nandan Over a year ago

i have updated the code add was variable for route but if i can't access image on controller so i need to hit api endpoint directly from ajax?

Rahul Jat Over a year ago

Bro.. You already have access on image in your controller

A.A Noman · Accepted Answer · 2021-09-04 08:31:47Z

1

You have to use like below

Your form should be like below

<form method="post" id="category_add" enctype="multipart/form-data">

Add an id in submit button

<button type="submit" class="btn btn-md">Add</button>



$(document).ready(function(){
$('#category_add').on('submit', function(event){
    event.preventDefault();
    $.ajax({
        url:'{{route('category.list')}}',
        method:"POST",
        data:new FormData(this),
        dataType:'JSON',
        contentType: false,
        cache: false,
        processData: false,
        success:function(data){

            // Rest of your code

        }
   })
 })
})

Follow this

edited Sep 4, 2021 at 8:31

answered Aug 27, 2021 at 11:01

A.A Noman

5,2669 gold badges28 silver badges49 bronze badges

2 Comments

Nandan Over a year ago

still return emtpy object

A.A Noman Over a year ago

Please carefully check you have to use enctype="multipart/form-data" and add an id submit button and then in your controller dd($request->all()) check first. My code works 100% it is proved

Collectives™ on Stack Overflow

formData return empty object on file upload ajax laravel

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related