File Download and Upload in Laravel/ Vue.JS

How to upload multiple files and how to download them in Laravel

File handling is a function that we are mainly using in our systems. When you are developing a website using Laravel these are the step you want to follow for upload and download files in storage. Here I use Vue.js for frontend and inertia.js as the page builder. But it can be changed in your own way. So the most important part that happens is in the Laravel controller, That is how we upload files into the local storage and how to download from it. Let’s discuss the following topics which are more important to you.

Multiple File input in Vuejs

When you input a file or multiple files, here is the way you can handle them at the front end.

<jet-input type="file"
class="mt-1 block w-full"
      placeholder="Add Files"
      ref="file" @change="push($event)" multiple="multiple"/>

The push(event) method pushes each file into the file[] array. This array is a property of our form.

push(event) {
   this.form.file = [];
   this.filesizeerror = [];
   for (let file of event.target.files) {
      try {
         this.form.file.push(file);
         }
      } catch {
         console.log(`pushing files failed`);
      }
   }
},

Multiple File upload to local storage in Laravel

When the form is submitted through the form request, the file array has sent to the controller. Before we store them into the storage we create a specific directory to store our files. here I create the ‘myfiles’ disk inside the storage. For that, you want to add this code inside the config/file_systems.php.

'myfiles' => [
'driver' => 'local',
'root'   => storage_path().'/myfiles',
],

Inside the controller, the following code block will run and store each file in the local storage. Here we input multiple files. so we need to use a for each loop.

if ($request->hasFile('file')) {
   $files = $request->file('file');
   foreach ($files as $file) {
      $file_name = $file->getClientOriginalName();
      $fileName = pathinfo($file_name, PATHINFO_FILENAME);
      $date = date('Y-m-d');
      try {
         $path = Storage::disk('myfiles')->PutFileAs($date, $file, time() . $file->getClientOriginalName());
      } catch (\Exception $e) {
         $msg = "error-msg";
         return redirect()->route("form.index");
      }
   // Here you need to save the file url in the database for future use(delete/ download)
   }
}

Download files from local storage in Laravel

Now we going to see how we download a file from local storage in Laravel. It is easy to implement. Here you want the exact URL to the file that earlier we uploaded.

public function downloadFiles(Request $request)
      {
      return Storage::disk('myfiles')->download($request->input('file_path_url'));
      }

This is the only thing you need to do is, implement a route using this method name and call it. Cool !!!

Finally

I hope you have got the knowledge that how to implement upload and download functions in Laravel. Please feel free to ask any question you will face in the response section below.
Happy Coding !!!!
Found this post useful? Kindly tap the 👏 button below! :)