The main aspect of a KANBAN application is for managing tasks and tracking progress on those tasks. One way that file uploads can be incorporated into the project is by providing users the ability to add their own custom avatar. Laravel makes uploading files a streamlined process however there are several intermediary steps that need to be taken before uploading and serving files is possible.
Registering The Required Routes
Firstly the application needs new routes that point toward a controller that handles file uploads. This can be done by creating two new lines in the routes.php file. The first listens for post requests at /file-upload and the latter listens for put requests at /file-upload
Creating The Controller
Once this is done the FileUploadController class needs creating which can be accomplished with an artisan command. I have covered how to do this in a previous blog so I won't include the command.
In this applications users can only have one avatar, so the update route is created however I never needed to use it due to the fact that a users old avatar is deleted any time they upload one. All functionality for file upload can be handled by the controllers store method. Users are restricted to uploading png,jpg,bpm,jpeg and svg files. All other file types are disallowed and will be blocked.
I created a static method for the FileUpload model class that allows for the changing of a users avatar from one image to another, while dealing with the deletion of the old image as well. The method uses the Storage facade to delete the old image, but only if a user already has an uploaded image.
This method stores the new file and creates a new record in the database for it. If the user already has a custom avatar then the avatar file is deleted along with the old record in the database. A new record is created as well as storing the new file. If a user does not have a custom avatar already then the method will account for this as well. A user cannot upload a new avatar without deleting the old one.
Creating The Symbolic Link
By default the uploaded files are inaccessible via the web. To change this a symbolic link can be created in the public folder that points towards the location of the saved files.
Permissions
In order for the application to delete the old images I ran into filesystem permissions errors which I had to rectify using the bash command line. The necessary permissions can be changed using the following chmod command.
The File Upload Form
Below is the contents of the form that is responsible for sending the file to then application server. Notice the enctype='multipart/form-data' attribute on the form tag. This is one of the requirements for uploading files. Another is that the type on the input tag must be file so the user can select a file from their system. The end of the form tag contains a submit and a cancel button. The cancel button is listening for a click event that was assigned with JavaScript that closes the modal the form is encapsulated in.
Displaying The Uploaded File
When the controller is rendering the view that is to be served to the client the path used must be altered slightly. An example of a path stored in the database is shown below
avatars/PSkMYcojkfr8KBe2xDXCbQQRO92lwWhAsPVT2f6V.jpeg
Although the path an img tag needs to display this file is
storage/avatars/PSkMYcojkfr8KBe2xDXCbQQRO92lwWhAsPVT2f6V.jpeg
The additional directory name at the start of the path can be prepended in the controller with the following php code
The image can then be displayed in the view by wrapping the avatar variable in a url() blade directive.
Concluding Remarks
Throughout my implementation of file uploads I ran into some filesystem permissions errors. Modifying the storage directory's permissions was not a difficult process and I found that once this was done everything else was not difficult to implement. Laravels facades come with some helpful functions like Storage::delete. Retrieving the file from the HTTP request was far easier than expected because once again, Laravel has abstracted much of the implementation away from the developer because rewriting it would be a case repetition across developers.
It seems that Laravel has prebuilt functionality for many commonly used features that make adding them to any given project a fast process that does not require much configuration. When configuration is required the configuration files already exist, and in a modular fashion as well which makes it easy to find which configuration file you are looking for. While reading the documentation I learned that it is possible to use Amazons S3 storage and the framework already has drivers included for interacting and using this cloud storage system which is also impressive. This is something I will need to incorporate into future projects.
Comments
Post a Comment