How we developed a user-friendly VueJS filegrid component for uploading multiple files

Geschreven door Joachim op 30/01/2018

For a customer project we are creating a web application with high-load and interaction-heavy pages. To optimize the user friendliness of the application, we needed to find an answer on several technical challenges:

  • Creating reusable components
  • Fix the performance problem of frozen browsers
  • Make the code behind the application more accessible

A better UI design solution for uploading multiple files

Users of the web application should be able to upload multiple files on different parts, meaning that multiple standard HTML file uploads wouldn't cut the mustard. We had to look for a better UI design solution and developed a data grid that automatically provides column sorting, searching and paging.

By making uploaded files visible in the data grid, without refreshing the page, we managed to create a dynamic user interface that's easy and dynamic to use.

Our filegrid-component in action:

Built on Laravel (with help of Spatie)

We built the web application on the Laravel framework and integrated Spatie's popular media library package to make it possible to handle different types of media files.

On the front-end we used Vue.js and Element upload component for multiple files uploading.

Vue.js file grid component

Let me show you how our files will be assigned to a Post Model. We created a new FileGrid.vue component and an UploadDrop.vue component that are used inside the FileGrid.vue component. Look at how our FileGrid component looks like:

Axios is sending a GET request to the server to fetch all files when te vue instance is mounted.

The data returned from the server will be displayed in a html table using the table component. We can display data with similar format and sort or filter the data smoothly in a table.

Upload drop

Within our FileGrid component we import UploadDrop.vue. Multiple upload files can be uploaded by selecting or dropping them in the dropzone. When uploading a new file or multiple files, a POST request is sent to the server via Axios. By using Spatie's Media Library package, requests are easily associated with a model. Find more information on the docs site. After every upload, a new row will be added to our data table.

Routes file

In our routes/web.php file we register 2 new web routes:

1. The Controller file

2. Laravel API resources

To ensure all our data returned from the server, is transformed as JSON, we use Laravel API resources.

Simply put, if we have a Media model, we can use the api resource to:

  • Manipulate the data
  • Remove certain fields from the model
  • Before sending that in our response back to the file grid

In our FilesController index method we catch the request, load the Post model and all files assigned to it. We return a resource collection for a representation of all the media items.

With our data, and methods finished, we can now put the component to good use in our template.

Any thoughts or feedback on our Filegrid component? Let us know in the comment section!

Geschreven door
Joachim Vanthuyne

Back-end-developer. Verzorgt de interactie tussen websites en mensen.

Plaats een reactie

Reageer op dit artikel

Wordt niet weergegeven op de website.