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

satmaxt · Accepted Answer · 2019-10-19 03:57:18Z

3

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)
      })
}

edited Oct 19, 2019 at 3:57

answered Oct 19, 2019 at 3:40

satmaxt

785 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ajmal-Hossain Over a year ago

where should I add content type? within post request?

satmaxt Over a year ago

I was updated the code for adding headers in the configs parameters

Ajmal-Hossain Over a year ago

Your solution worked. but I used headers: { 'content-type': 'multipart/form-data' }

Ajmal-Hossain Over a year ago

Now how can I retrieve the image from database and show it in vue js end by sending from laravel end?

satmaxt Over a year ago

Please post as new question for that

|

Salim Djerbouh · Accepted Answer · 2019-10-19 03:50:06Z

1

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

edited Oct 19, 2019 at 3:50

answered Oct 19, 2019 at 3:24

Salim Djerbouh

11.1k6 gold badges35 silver badges65 bronze badges

5 Comments

Ajmal-Hossain Over a year ago

it returns Call to a member function getClientOriginalName() on null

Salim Djerbouh Over a year ago

That means you're not correctly posting an image file

Ajmal-Hossain Over a year ago

posting code is given above. Can you please check it?

Ajmal-Hossain Over a year ago

Successfully done by the solution of @satmaxtdev. Can you please tell me how can I retrieve the image from database and show it in vue js end by sending from laravel end?

Salim Djerbouh Over a year ago

Too long for comments, post a new question

Collectives™ on Stack Overflow

Image upload using vuejs and laravel through API is not working

2 Answers 2

7 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related