How To Upload File On Laravel Vue - FreeCodeBlog

You need to read upload a file on laravel 8 vue 2 tutorial If you want to know how we can upload a image file in laravel 8 with vue 3. so guys, let's start to make upload a file on laravel vue project.

1. Laravel To Upload File On Laravel Vue.

First you need to have a installed laravel to upload file on laravel vue. so if you haven't installed laravel or don't know to install laravel then read how to install any kind of laravel version tutorial.

2. Laravel Storage To Upload File On Laravel Vue.

Public: You can upload file on laravel public folder but I don't recommend you to use public folder to upload file.

Storage: I will recommend you to use laravel storage (public disk) folder to file uploading if you don't use to AWS storage. Change filesystem easily from config filesystem.

'default' => env('FILESYSTEM_DRIVER', 'local'),

3. Laravel View & Controller & Route To Upload File On Laravel Vue.

You need to create a web controller to upload file on laravel vue. If you don't know how to create and use laravel view, controller and route then read all about laravel view controller and route tutorial before continue upload file on laravel vue tutorial.

/*
| Web Controller
*/
php artisan make:controller FileController

Next you need to define File Upload controller in web route to upload file on laravel vue. Now you need to create get and post web route to upload file on laravel vue.

/*
| Web Route
*/
use App\Http\Controllers\FileController;
Route::get('/file-upload', [FileController::class, 'file-upload'])->name("file.upload");
Route::post('/upload-file', [FileController::class, 'upload-file'])->name("upload.file");

Next you need to create get and post method for web controller to upload file on laravel vue.

/*
| Web Controller Get method
*/
public function file_upload()
{
  return view('file_upload');
}
/*
| Web Controller Post method
*/
    public function upload_file(Request $request)
    {
   $file= $request->file('file');
        if (isset($file))
        {
           $file_name = rand(111111111,999999999).'.'.$file->getClientOriginalExtension();
            if (!file_exists(storage_path('app/public/file')))
            {
                Storage::makeDirectory('public/file');
            }
            $file->move(storage_path('app/public/file'),$file_name);
        }else{
            $file_name = null;
        }

      $file= File::create([
            'title' => $request->title,
            'file' => $file,
        ]);
    }

4. laravel Model To Upload File On Laravel Vue.

You need to create a model to upload file on laravel vue.

php artisan make:model File
/*
| File Model
*/
protected $fillable = [
'title',
'file',
];

5. laravel Migration To Upload File On Laravel Vue.

You need to create a database migration to upload file on laravel vue.

php artisan make:migration create_files_table
/*
| Migration File
*/
public function up()
{
Schema::create('files', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('file');        
$table->timestamps();
});
}

6. Vue To Upload File On Laravel.

You need to have installed vue on laravel project. you can install vue js via custom or with user authentication. install any kind of laravel user authentication with vue js.

Thanks