0

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:

enter image description here

Nandan
  • 404
  • 2
  • 6
  • 15

2 Answers2

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

A.A Noman
  • 5,244
  • 9
  • 24
  • 46
  • 1
    still return emtpy object – Nandan Aug 27 '21 at 11:17
  • 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 – A.A Noman Aug 27 '21 at 11:25
1

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

  1. In Javascript section, remove add variable from ajax request

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

  2. In Your controller, In my knowledge,it is almost impossible to return requested image object, You will always get empty object.

  3. 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]);

  4. 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

Rahul Jat
  • 656
  • 1
  • 7
  • 14
  • 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? – Nandan Aug 27 '21 at 12:21
  • Bro.. You already have access on image in your controller – Rahul Jat Aug 28 '21 at 03:04