Scribd
Upload
45 views16 pages

Web Technologies Week 13-15 (File Uploading)

The document describes how to upload, view, and download files in Laravel 9. It involves creating a form to upload files, validating and storing the uploaded files, saving file details to a database, and creating a page to view and download the stored files. The key steps are: 1. Creating a form and controller to upload files 2. Validating and storing uploaded files in a folder 3. Saving file details to a database using a model and migration 4. Creating a view to display stored files and allow downloading.

Uploaded by

Imran Ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
45 views16 pages

Web Technologies Week 13-15 (File Uploading)

The document describes how to upload, view, and download files in Laravel 9. It involves creating a form to upload files, validating and storing the uploaded files, saving file details to a database, and creating a page to view and download the stored files. The key steps are: 1. Creating a form and controller to upload files 2. Validating and storing uploaded files in a folder 3. Saving file details to a database using a model and migration 4. Creating a view to display stored files and allow downloading.

Uploaded by

Imran Ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Dr.

Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

File Upload, View and Download in Laravel 9

Uploading File:
1. First, we need to create a blade.php file on which we shall make a form and get the
user to select the file which needs to be uploaded.
• Go to resources -> views and create a blade.php file named
“Upload_file.blade.php”.

<body class="body_style">

<div class="container">

<form action="{{URL::to('/file_store')}}" method="post"


enctype="multipart/form-data">

@csrf

<h2>Uploading File</h2>

<label for="">Please Upload file here</label><br><br>

<input type="file" name="file" ><br><br>

<button type="submit" class="button_style">Submit</button>

</form><br>

</div>

</body>

Above is the code for the Form body.

• Form will submit by Post method


• We will use encytype = “multipart/form-data”
• The input type should be “file” as it facilitates us to upload a file.

COMSATS University Islamabad (Wah Campus), Pakistan 1


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

2. Now let’s create a controller through which we will control the routes to show the form
and store the files in storage:

php artisan make:controller FileController

• By typing the above line in the terminal, a new controller named


“FileController” will be created.
• Now let’s make a function in the FileController to view the blade file:

public function open_file_form(){

return view ('File_Upload.Upload_file');

This function will return the form which we created in resources -> views.

• Now we will make a route for this function.


• Go to web.php:

Route::get('/file_upload', [FileController::class,
'open_file_form']);

This route shows that when “/file_upload” will be written in the URL, it will call the
“FileController” and execute the “open_file_form” function.

Now by executing our code we will successfully view our page:

php artisan serve

By writing the above command on the terminal, the page will appear.

COMSATS University Islamabad (Wah Campus), Pakistan 2


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

• Upon clicking the choose file option, a pop window will appear from where we can
select any file which we want to upload.
• After selecting the file, we will press the submit button and the file should be saved on
the defined path.
• For saving the file and defining the storage path, we will make another function in
“FileController”

3. Now let’s make a function for validating the file and storing it in the defined folder.
• Go to FileController and create a function named store_file:

public function store_file(Request $req){

$req->validate([

'file'=> 'required|mimes:pdf,doc,docx,xlx,csv,jpg,png|max:4048',

COMSATS University Islamabad (Wah Campus), Pakistan 3


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

]);

$filename = time().'.'.$req->file->extension();

$req->file->move('uploads', $filename);

// $req->file->storeAs('public', $filename);

return redirect('file_upload');

• In the above function, at first we will make a Request variable through which we
will request the data from the form.
• After that we will validate our data. The validation will make it sure that the
requested file is in the pre-defined format and is less than the defined size.
• “‘file’ => required” will make sure that no user may press the submit button
without selecting the file.
• “mimes” will define some extensions. The file will only be accepted if its extension
is matching from one of the defined extensions in mimes.
• “Max:4048” is the size in Mbs that we have defined. Now no file shall be accepted
if its size is greater than it.
• “filename = time().’.’.$req->file->extension()” is declaring a name for the file. As
we know a user can upload multiple files with the same name. It can cause an error
when reading/accessing that file. For handling this error, we will use a time function
that will append the time at which the file was uploaded with the extension of the
file and store the name in “filename” variable.
• Now there are two methods to store this file:

$request->file->move('uploads', $filename);

This line will create a folder “upload” in your project -> public.

COMSATS University Islamabad (Wah Campus), Pakistan 4


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

And it will store the file in that folder.

$req->file->storeAs('uploads', $filename);

This line will create a folder “upload” in your project -> storage-> app and store
the file in that folder.

COMSATS University Islamabad (Wah Campus), Pakistan 5


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

This is how we can easily upload the file on our project!

COMSATS University Islamabad (Wah Campus), Pakistan 6


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

Uploading file details on database

4. To save the saved file details on the server so that they can be viewed and downloaded
anytime later, we need to first create a model that can contact the database and migration
in which we can save our data.

• To make a model and migration we simply have to write the following command on
the terminal:

php artisan make:model filings -m

this will create a model named filings and its migration as well.

COMSATS University Islamabad (Wah Campus), Pakistan 7


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

• In the migration, we need to make a field where we will store the filenames of our
files i.e, $table -> string(“file”);

By typing the following command on the terminal, we will successfully create our table
in the database.

php artisan migrate:fresh

COMSATS University Islamabad (Wah Campus), Pakistan 8


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

• Now we will write our code for saving the data on the database in our “FileController”
which we made to upload the data.
• In the same store_file() function which we used to upload the data, we will write the
following code:

$filewritter = new filings;

$filewritter -> file = $filename;

$filewritter->save();

return redirect('file_upload');

COMSATS University Islamabad (Wah Campus), Pakistan 9


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

• We have created an object of our model “filings”.


• We used that object to save the name of our file which we had made earlier by using
the time() function in our database.
• $filewritter->save() will save the data in the database.

Now if we again upload any file, it will be saved into the public folder and its name will also
be stored on the database as well.

5. Now, as we have uploaded the data and stored its information on the server, we need
to view it and maybe download it if we want.

COMSATS University Islamabad (Wah Campus), Pakistan 10


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

Viewing The Uploaded Files

6. To view a file, we will make a page on which we will display all the uploaded files and
we will provide two options for the user, “View” or “Download”.
• To do this we will make a route for a blade.php page on which we will display
the data:

Route::get('/show_data', [FileController::class, 'show_file_data']);

• Now on FileController, we will make a function named “show_file_data”


which will return a blade.php page.

public function show_file_data(){

$data = filings::all();

return view('File_Upload.display_file_data', compact('data'));

• In the above function, we are creating an object of the model “filings” to


which we are providing all the data that is saved in our database.
• Also, we are sending that object to a blade file so that the data can be
displayed by it.

Now create a blade.php file for viewing the data:

COMSATS University Islamabad (Wah Campus), Pakistan 11


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

• In the blade file, we have made a table in which we are showing the name of the file
and two links, one for viewing the file and the other for downloading it.

COMSATS University Islamabad (Wah Campus), Pakistan 12


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

7. Now, to view the desired file, the user just needs to click on the “view” link and another
page will open on which the file will be displayed.

• To achieve this, we will make a function in FileController that will find the specified
id of the file and send it to a blade file which will search that file based on that id and
display its content on the screen.

public function file_view($id){

$data = filings::find($id);

return view ('File_Upload.View_file', compact('data'));

• We will send the id from the table by the route to this function in the controller:

Route::get('/view_file/{id}', [FileController::class, 'file_view']);

• Now we will make a blade file in which we will display our desired file.

NOTE: if it will be an image, it will be displayed but if it will be a document, then it will be
downloaded by default.

COMSATS University Islamabad (Wah Campus), Pakistan 13


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

Following is the code for View.blade.php file which we had made in resources -> views ->
File_Upload to view the uploaded file.

<!DOCTYPE html>
<html lang="en">
<head>

<title>{{$data->filename}}</title>
<style>
.back_style{
border-radius: 6px;
box-shadow: 5px 5px 5px 5px gray;
background-color: lightgoldenrodyellow;
padding-left: 48%;
}

</style>
</head>
<body>

<iframe height="500vh" width="100%" src="/uploads/{{$data->file}}"


frameborder="2"></iframe>

<div class="back_style"><a href="/show_data">BACK</a></div>

</body>
</html>

This is how we can view our uploaded file in Laravel.

COMSATS University Islamabad (Wah Campus), Pakistan 14


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

Downloading The Uploaded File

8. To download the uploaded file, we just simply need to click the download option
from the table which we displayed earlier.
• The link will take the file name and send it to the route.
• The route will send the file name to the function in our controller.

Route::get('/download_file/{file}', [FileController::class,
'file_download']);

Now we need to make a function in our FileController:

public function file_download($file){

return response()->download(public_path('uploads/'.$file));

This function will take the filename and search for it in the public path. If it finds it, then
it will download it as a response.

COMSATS University Islamabad (Wah Campus), Pakistan 15


Dr. Maaz Rehan (by Haseeb SP20-BCS-123) CSC336 Web Technologies Dated: 02-Jan-23

This is how we can download the uploaded file!

COMSATS University Islamabad (Wah Campus), Pakistan 16

You might also like