javascriptlaravelfilevue.jsasyncfileupload

how to upload the file in local public disk of laravel from vue js app?


hi there I want to upload the file into local public directory of laravel from vue js app and only send the unique name to mysql on form submission. but don't know how to do that with js

// template tag
<input type="file" @change="uploadFile" >


// methods on Vue Js app


methods: {
uploadFile(){
 // logic to upload the file in local public disk and only send the unique name to mysql 
}
}

Solution

  • I think you should still make an API for that. And upload it trough the api

    I have a code here, Maybe it can help. just add it in your laravel controller,.

    $user = User::find($request->user_id);
            if ($request->file('profile_image') !== null) {
                $imageProfile = $request->file('profile_image');
                $imageProfileSanitizedName = time() . $imageProfile->getClientOriginalName();
                $imageProfile->move("images/", $imageProfileSanitizedName);
                $user->image = $imageProfileSanitizedName;
            }
            $user->save();
    

    This function $imageProfile->move("images/", $imageProfileSanitizedName); will move to the public/images directory of your laravel project.

    i added time() function so that the image file will unique.

    dont forget to use formData in the axios in your vuejs method.