I'm trying to include a logo when adding a new airline, but I don't know how can I pass input with file type to the controller with ajax. I tried to use FormData(). I did not get any error, but the file was not passed to the controller I have looked at some questions similar to my problem, but I can't find a solution.

<form action="javascript:void(0)" id="addEditBookForm" name="addEditBookForm"  method="POST" enctype="multipart/form-data">
              <input type="hidden" name="id" id="id">
              <div >
                <label for="name" >Name</label>
                <div >
                  <input type="text"  id="name" name="name" placeholder="Enter Airline Name" value="" maxlength="50" required="">
                </div>
              </div>  
              <div >
                <label for="name" >country</label>
                <div >
                  <input type="text"  id="country" name="country" placeholder="Enter Airline country" value="" maxlength="50" required="">
                </div>
              </div>
              <div >
                <label >Logo</label>
                <div >
                  <input type="file"  id="logo" name="logo" placeholder="Enter Airline Code" value="" required="">
                </div>
              </div>
              <div >
                <button type="submit"  id="btn-save" value="addNewBook">Save changes
                </button>
              </div>
            </form>

ajax:

  $('body').on('click', '#btn-save', function (event) {
      event.preventDefault()
          var id = $("#id").val();
          var name = $("#name").val();
          var country = $("#country").val();
          let logo = new FormData(document.getElementById("addEditBookForm"));
          $("#btn-save").html('Please Wait...');
          $("#btn-save"). attr("disabled", true);
         
        // ajax
       
        $.ajax({
            type:"POST",
            url: "{{ url('admin/add-update-Airlines') }}",
            data: {
              id:id,
              name:name,
              country:country,
              logo:logo,
            },
            contentType: false,
            processData:false,
            cache: false,
            dataType: 'json',
            success: function(res){
             window.location.reload();
            $("#btn-save").html('Submit');
            $("#btn-save"). attr("disabled", false);
            Swal.fire(
            'Good job!',
            'You clicked the button!',
            'success'
            )
           }
        
        });
      
    });

Controller:

 public function store(Request $request)
    {
        

        $newImgName = time() . '-' . $request->name . '.' .$request->logo->extension();
        $request->logo->move(public_path('img'),$newImgName);
        $Airline   =   Airline::updateOrCreate(
                    [
                        'id' => $request->id
                    ],
                    $request->validate([
                        'name' => ['required', 'string', 'max:255'],
                        'country' => ['required', 'string', 'max:255'],
                        'logo' => ['required|mimes:ipg,png,jpeg|max:5048'],            
                    ]),
                   
                    [
                        'name' => $request->name, 
                        'country' => $request->country,
                        'logo' => $newImgName,
                    ]);
    
                 return response()->json(['success' => true]);
    }

CodePudding user response：

First thing is csrf token not passing to ajax so change form as below.Also updated

<form action="{{ url('admin/add-update-Airlines') }}" id="addEditBookForm" name="addEditBookForm"  method="POST" enctype="multipart/form-data">
         @csrf
            <input type="hidden" name="id" id="id">
            <div >
                <label for="name" >Name</label>
                <div >
                    <input type="text"  id="name" name="name" placeholder="Enter Airline Name" value="" maxlength="50" required="">
                </div>
            </div>
            <div >
                <label for="name" >country</label>
                <div >
                    <input type="text"  id="country" name="country" placeholder="Enter Airline country" value="" maxlength="50" required="">
                </div>
            </div>
            <div >
                <label >Logo</label>
                <div >
                    <input type="file"  id="logo" name="logo" placeholder="Enter Airline Code" value="" required="">
                </div>
            </div>
            <div >
                <button type="submit"  id="btn-save" value="addNewBook">Save changes
                </button>
            </div>
        </form>

Then in ajax I have simplified for testing so you can modify according to your need

$(document).on('click', '#btn-save', function(e) {
            e.preventDefault()
            var url = $("#applicationForm").attr('action');
            let myForm = document.getElementById('addEditBookForm');
            let formData = new FormData(myForm);
            $.ajax({
                type:"POST",
                url:url,
                data: formData,
                contentType: false,
                processData:false,
                cache: false,
                dataType: 'json',
                success: function(res){

                }

            });

        });

Validation

public function store(Request $request)
{
        
   $request->validate([
            'name' => ['required', 'string', 'max:255'],
            'country' => ['required', 'string', 'max:255'],
            'logo' => ['required','mimes:ipg,png,jpeg','max:5048'],
        ]);
}