Upload File with BootstrapVue in Laravel

anyone knows how to submit file with bootstrapVue file input?
I am getting null from request->all()

array:13 [
 ...
  "calibration_cert" => array:1 [
    "$path" => null
  ]
]

Below is what I tried
            <b-form-group label="Calibration Cert:">
                <b-form-file
                    v-model="form.calibration_cert"
                    :state="Boolean(form.calibration_cert)"
                    placeholder="Choose a file or drop it here..."
                    drop-placeholder="Drop file here..."
                ></b-form-file>
            </b-form-group>
.....
      methods:{
        onSubmit(event) {
            event.preventDefault();
            axios
                .post("/equipments/create", this.form, {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                })
                .then(response => {
                    console.log(response);
                })
            };
        },

Appreciate if anyone can help

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Your lucky day, I’m just working on this.

  • You have to use formData() object for submitting files from Axios.
  • If your Laravel route uses a patch method, you have to use axios.post() instead of axios.patch() and append the _method: PATCH in your formData

Saying that, this is how I do it:

component.vue

<b-form-file
    v-model="form.calibration_cert"
    :state="Boolean(form.calibration_cert)"
    placeholder="Choose a file or drop it here..."
    drop-placeholder="Drop file here..."
></b-form-file>

.....

methods:{
  onSubmit(event) {
      event.preventDefault();
      
      // Set formData
      const formData = new FormData()
      // Append the method only if you are using a patch route in your server side
      formData.append('_method', 'PATCH')
      // Append the file
      formData.append('calibration_cert', this.form.calibration_cert)
      // Append the rest of your form data
      formData.append('data1', this.form.data1)
      formData.append('data2', this.form.data2)
      .....

      axios
         .post("/equipments/create", formData, {
              headers: {
                  "Content-Type": "multipart/form-data"
              }
          })
          .then(response => {
              console.log(response);
          })
      };
},

Then in your Laravel side, you can do
$path = $request->file('calibration_cert')->store('files');

Method 2

You need to send the files as a object in axios request, use below example to understand what you should do.

const app = new Vue({
    data: () => ({images: null}),
    template: `
      <div>
        <input type="file" @change="uploadFile" ref="file">
        <button @click="submitFile">Upload!</button>
      </div>
    `,
    methods: {
      uploadFile() {
        this.Images = this.$refs.file.files[0];
      },
      submitFile() {
        const formData = new FormData();
        formData.append('file', this.Images);
        const headers = { 'Content-Type': 'multipart/form-data' };
        axios.post('https://httpbin.org/post', formData, { headers }).then((res) => {
          res.data.files; // binary representation of the file
          res.status; // HTTP status
        });
      }
    }
  });

app.$mount("#content");


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x