File Upload in Laravel: Main Things You Need To Know

hello guys file upload has been historically one of the most popular topics of questions on forums and Twitter and elsewhere because there are multiple ways to store files name files different syntax options what are Diss and drivers it's pretty confusing to especially beginner developers so I decided to shoot this video to show step by step the main things that you need to know about file upload with example of two files you see down below so public file of Avatar which is an image and then CV which should be private and protected from the public so in this video I will show you how to upload those where are they stored how to configure subfolders or discs or drivers what to do if you don't have access to the server to run PHP Artis and storage link then the number one package I would recommend to use for laral file uploads and more small details so let's dive in the first thing I want to show you is generally how to upload those files and I will show you two syntax ways so if we register with form filler CR extension and upload a few files in this case both will be images but generally CV should be probably a PDF but that doesn't matter in this case so in the controller of registration store method which is larel Breeze you need to make a few changes first validate those files both and in our case Avatar is image and CV generally just a file and then these two lines these two blocks are the most important so first if we have the file because it's optional if request has file and this is by the way different from request has has file is a separate method so if we have the file Avatar we can upload it by one of two options first storage disk and provide the dis name and we will get to that in a minute and put that file from request file Avatar another alternative example of the syntax is request file store and then the same options public is the same as dis public this one is a shorter way so I generally prefer that one but that's a personal preference and then for the CV the same thing request file store or storage disk local now what's that public and local all the configuration for so-called diss in larl happens in a file config file systems PHP and this is the default state of that I didn't change anything here so by default local is one of the Diss and then you provide the disk names wherever you use them for upload or download anywhere and disk is defined Ed by what driver is used in this case it's local which means a local file system the same server hard drive and then the most important part is to specify the rout where that file it is saved in this case storage path which means storage folder in the larl project and then app and that folder is not accessible from the browser this is very important and that's why we store CV in the local disk because it shouldn't be accessible in public it's a personal data right in comparison to to Avatar which should be public and for that there's a public dis also with driver local but with different root storage app public and this folder is accessible in public with that URL SL storage points to storage app public if you run Artisan command PHP Artisan storage link it creates so-called Sim link on the file system level so points one folder to another folder and then you can configure more discs with the same driver or with another driver and we will get to that later in this video so there's driver Amazon S3 so as a result of all of that we upload those files we register and in the database we have a new user I refresh so the first one was created earlier in my testing and then we have two file names Avatar and CV here in the database and important where they are saved in the file system with the driver local storage app and then those two file names from two users so those are CVS and then storage app public contains also two files with encoded file names and again we'll get to that but this is accessible via browser and this is our next subtopic how to get that file visible for example on dashboard here in the navigation I've showed that image twice because again there are two ways to show that from the syntax point of view in the blade file I have two image sources so one way to access that is again storage facade and then you have storage URL providing that file name so this is the file name something something. PNG or JPEG and then storage URL builds the URL for that or another case if you use public folder or storage app public you can access that with just doing asset so asset is a shortcut to public folder and the actual URL of that if we right click and do open image in the new tab this is the URL so your domain name/ storage and slash all the file name as it is saved in the database next the private file the CV how can you access that of course it's not public but what if you want to download your own document like CV or something else like this so you would have a link download CV and then the server would take care of the security permissions and whether you're able to download and then it would allow you to download the file so for example if I click download CV now I would download the file in this case PNG so how to implement that for that you would need to implement your own route with controller probably that would take care of all the permissions as I said and then return the download as a response so here's the code in the blade you have a route download CV it could have parameters probably which file to download in this case I simplified all of that and then in the routes web we have this route to the controller with middleware o at least probably it should be and with the route name and then in the controller in this case it's invocable controller with just one method single action controller it is also called in here you will probably add some if statement of some check for which file to download and then the return should be again storage dis from local disk not from public and then you return the download and this is the file name then as you saw the browser would automatically download the file so it's not publicly visible with the URL but it is possible to return that as a file from the server in laral controller or routes the next topic is the file name so those long encoded names. PNG or PDF or whatever how can we overwrite those and technically it is unsafe to overwrite or in other words larl does that for a reason to encode the file names because if you fully trust the file names from the browser from your client they may be overwritten on the front end with malicious intent in laral documentation you may find something like this so get client original name and original EXT extension are available as methods but they are considered unsafe so a bit safer way is to get an extension from request file but then still generate a random name just with your different logic so it shouldn't be image.png or avatar.png it still should be somehow uncoded but if you want to for example for CV if you want to get that file downloaded with some kind of file name you can generate that file name on the Fly based on current date for example example or some kind of other logic and this is the code to change that logic of laral default encoding into something else you still get the extension from request file Avatar extension and I've put that into a separate variable because it is repeated a few times so here and then extension but then the file name is uuid and then do extension so now if we try to register this is the result and in the file name we have another Avatar name file name with your uid still inod CED but in a different way the next topic is subfolders what if you have different types of files and you want to for example save avatars in its own folder but save some other images in another subfolder of storage app public and then avatars the most straightforward way is to provide the path here which is by default just slash but you can provide avatars here like this and then what happens the registration is still successful but the file is saved in a different location so storage app public and then avatars here interestingly then the file name returned from here contains the folder then so then I didn't show you but we Sav those files as eloquent model field names and then in the database if we refresh we have something like this so avatars become part of the database column value which may or may not be your preference that's also one of the options as I'm showing in this video in general there are a lot of options of how you you store the files where you store them and how you access them but then in the blade for example in the navigation blade we don't need to change anything just storage URL becomes the file name including the folder from the database but if you don't want to specify that subfolder each time you access that file somewhere you may Define a separate disk for avatars so in the config file system in addition to public you may have something like this so almost the same parameter almost copy paste from public with one difference root is storage app public avatars and then you don't need to provide it here the path should be just slash the database would not contain the folder name instead folder name would be taken from the config here and this is a typical way of using diss in config file system so on the same driver whether it's local file system or S3 or something else you may have different folders or in S3 it's called called buckets for different types of files now so far all that information is based on assumption that you can run PHP atis and storage link on your server but what if you have the case that you cannot run that command on the production server because maybe you have some shared hosting without SSH or you just generally want to save those files in public folder which is directly accessible in the browser not in storage no problem here you just need to change the route from Storage path to just public path there's a separate Lal function for that so this would be public path without any folder and in this case would be public path with avatars but I still recommend you to create a separate subfolder called storage so in this case I would provide storage as a subfolder in public path and in this case I would provide storage avatars like this and finally in this video I will recommend a package that I use myself in multiple projects which is Lal media library by spatty super popular package it takes care of a lot of things for you placing the file names in their own subfolders it allows you to make some kind of manipulations with files including thumbnails and more so I will demonstrate you the difference if you use laral media library it creates a media table with polymorphic relationships with the model that file is attached to in our case it's a user ID and then saves a lot of information about the file for the future use then in the regist ation this is what you need to add from media request to Media collection and also specify that it's a private file in this case and then in the navigation where you need to access that image you just do Au user get First Media URL Avatar and on the eloquent level you need to configure your user model to have interacts with media and has media here the result let's try to register and it is successful and if we right click the image actually has the same file name but it is accessible in storage SL1 why SL1 because it is saved in storage app public one so each file will actually be stored in its own folder with the file ID and in the database we have a media table as I mentioned and we have collection name Avatar and collection name CV with model ID 5 with user which means it belongs to user number five and here's the file name in the database also saved so yeah I do recommend using spoty media library for file uploads to take away a lot of your are paying in larl and briefly let's mention another driver S3 which is a cloud-based service Amazon S3 which means your files would be stored Elsewhere on the Amazon servers but then it's much more scalable and also separate so for example if your server breaks down then the files may get lost in S3 they are kind of separated and protected a bit more I guess from this to happen but it requires to configure quite a few things on Amazon servers before using that in Lar so as you can see there's no rout there are more parameters with EnV so the code of larel would not change you would still have storage dis S3 and then put file or get file but the configuration part of this is pretty tricky and this is described in another article on laral dailyc which I will link in the description below it contains pretty much similar information to what I've described in this video but as a separate section there's remote server setting up Amazon S3 which contains all the instruction from creating the user credentials and a lot of details this is a premium article on laral dailyc accessible for premium members of Lille Daily website and by becoming a premium member you also support this channel to be still daily and still free for upcoming future I hope this video clears up at least a few small details and questions that you had before if you have any more questions about file upload shoot in the comments below and see you guys in other videos

Channel: Laravel Daily

Views: 16,828

Keywords:

Id: xN-CF7dzeyM

Length: 13min 57sec (837 seconds)

Published: Wed Oct 18 2023