Can't upload and store images in local storage and in database (Php Laravel)-CodePudding

So im building my own website and i have this feature wherein a logged-in user can upload and change his avatar. it is my first time doing this so i am having a hard time making this work. i'll provide the codes below, you guys might see the faults that i dont know. it will be greatly appreciated if you can provide links that will help me improve. thanks in advance!

Blade.php file

<form method='POST' action="{{ route('image-upload')  }}" enctype="multipart/form-data">
   @csrf
     <div  style="padding-top:5%">>
      <div >
       <div >
        <div  >
          <h4 ><strong> Attach your picture </strong></h4>
            <div >
              <div >
               <div >
               <label for="step5_picture" >Please upload your photo here:</label>
               <div >
               <input  type="file" value="" id='upload_picture'  >
             </div>
            </div>
           </div>
          </div>
                
       <a href="/home"   id="btn-next"  style="float:right;">Next</a>
      <button  id="btn-upload"  style="float:right; margin-right:10px;">Upload</button>
                </div>
            </div>
        </div>
    </div>
    </form>

Ajax code

$("#btn-upload").click(function(e){
    e.preventDefault();
    var data = {
        'photo_filename': $('#upload_picture').val(),
        }

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

  
    $.ajax({
        type: "POST",
        url: "/image-upload",
        data: data,
        dataType: "json",
        success: function (response) { 
        }
        }); 
   });

});

Controller.php file The name of the column in my database is also photo_filename

    public function image-upload(Request $request,){
    $data = UserInfoModel::where('app_id', '=' ,Session::get('loginId'))->first();
    $validator=Validator::make($request->all(), [
        'photo_filename' => 'required',
        'photo_filename.*' => 'image|mimes:jpeg,png,jpg,svg|max:5000'
        ]);
        if($request->hasfile('photo_filename')){
            $data->update([
            'photo_filename' => $request->input('photo_filename')
          ]);
            $photo = $request->file('photo_filename')->getClientOrginalName();
            $destination = public_path() . '/public/image';
            $request->file('photo_filename')->move($destination, $photo);
            return back()->with('success', 'Your image has been successfully uploaded!');
        }   
}

Web.php file

Route::post('/image-upload',[CustomAuthController::class, 'image-upload'])->name('image-upload');

I am getting a payload and here it is

No error but still not uploading

CodePudding user response：

Here's a minimal working example to create file upload in Laravel:

blade file:

<form method="POST" enctype="multipart/form-data" action="{{ route('save') }}">
    @csrf
    <input type="file" name="image" placeholder="Choose image" id="image">
    <button>Send</button>
</form>

Controller:

public function save(Request $request) {
    $path = $request->file('image')->store('public/images');
    return $path;
}

web.php:

Route::post('/foobar', [\App\Http\Controllers\FoobarController::class, 'save'])->name('save');

Please note Ajax call is not necessary here, since html form will do the POST call with the CSRF token.

Also please note that using hyphens in function names won't work in php.

CodePudding user response：

use FormData to send file in form, and add contentType: false and processData: false, you can read function setting contentType and processData in here https://api.jquery.com/jquery.ajax/

var formData = new FormData();
formData.append('photo_filename', $('#upload_picture')[0].files[0])
$.ajax({
  url: "/image-upload",
  type: "post",
  data: formData,
  dataType: 'json',
  contentType: false,
  processData: false,
  success: function(response) {
      
  }
});