Image upload using vuejs and laravel through API is not working

Question

I am trying to upload image using vuejs and laravel through api. In vue.js I send the image info to laravel through api. but laravel do not get the info in correct format. that's why it shows an error. May be my procedure is not right.

Here is my codes

Vue.js codes

`

    <input type="file" accept="image/*" @change="doctorImageSelected(event)">
    <button style="float: left;" class="ajmal-custom-btn" @click="goToUploadImage()">Upload</button>

`

`

       doctorImageSelected (event) {
            let image = event.target.files[0]
            this.image = image
            // console.log(this.image)
            let reader = new FileReader();
            reader.readAsDataURL(image);
            reader.onload = event => {
                this.image = event.target.result

            }
        },
        goToUploadImage(){
            var self = this
            this.$http.post(apiDomain + 'api/savePatientProfilePicture',{pic: self.image,id: self.id})
                .then(response => {
                    if(response.status === 200){
                        console.log(response)
                    }
                }).catch((e) => {
                    console.log(e)
                })
        }

`

Laravel code

`

  public function savePatientProfilePicture(Request $request){
    $pictureInfo = $request->pic;
    $picName = $request->id . $pictureInfo->getClientOriginalName();
    return $picName;
    $folder = "patinetImage/";
    $pictureInfo->move($folder,$picName);
    $picUrl = $folder.$picName;
    $user = new User();
    $patientPic = User::find($request->id);
    $patientPic->image = $picUrl;
    $patientPic->save();
  }

`

Error

Call to a member function getClientOriginalName() on string

Answer 1

Make sure you have added Content-Type: application/x-www-form-urlencoded to the request header.

After that, try this code

goToUploadImage(){
  var formData = new FormData;
  formData.append("pic", this.image, this.name);
  formData.append("id", this.id);


  var self = this
  this.$http.post(apiDomain + 'api/savePatientProfilePicture',formData, {
          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
      })
      .then(response => {
          if(response.status === 200){
              console.log(response)
          }
      }).catch((e) => {
          console.log(e)
      })
}

Answer 2

If you want to get original name of the file, you need to call it on the UploadedFile object

$pictureInfo = $request->file('pic');
$picName = $request->id . $pictureInfo->getClientOriginalName();

You can simplify this by using ref and fetch api

<input type="file" accept="image/*" @change="doctorImageSelected()" ref="doctorImage" />
<button style="float: left;" class="ajmal-custom-btn" @click="goToUploadImage()">Upload</button>

And in Javascript

export default {
    data() {
        return {
            image: {},
            id: 1 // Your ID and rest of data here
        };
    },
    methods: {
        doctorImageSelected(event) {
            this.image = this.$refs.doctorImage.files[0];
        },
        goToUploadImage() {
            var fd = new FormData();
            fd.append("pic", this.image);
            fd.append("id", this.id);
            fetch(`${apiDomain}api/savePatientProfilePicture`, {
                headers: {
                    Accept: "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]')
                        .content
                },
                method: "POST",
                credentials: "same-origin",
                body: fd
            })
                .then(response => {
                    if (response.status === 200) {
                        console.log(response);
                    }
                })
                .catch(e => {
                    console.log(e);
                });
        }
    }
};

Hope this helps