CODEWITHSUNDEEP
laravelvue.jsvue-componentlaravel-8vuejs3
Fayakon
Fayakon

Reputation: 1523

Laravel uploading file using vue3

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'
            ]);
        }
}

Upvotes: 1

Views: 2621

Answers (1)

Kamlesh Paul
Kamlesh Paul

Reputation: 12391

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

Upvotes: 3

Related Questions