Laravel uploading file using vue3

Question

i am trying to upload file in Laravel storage folder using vue3 composition API. i have added code but file is not being uploaded.

routes are correct, only null value is being added in mysql.

i have 3 columns in mysql database.

id | file_name | file_path

html

 <input    ref="file" v-on:change="handleFileUpload()"  type="file" />

 <button @click="senddata" class="">UPLOAD</button>

Vue function:

<script>
import axios from "axios";
import { defineComponent,ref } from 'vue'
export default defineComponent({
  setup() {

      const file = ref(null)
     const handleFileUpload = async() => {
           // debugger;
            console.log("selected file",file.value.files)
            //Upload to server
        }


function senddata() {
    
     axios.post('http://127.0.0.1:8000/api/store-files',{
     file:this.file,
     
      }).then(response=>{
      message=response.data.message; 
      alert(message);

      });
}

    return {
        senddata,
        handleFileUpload,
        file
    };
}
})
</script>

Laravel Store Controller:

 public function store(Request $request)
    {
 $file=new Files();
  if($request->file()) {
            $file=new Files();
             $file_name = time().'_'.$request->file->getClientOriginalName();
             $file_path = $request->file('file_link')->storeAs('uploads', $file_name, 'public');
 
             $file->file_name = time().'_'.$request->file->getClientOriginalName();
             $file->file_path = '/storage/' . $file_path;
             $file->save();
             return response()->json([
                'message' => 'File  added'
            ]);
        }
}

Kamlesh Paul · Accepted Answer · 2021-12-07 06:31:30Z

3

you cannot send file in json, you need to send via FormData

you need to write code like

html

 <input    ref="file" v-on:change="handleFileUpload"  type="file" />

 <button @click="senddata" class="">UPLOAD</button>

Vue function


handleFileUpload() {
   const file = ref(null)
   this.file = file.value.files;
}


function senddata() {
    
   let formData = new FormData();
   formData.append('file',file)

     axios.post('http://127.0.0.1:8000/api/store-files',formData).then(response=>{
      message=response.data.message; 
      alert(message);

      });
}

ref link https://developer.mozilla.org/en-US/docs/Web/API/FormData

edited Dec 7, 2021 at 6:31

answered Dec 7, 2021 at 6:04

Kamlesh Paul

12.5k2 gold badges23 silver badges36 bronze badges

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

8 Comments

Fayakon Over a year ago

Thankoyu, i need to add <form> in html as well?, i hope nothing is wrong with laravel controller.

Kamlesh Paul Over a year ago

no need only new FromData in javascript

Fayakon Over a year ago

error: Cannot read properties of undefined (reading 'target')

Kamlesh Paul Over a year ago

v-on:change="handleFileUpload" here i remove () please check that

Fayakon Over a year ago

under vue code, error is showing with handleFileUpload(e) { ,"expected semi colon after (e)" if i add semi colon after (e); it says e is not defined.

|

Collectives™ on Stack Overflow

Laravel uploading file using vue3

1 Answer 1

html

Vue function

8 Comments

Your Answer

Collectives™ on Stack Overflow

Laravel uploading file using vue3

1 Answer 1

html

Vue function

8 Comments

Your Answer

Sign up or log in

Post as a guest