skip to Main Content

So I have Laravel project and I use Ajax for CRUD.
This is my Controller:

/**
     * Store a newly created resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    public function store(Request $request)
    {
        $rules = array(
            'naziv' => 'required|max:90|unique:restaurants',
            'adresa' => 'required|max:150',
            'min_dostava' => 'required|max:5',
            'vrijeme_dostave' => 'required|max:10',
            'cijena_dostave' => 'required|max:5',
            'podrucije_grada' => 'required',
            'br_telefona' => 'required|numeric|unique:restaurants',
            'kuhinja_id' => 'required',
            'user_id' => 'required',
            'lokacija' => 'max:999',
        );

        $error = Validator::make($request->all(), $rules);

        if($error->fails())
        {
            return response()->json(['errors' => $error->errors()->all()]);
        }

        // logo
        $logo = $request->file('logo');
        $filename = $logo->getClientOriginalName();

        //Fullsize
        $logo->move(public_path().'/uploads/',$filename);

        $image_resize = Image::make(public_path().'/uploads/'.$filename);
        $image_resize->fit(800, 600);
        $image_resize->save(public_path('uploads/'.$filename));
        // logo finish

        $restaurant = Restaurant::updateOrCreate(['id' => $request->restaurant_id],
            [
                'naziv' => $request->naziv, 
                'adresa' => $request->adresa,
                'min_dostava' => $request->min_dostava,
                'vrijeme_dostave' => $request->vrijeme_dostave,
                'cijena_dostave' => $request->cijena_dostave,
                'podrucije_grada' => $request->podrucije_grada,
                'br_telefona' => $request->br_telefona,
                'kuhinja_id' => $request->kuhinja_id,
                'user_id' => $request->user_id,
                'lokacija' => $request->lokacija,
                'logo' => $filename
            ]);
        
        $restaurant->save();

        if($restaurant->wasChanged()){
            return response()->json(['success'=>'Uspjesno ste izmijenili restoran.']);
        }
   
        return response()->json(['success'=>'Uspjesno ste dodali novi restoran.']);
    }

And a part of form where is file input in my blade:

<div class="form-group">
   <label for="exampleFormControlFile1" class="form-control-sm">Logorestorana</label>
   <input type="file" class="form-control-file" id="logo" name="logo" value="">
</div>

And my jquery script:

<script type="text/javascript">
    $(function () {
       
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
      });
      
      var table = $('#dataTable').DataTable({
          processing: true,
          serverSide: true,
          ajax: "{{ route('admin.restaurants.index') }}",
          columns: [
              {data: 'id', name: 'id'},
              {data: 'logo', name: 'logo'},
              {data: 'naziv', name: 'naziv'},
              {data: 'adresa', name: 'adresa'},
              {data: 'min_dostava', name: 'min_dostava'},
              {data: 'vrijeme_dostave', name: 'vrijeme_dostave'},
              {data: 'cijena_dostave', name: 'cijena_dostave'},
              {data: 'podrucije_grada', name: 'podrucije_grada'},
              {data: 'br_telefona', name: 'br_telefona'},
              {data: 'kuhinja_id', name: 'kuhinja_id'},
              {data: 'user_id', name: 'user_id'},
              {data: 'lokacija', name: 'lokacija'},
              {data: 'action', name: 'action', orderable: false, searchable: false},
          ]
      });
       
      $('#createNewProduct').click(function () {
          $('#saveBtn').val("create-product");
          $('#restaurant_id').val('');
          $('#productForm').trigger("reset");
          $('#modelHeading').html("Create New Product");
          $('#ajaxModel').modal('show');
      });
      
      $('body').on('click', '.editProduct', function () {
        var restaurant_id = $(this).data('id');
        $.get("{{ route('admin.restaurants.index') }}" +'/' + restaurant_id +'/edit', function (data) {
            $('#modelHeading').html("Edit Product");
            $('#saveBtn').val("edit-user");
            $('#ajaxModel').modal('show');
            $('#restaurant_id').val(data.id);
            $('#naziv').val(data.naziv);
            $('#adresa').val(data.adresa);
            $('#min_dostava').val(data.min_dostava);
            $('#vrijeme_dostave').val(data.vrijeme_dostave);
            $('#cijena_dostave').val(data.cijena_dostave);
            $('#podrucije_grada').val(data.podrucije_grada);
            $('#br_telefona').val(data.br_telefona);
            $('#kuhinja_id').val(data.kuhinja_id);
            $('#br_telefona').val(data.br_telefona);
            $('#lokacija').val(data.lokacija);
            $('#logo').val(data.logo);
        })
     });
      
      $('#saveBtn').click(function (e) {
          e.preventDefault();
          $(this).html('+ Novi restoran');
      
          $.ajax({
            data: $('#productForm').serialize(),
            url: "{{ route('admin.restaurants.store') }}",
            type: "POST",
            dataType: 'json',
            success: function (data) {
                var html = '';
                if(data.errors)
                {
                html = '<div class="alert alert-danger">';
                for(var count = 0; count < data.errors.length; count++)
                {
                html += '<p>' + data.errors[count] + '</p>';
                }
                html += '</div>';
                }
                if(data.success)
                {
                html = '<div class="alert alert-success alert-dismissible fade show" role="alert"><strong><i class="fas fa-check-circle"></i>&nbsp;&nbsp;&nbsp;' + data.success + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>';
                $('#productForm').trigger("reset");
                $('#ajaxModel').modal('hide');
                table.draw();
                }
                $('#form_result').html(html);
            }
        });
      });
      
      $('body').on('click', '.deleteProduct', function () {
       
          var restaurant_id = $(this).data("id");
          confirm("Are You sure want to delete !");
        
          $.ajax({
              type: "DELETE",
              url: "{{ route('admin.restaurants.store') }}"+'/'+restaurant_id,
              success: function (data) {
                  table.draw();
                  html = '<div class="alert alert-danger alert-dismissible fade show" role="alert"><strong><i class="fas fa-trash"></i>&nbsp;&nbsp;&nbsp;' + data.success + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>';
                    $('#form_result').html(html);
              },
              error: function (data) {
                  console.log('Error:', data);
              }
          });
      });
       
    });
</script>

ISSUE

I’m keep getting same issue in my Network console and it is

Call to a member function getClientOriginalName() on null

What I’m doing wrong here?

I also included @crsf in form and enctype="multipart/form-data".
And I’m also using Laravel Intervention Image.

Please help.

2

Answers


  1. You can not pass enctype and mimetype in ajax function. Please try this

    $.ajax({
                    data: $('#productForm').serialize(),
                    url: "{{ route('admin.restaurants.store') }}",
                    type: "POST",
                    dataType: 'json',
                    enctype: 'multipart/form-data',
                    mimeType: 'multipart/form-data',
                    success: function (data) {
                        var html = '';
                        if(data.errors)
                    
    
        {
                    html = '<div class="alert alert-danger">';
                    for(var count = 0; count < data.errors.length; count++)
                    {
                    html += '<p>' + data.errors[count] + '</p>';
                    }
                    html += '</div>';
                    }
                    if(data.success)
                    {
                    html = '<div class="alert alert-success alert-dismissible fade show" role="alert"><strong><i class="fas fa-check-circle"></i>&nbsp;&nbsp;&nbsp;' + data.success + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>';
                    $('#productForm').trigger("reset");
                    $('#ajaxModel').modal('hide');
                    table.draw();
                    }
                    $('#form_result').html(html);
                }
            });
    
    Login or Signup to reply.
  2. The error message means that ‘logo’ is not in the request.
    When you try to get it with

    $logo = $request->file('logo');
    

    it is probably null. When you then try to get the filename

    $filename = $logo->getClientOriginalName();
    

    it fails because $logo=null.

    Try to use

    dd($request->input());
    

    to see what is actually in the request. Or you can log it with

    Log::info("Request data = ", ['request' => $request->input()])
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search