Mastering File Management in Laravel: A Comprehensive Guide

hello guys Welcome to our larel based file management system this system offers a range of essential functionalities designed to streamline your file organization process from creating and renaming files to zipping folders and searching for a specific item our system is equipped to handle all your file management needs let's explore how this powerful tool can reionize the way you organize and manage your files so let's start with a demo let's create a file let's give it a name for example test file and give it a Content now let's click save as you guys can see it has been created now if I come to my V code and in here the content is inside the file we can also create a folder by giving a name for example testing folder click save and it's created another thing that we can do is zipping everything which is inside the root file or inside any other folder here we let's click this ZIP and the zip of all the files will be created then after that we can go inside any folder we want and we can go back then we can upload as many files as we want for example if I go to my desktop and in here I can upload as many files as I want so as you guys can see all of them has been uploaded and if I come here click on the one of the pictures you guys can see I can view it after that we we can also right click and select rename then we can change the name of this files for example let's click rename and give it a name example this name so it will be changed to that name then we also we can also cut this file and paste it inside here by clicking paste button we can also copy let's copy the 11. gpg and paste it inside this folder it's here and also in here then we can download this file or let's download this ZIP file let's right click download and the download has been started let's click keep so it downloaded also we can uh delete this ZIP file by right clicking and clicking the delete button as you guys can see it has been deleted so let's see how we can build this file management in our larel application okay so let's start by creating our routes first let's go to our routes web.php and in here let's create a new route with the prefix of file management and in here let's create a group controller then let's create a group function inside this group function I will create a new route out to display my index file where I display all files and folders after that I need a new route for fishing all these files and folders then I will create two new routes one for creating a file and another for creating a folder after that I will create another route for renaming then for pasting remember in here we don't need any route for cut and copy we only need a route for paste after that we also want to zip our folders so I will create a route for zip folder then we need delete so I will create a delete route and also if the user want to download some folders or some files they can also download it by using this route and they can also upload many files so I will create a this route for uploading files so that this is our route all the routes that we need are here now now our routes is done now let's go and create our blade file by going to our resources views and in here I will create a new folder with this same name as file management let's copy paste and inside this I will create a new file with the name of index do index. blade. PHP okay so this is our index file now in here I will add my layout then I will create a section for the head and another section for the content and the last section for my script now if I go to browser and refresh the page the page will load but it's blank let's go and add our font awesome script so let's add the font awesome script and our Styles in the hit section now we have to scroll down now let's go and create our content in here so in the content first of all I will create a DA with a class of container inside that I will add a H2 then I will create a card class and card body class inside this I will just create an empty class with the class name of files because I want to display all my files and folders inside this div after that I will create another div on top of this and give it a class name of cool mtin in here I will add my buttons so first button will be for back if I go and refresh the page this button and for now I will make this hidden so no need to display the hit back button until the user Nate after that I will create a another button for creating a files then one more button to create the folders and one button for pasting data I will make this hidden also because we don't need it it until the user don't cut and copy this and the last folder will be for our creating a zip folder so I will create these functions and later to show how this function will work so that's it let's go to our browser and refresh the page as you guys can see right now we just can see the create file create folder and zip folder now let's go to our V code and create our first function to Pish all files and folders from our server s so let's go back here let's scroll down and inside script I first of all I will create the script tag then I will create my first variable to store the P that I currently I am then after that I will create get all files and folders function inside here I will call Objects and then that the type of objects would be gate same as what we wrote in our web.php and the URL will be file management gate all same thing that we wrote here with the prefix then after that I will send a data and the data I will send the path which I am currently to pitch those P files and folder and after that in the success method I will get data as a parameter and for now I will console Lo data to see if I'm getting the data or not then I will empty the files class if you guys remember in here I created a Dave with a class of files so whenever I call this function first of all I will clear this then after that I will set the current pad to data do pad that which I will get from the server and after that in the document. ready I will create this document. ready to run when the page you loads and call this function inside this so up to here our fishing the files is done we only have to create our controller and the controller method for our get files so let's open our terminal and in here let's type PHP artisan make controller file management controller and enter okay the controller is created now let's go inside it let's go from here let's go to our app HTTP controllers and our pile management controller in here let's create our get all meod let's clear this and let's import the storage in the top and we will create our first method with the name of get all files and folders the same name that we give in our web.php then inside this I will create a variable for the pad and set it a default user files if I go to my store storage and app in here I want to create a new folder with the name of user file so I want to store all the files inside this folder then I will check the pad that comes from the request if it's not empty then I will change the pad to the what I get from the request where I send in here then after that I will take the folders after folders I will take the files and I at the end I will send both folders and files with the current PAD as a respond so now let's uh go to our browser and let's refresh okay there is nothing let's create some fake folder and files let's create a new folder in here with the name of users files and inside here for now I will just create at some file and also one folder now let's go back to our browser let's refresh let's open the inspect and console now let's open this as you guys can see I got my files and folders in here as well as my pad so we can get our files and directory now let's go and create a function to display these files and folders inside this div now let's go to our V code and inside our index. blade. PHP file after the gate all files and folders function I will create another function with the name of display files and folders and this will accept three parameters one for data one for type and another for the pad then inside this I will create an object of all the icons to display for each EX exension then after that I will create a variable and after that I will look through the data to add the data inside my variable then at the end of this function I will append this ver HTML file inside my files div if I scroll down I will append it inside this div to display the files and folders then after that this is done I will call this function inside my success function of AXS one time for folders and another time for the files so now let's go back to our browser and now let's refresh the page as you guys can see I got one folder and one file if I come to my V code and inside storage let us scroll down in here I have only one folder and one file so this is how we can display our files and folders inside our da so now let's go and create our create file functionality to create files inside our project so let's go up and if I scroll up in the create file in here as you guys can see I created a function with the name of open model so this will open a model so let's uh scroll down and inside our section before the last ending da in here I will create a new Dave with the class of model and IDE of create file model then inside the model content I will create a button to close the model and give it a title of create a file then add an input box to give the file name then a text area to type the file content and I want button to save the changes and create the file then I have to create model function so let's scroll down and inside my script in here I will create a function with the name of open model and it will accept model ID then inside that I will create a variable and save the model ID inside that variable and I will give it a block style then I will create another function to close the model so same like open model it will also accept a model ID as a parameter then create a variable to save the model ID then model do style. display is equal to none so now let's go to our browser let's refresh as you guys can see okay let's close this as you guys can see the model has been created and I can type here and I can type the content also now let's go and create the save functionality let's go to our vs code and after my close model function I will create another function with the name of create file and inside here I will create an object and inside that object I will add file name and file content and and Pad then after that I will close the model then to send data to the server I will create another function with the name of post object and it will accept two parameters one URL and another data and inside here I will also open the token and the current path then I will call my objects then the type of the object would be post I will send the URL and assign it to the same URL then the data then after in the success method I will again call my first files and folders function which is this function let's my first function that fish all the data back so I want to refresh the data to and display the new changes inside my Dave now let's scroll up and inside our create file let's call our post object so in here I will call my post objects and send the URL and the data to this function now let's go back to our our controller and in here let's create our controller method so in here first thing I will do is a create a method with the name of create file and it will accept request as a parameter then inside this I will use a storage and then I will use put function of the storage this put function will accept two parameters one for file name and another parameter for the file content so in the first uh parameter I will use the pack to save the file inside a folder and slash to it should be a folder then I will give the file name with the and I will append the extension then in the second parameter I will use the content of the request that I get then at the end I will you return the response with a message of create successfully now let's go back to our browser let's refresh and let's click the create file give it a name of this thing then in here I will also type at the content this is test now let's click save as you guys can see our file has been created now if I come to vcode scroll down to storage pad and click the test and the content as you guys can see is what I wrote so this is how we can create a file now let's go and create our folder so let's go to our index blade. PHP in here scroll up after the create file model in here I will create another model with an ID of create folder model and class of model and inside the model content I will create a button to close the model with and the parameter would be same as the ID of the model then inside here I will give a title after the title I need an input box to get the folder name from the user and a button to save the changes and create the folder now let's scroll down and after the create file function and before the post in here I will create a new function with the name of create file and create an object with the name of data inside here I will just need to send the folder name and the pad then I will call my post object same thing that we did in the create file the first parameter will be the URL and the second parameter would be data and at the end I will close my model so now let's go and create the controller for this in the controller I will create a new method with the name of create folder and it will also accept the request then I will again use the storage and this time I will use make directory in the uh creating file we use port but to create a folder we use make directory and this will accept only one parameter which is the directory name so in this I will use the path and the name so so first of all I will use the pad which I get from the request then I will open this slce and then after that I will type the folder name and at the end I will send a response to the user that the folder is created successfully let's close this mini map also so now let's go to our browser let's refresh and click the create folder give it a name test folder save and as you guys can see my folder has been created now when the user click on the folder nothing happens I want to redirect the user and show the content of this folder when the user clicks on it so let's go to our vs code and inside our index. blade. PHP because we don't need anything in to create in the server site only in the client site so in here I will create a function with the name of change pad and it will accept one parameter which is pad pad that the user wants to go then on that I will assign my current pad to that pad and I will call my gate all files and folders which will refresh the content of that folder and display that that to the user and also in my display files and folder in here I will create a new condition and check the type of the file if it's folder then I will add this on click even thiser on it now let's go and retest this let's refresh okay if I click on the files nothing happen but if I click on the folder as you guys can see it will be refreshed and it will showing the content of that folder for now it's empty so let's go and add some files or let's create a file from here create a file this save create a folder save so now as you guys can see I have these two files and folders inside my testing folder if I refresh click again I I can see the files and folders of that P that I click now there's no option to go back so let's go and create our back button to go back so let's come here so now if I scroll up in my buttons I already have a back button with the idea of back button and it's hidden so let's scroll down and inside our and create a array which we will use to store all the paths that the user went then in our gate all files and folders in here we will check if the current pad is not the element of the address and it is not there in that case push the address the pad that we get from the servers to our addresses then another condition and in here we will check if it's the our address array is not empty then display the back button otherwise keep it hidden and after this I will create a function with the name of back and inside here I will remove the last element and set the current pad to the at last element which is right now then I will again call my get all files folder to display all the files and folders inside that pad now let's call this back so when the user click on the this back button so let's call it on click and now let's go to our browser let's refresh let's click on test folder okay we have our back button now let's click back we are here let's click here back yeah let's click here then here back back yeah as you guys can see the back button right now it's not displaying but when I go to inside a folder it's there now let's go and create our context menu so when the user right click on any file and folder they can rename cat copy or download the files they want so let's go to our V code and create a new DA with the class name of context menu and ID of context menu inside this we will create a UR and we will add all the options that we want like rename cat copy paste download and delete then after that in the scripts we will create the fun function to display our context menu first of all we will prevent and display our context menu we can also use this two lines of code to store the data from which we right click and we will create one more function to hide the context menu and create an even listener on the click so when the user click outside our folders and files the context menu should get closed and we will call the context menu inside that CCT even listener so now let's go back and let's refresh our page if I click here nothing happen but if I click on the FES as you guys can see we got all our context menu we can also right click on a folder and we can get our context menu now let's go and create our rename model and function so we can rename our files and folders for that let's open our V code and in the end of our section where we created our create folder and create file model in here I will create another model and inside this model I will add a close button then I will give it a title of rename then in here I will create a input text to store the old name of the file then I will create another input file to create the new name for the file or folder then after that I will uh call the rename function to save this changes now let's scroll up and in the our rename context menu in here let's add a on click even and call open model and give the model ID to open the model so when the model open in here I want to add a one condition that if the model is rename model in here first Fitch the data from the selected item then assign old name to the input type name and after this I we will create our function with the name of rename and in here I will create a data object which contain an old name new name and the current pad and we will call the Post objects to send the data to the server after that we will close our model then in my controller I will create a new method with the name of rename and this will also accept request then inside here I will create two variables so three variables one for old name one for new name and one for the extension then after that we have to check if request that we are getting is for file or for directory for that then I will create a new variable for with the name of Meme and I will link it to the my old file then in this case I will check if it's a meme then it means it's a file then we have to get the extension of the old file so I will using this method I'm going to take the file EX extension and I will perform the rename operation by calling the move option so we will use move there's no function with rename so we will we are going to use move if it's in the same folder it will rename our file so we will call our move and it will also accept two parameters one for old name and another the second parameter folder new name then after that I will send the response to the user that the rename has been successful now let's go to browser let's refresh and let's rename this files let's right click and give it a name of 1 2 3 4 save as you guys can see it has been renamed we can rename the folder as well we can type the name of for example 777 save and it will change to that name now let's go and create our cut copy and paste functions let's go to our V code and inside our index. blade. PHP file in here at the end I will create another variable with the name of copy item and one more V variable to check if the user select the cut or copy then I will create a function with the name of cut and copy which will accept a parameter cut or copy then in here I will get this selected item data after that I will assign that copy item to that the name of that item to the my copied item then I will check if it's copy and just change this to one otherwise change it to zero so I should know if it's cut or copy then I will make my paste option visible and I will close the context menu now let's go in top and assign cut and copy to our cut and copy context menu let's uh go here and on click of our cut let's call cut and copy function and send parameter as an cut same thing let's do with the copy and on the on click we will call cut and copy and send copy as a parameter now let's hide our page so we will say hidden and give it an ID of paste now let's go and create a function for our paste let's scroll down to our script and in the end of our script I will create a new function with the name of paste and inside this I will send my data object with the source destination and is copy to in the back end so I can know it it's copy or paste then I will send use my post object send the URL and data and again back I will hide the page from the context menu then I will set the copied item to N and is copied item to null as well now let's go and call this paste function when the user click paste so let's scroll up to our context menu and in here let's call our paste function now let's go and create the controller so in the controller at the end I will create a new method with the name of paste and I will create a variable source to get that Source from the request then the destination to get from the request and get the base name of the file using base name function after that I will append the file name to the destination pad and in here I will check if it's copy then use copy method of storage and give with the source and destination pad and if it's cut use the move method of storage then at the end we will send a respond to the user by saying file and folder has moved successfully now if I go to my browser refresh the page and let's say for example I want to move this uh file inside this folder so I will right click cut and I will click here and click the paste Button as you guys can see it's here if I go back it it's gone now if I want to copy this let's click copy and paste it inside this folder let's click paste test.txt and let's go back as here also and as well as here in both side now let's see how we can create our delete functionality so let's go back to our V code inside our index file and at the end I will create a new function with the name of delete item and inside here first I will get all the data from the selected item then I will pitch the name from this selected item after that I will create my object which I will use to send the name and I will use my post a to send the URL and the data in it then after that I will call this function inside my context menu delete in here so let's call this on clict of this and delete item now let's go to our controller and create our delete method so in the controller and at the end I will create a new function with the name of delete and inside here the first thing that I will do is that check the meme type of the file so if there is a meme type then I will use a storage delete because it's a file otherwise I I know it's a directory so I will use delete directory then I will return a message by saying file SL folder has been deleted successfully now let's go and let's refresh now let's uh try to delete the testing. txt let's click delete it's delete it now let's uh delete this folder or it's Let's uh click and it's gone now let's try to delete our this folder so it has been deleted now let's see how we can download a file by click right clicking and clicking the download file so let's go our into our index. blade. PHP file and at the end I will create a new function with the name of download item then I will get the data of selected item and store it inside my name variable then after that I will encode it using encode URI component then I will redirect the user to a new blank tab with the URL and the name of my file now let's go and call this function on the our context menu so when the user click it so let's scroll up and in here let's call on click download item now let's go to controller and at the end let's create a new method with the name of download inside it we will get our encoded file name then we will use re URL decode to decode the file name and we at the end we will use try and catch and if the file is not found we will send 404 else we will use download method of a storage to download the file name so let's go to browser let's refresh and let's click download as you guys can see the file has been downloaded successfully now let's create our ZIP this folder functionality so let's go to our V code and in our index. blade. function in here I will create a folder with the name of zip folder and inside my data object I will just send the current path because I want to zip the current path or the current folder then I will call my post objects function and send it the data now in my file management controller at the top let's go up in here I will import the zip archive then I will create a new function with the name of zip folder inside this I will create a variable to store the folder name that I get from the client then I will create a variable and get the folder name and print a do zip extension to it then after that I will specify the pad to which I want to create a z folder after that I will create a variable and use new zip archip class then I will check if there's any condition then I will return an error message after that I will get all the files from that directory and for each file I will add them to my zip folder after that I will close the Z and remove back my Z folder from the app directory to the original folder then I will return successful so let's go and let's try this let's click the zip folder as you guys can see the zip folder has been created successfully now the last thing that I want to do is to allow the user to upload his files so let's go to our V code to index out. play. PHP and let's scroll up in here that I I have my pattern I will create a new Dave class with a form inside it and this form has incp multipot form data it will be a form data then I will create the label and a input type file with multiple because I want to so that user can upload multiple files at the single time now let's go and create the object function for this let's us scroll down and at the end of our scripts let's create another function in here and set our document. ready and add a even listener on file upload on change and create a form data to store our form inside this then we will get the files from the form data after that we will look through each files and open the files on it then I will open the token csrf token inside my form data and the PAD as well then I will use aex and URL to send the uploads and this meod is POS then the data of objects I will use my form data after that the content type and the process type data both of them will be false then in the success method I will call my get all files and folders to refresh the data so we can see the files and just this console and at the end error also we will use the console now let's go to file management controller and create the controller method for this now in the file management at the end I will create another function with the name of upload and inside here I will check if the request has a file in that case get the files from the request and I will create an array then I will look through all the files and get the file name with the extension then I will store all the files into my pad that I sent from the server site after that I will upload all of them inside my upload files and return success message to the user and if anything is failed then I will say new files were uploaded now let's go and let's refresh our browser we have a button upload files in here let's click this let's select some files from here and click open okay the moment uh we click open all our files will be uploaded to server and after after the success it will be displayed in here so right now I can create file create a folder and zip my current folder and also I can go inside a folder where I can create my own folders so this is how we can create a file management and lot of well hope you guys liked it and enjoy it and if you have any questions write it down in the comment

Channel: Code With ERaufi

Views: 535

Keywords: Laravel, File Management, PHP, Web Development, Laravel Routes, Create File, Create Folder, Rename File, Zip Folder, Delete File, Download File, Search Files, Upload Files, Laravel Tutorial, Laravel Guide

Id: tt4HOOQ-rCc

Length: 37min 58sec (2278 seconds)

Published: Sun Apr 28 2024