Upload File, file path null, VueJs / Laravel

Question

I try to create a simple file upload with Vuejs and Laravel. But my 'file' variable it seems to be null on post.

<b-form-group label-for="file">
    <b-form-file
        v-model="file"
        id="file"
        :state="Boolean(file)">
        </b-form-file>
</b-form-group>

data() {
    return {
        file: null,
    },
}

and a method for post . (that works for the rest of the form)

addContract(newContract) {
    post("/contracts/" + `${this.customer_id}`, newContract)
        .then((response) => {
            //
        }
        .catch(error){
            //
        }
}

Controller

//code
    $fileName = time(). '.' .$request->$file->getClientOriginalExtention();
    $request->file->move(public_path('upload'), $fileName);
    dd($fileName);  
//code

UPDATE I set the axios header, but now I got error 422, when it was application I didn't but it still didn't work.

 headers: {
    'Content-Type': 'multipart/form-data'
 }

Yes you will have to add it, otherwise you won't be able to send files with the post request. See here — Remul
– Remul, Commented Feb 5, 2020 at 12:51
I added to the from tag, also I tried like in this example. still, I got null value. — Beusebiu
– Beusebiu, Commented Feb 5, 2020 at 12:58
I don't know what your post() method does but you probably have to set the multipart/form-data as the header in your post() method. — Remul
– Remul, Commented Feb 5, 2020 at 13:10

Troy Morehouse · Accepted Answer · 2020-02-05 22:32:52Z

1

In order for the file to upload via native browser submit, you must provide a name for the file input (along with adding enctype="multipart/form-data" to the enclosing <form> element).

<b-form-file
  v-model="file"
  id="file"
  name="file"
  :state="Boolean(file)">
</b-form-file>

This is the same requirement for any form <input>, <select>, or <textarea> control.

answered Feb 5, 2020 at 22:32

Troy Morehouse

5,4451 gold badge30 silver badges40 bronze badges

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

1 Comment

Beusebiu Over a year ago

Same output. before put request in console log I got "file: ..." , but in the request "file: {}", and with 'Content-Type': 'multipart/form-data' , I got 422, for validation, but with application pass validation(that is correct, for the rest of the input.)

Collectives™ on Stack Overflow

Upload File, file path null, VueJs / Laravel

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related