How To Upload File On Laravel Vue - FreeCodeBlog

Last updated: Nov 13, 2021

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.

 

How To Upload File On Laravel Vue
How To Upload File On Laravel Vue

 

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

Post Tags
Post Writer
masum7323
Masum Biswas (@masum7323)

My name is Masum Biswas. I'm a full stack developer. I live in Bangladesh and I love to write tutorials and tools that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, MySQL, VueJS, Tailwind CSS and Bootstrap from the early stage.

Follow Me On
Related Posts
Laravel Ui Package Setup In Laravel 8 With Vue 3

Want to use vue 3 in laravel ui? Laravel ui is a first party user authentication package and you can easily use it with laravel 8 and vue 3. So let... Read More

Best Cloud Hosting For Laravel Project

Laravel is a widely used and easy open source PHP framework which is used to create complex and simple web applications. It is based on a architect... Read More

How To Hash Password In Laravel

In fact, every Laravel user authentication uses Laravel hash passwords by default. Want to know how a hash password works in Laravel? Yes! Okay In... Read More

Create Passwordless Login Options With Laravel Jetstream

Sometimes you may need to create passwordless login Option into your laravel website with laravel jetstream. In this tutorial I will show you how w... Read More

Laravel Ui Email Verification Complete Tutorial

Want to make laravel ui vue, react, bootstrap email verification using laravel ui version 3, 2, 1? Laravel ui has a feature for users to verify ema... Read More