Vue.js with Laravel 8 API image upload throws 500 error

Question

Below is this code for the image upload path; this is my template upload code.

<div class="form-group">
    <div class="form-row">
        <div class="col-md-6">
            <input @change="onFileSelected" class="custom-file-input" type="file">
            <small class="text-danger" v-if="errors.photo"> {{errors.photo[0]}} </small>
            <label accept="image/*" class="custom-file-label" for="customFile" id="photo">Choose file</label>
        </div>
        <div class="col-md-6">
            <img :src="form.photo" style="height: 40px; width:40px;">
        </div>
    </div>
</div>

This is the click event's function; this is the data I want to pass to my API.

ata() {
    return {
      form:{
        name: null,
        email: null,
        address: null,
        salary: null,
        joining_date: null,
        nid: null,
        phone: null,
        photo: null
      },
      errors: {
        
      }
    }
  },
  methods: {
      
      onFileSelected(event){
        // console.log(event)
        let file  = event.target.files[0];
        if(file.size > 1048770) {
          //  Notification.image_validation()
          Toast.fire({
          icon: 'error',
          title: 'upload image less than 1MB'
          })
        }else {
           //console.log(form)
          let reader = new FileReader();
          reader.onload = event =>{
            this.form.photo = event.target.result
            console.log(event.target.result)
          };
            reader.readAsDataURL(file)
        }
      },

The following is the code I push my date to.

employeeinsert()
{
    console.log(this.form.photo)
    axios.post('/api/employee', this.form)
        .then(() => {
            // console.log(this.form)
            // this.$router.push({name: 'employee'})
            // Toast.fire({
            // icon: 'success',
            // title: 'employee add success'
            // })
        })
        .catch(error => this.errors = error.response.data.errors)
}

These are the Laravel 8 backend validations. Here I try to get the request image and name change and try to save my public folder.

if ($request->photo) {
    $position = strpos($request->photo, ';');
    $sub = substr($request->photo, 0, $position);
    $ext = explode('/', $sub)[1];

    $name = time() . "." . $ext;
    $img = Image::make($request->photo)->resize(240, 200);
    $upload_path = 'backend/employee';
    $inage_url = $upload_path . $name;
    $img->save($inage_url);

    return console . log($inage_url);

    Employee::insert([
        'name' => $request->name,
        'email' => $request->email,
        'address' => $request->address,
        'salary' => $request->salary,
        'joining_date' => $request->joining_date,
        'nid' => $request->nid,
        'phone' => $request->phone,
        'photo' => $last_image
    ]);

When I upload an image, I get a 500 error.

Here's the 500 error with any logs.

I have no idea why it throws 500. Please help to resolve this.

Answer 1

Few things which can cause 500 error as visible in your code are

1. return console.log($inage_url): console.log() is javascript not PHP

2. $inage_url = $upload_path.$name; it should be $inage_url = $upload_path.'/'.$name otherwise $img->save($inage_url); can cause error as path is not well formed

3. Not clear where the $last_image comes from in'photo' => $last_image