Uploading files in Laravel - Mini Project: Build & Apply

Uploading Files in Laravel

📖 Scenario: You are building a simple web application where users can upload profile pictures. You want to create a form to upload an image file and save it on the server using Laravel.

🎯 Goal: Build a Laravel file upload feature that accepts an image file from a form, validates it, and stores it in the storage/app/public directory.

📋 What You'll Learn

Create a form with a file input named profile_picture

Add a route to handle the file upload POST request

Write a controller method to validate and store the uploaded file

Save the uploaded file in the storage/app/public directory with the original filename

💡 Why This Matters

🌍 Real World

Uploading files is common in web apps for user avatars, documents, or media. This project shows how to handle file uploads securely and easily in Laravel.

💼 Career

Many web developer jobs require handling file uploads. Knowing Laravel's file upload process is essential for building user-friendly and secure applications.

1

Create the file upload form

Create a Blade view file with a form that uses POST method and enctype="multipart/form-data". Add a file input with the name profile_picture and a submit button.

Laravel

    @csrf
    
    

Hint

Remember to set enctype="multipart/form-data" on the form to allow file uploads.

2

Add the upload route

In routes/web.php, add a POST route for /upload that uses the UploadController and its store method.

Laravel

    @csrf
    
    Upload


// Add POST route for /upload here

Hint

Use Route::post with the URL /upload and controller UploadController@store.

3

Write the controller method to validate and store the file

In app/Http/Controllers/UploadController.php, create the store method. Validate the request to require a file named profile_picture that is an image. Then store the file in the public disk preserving the original filename.

Laravel

    @csrf
    
    Upload


use App\Http\Controllers\UploadController;

Route::post('/upload', [UploadController::class, 'store']);

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadController extends Controller
{
    public function store(Request $request)
    {
        // Validate and store file here
    }
}

Hint

Use $request->validate() to check the file is required and an image. Use storeAs to save the file with its original name in the public disk.

4

Complete the file upload feature

Add a redirect back to the form with a success message after storing the file in the store method.

Laravel

    @csrf
    
    Upload


use App\Http\Controllers\UploadController;

Route::post('/upload', [UploadController::class, 'store']);

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadController extends Controller
{
    public function store(Request $request)
    {
        $validated = $request->validate([
            'profile_picture' => 'required|image'
        ]);

        $request->file('profile_picture')->storeAs('public', $request->file('profile_picture')->getClientOriginalName());

        // Add redirect with success message here
    }
}

Hint

Use redirect()->back()->with() to send the user back with a success message.

Practice

1. What is the main purpose of Laravel's store() method when uploading files?

easy

A. To save the uploaded file to a specified disk or folder

B. To validate the file type and size before upload

C. To display the uploaded file on the webpage

D. To delete the uploaded file from the server

Solution

1. Step 1: Understand the role of store() in file uploads

   The store() method in Laravel is designed to save the uploaded file to a disk or folder configured in the app.

2. Step 2: Differentiate from validation and display

   Validation is done separately using Laravel's validation rules, and displaying files is handled by views or frontend code, not store().

3. Final Answer:

   To save the uploaded file to a specified disk or folder -> Option A

4. Quick Check:

   store() saves files [OK]

Hint: Remember: store() saves files, validation is separate [OK]

Common Mistakes:

• Confusing store() with validation methods
• Thinking store() displays files
• Assuming store() deletes files

2. Which HTML form attribute is required to upload files correctly in Laravel?

easy

A. method="get"

B. enctype="multipart/form-data"

C. action="upload.php"

D. target="_blank"

Solution

1. Step 1: Identify the form attribute for file uploads

   To upload files, the form must have enctype="multipart/form-data" so the browser sends file data properly.

2. Step 2: Understand other attributes

   method="get" is not suitable for file uploads; action specifies URL but is not enough; target controls where to open response.

3. Final Answer:

   enctype="multipart/form-data" -> Option B

4. Quick Check:

   Form needs enctype multipart/form-data [OK]

Hint: File uploads always need enctype multipart/form-data [OK]

Common Mistakes:

• Omitting enctype attribute
• Using method="get" instead of post
• Confusing action URL with enctype

3. Given this Laravel controller code snippet, what will be the value of $path after uploading a file named photo.jpg?

public function upload(Request $request) {
    $path = $request->file('image')->store('photos');
    return $path;
}

medium

A. "photos/unique_generated_name.jpg"

B. "/storage/photos/photo.jpg"

C. "photos/photo.jpg"

D. "/public/photos/photo.jpg"

Solution

1. Step 1: Understand how store() names files

   The store() method saves the file in the given folder but generates a unique filename to avoid overwriting.

2. Step 2: Check the returned path format

   The returned path is relative to the storage disk root and includes the folder plus the unique filename, not the original name.

3. Final Answer:

   "photos/unique_generated_name.jpg" -> Option A

4. Quick Check:

   store() returns folder + unique filename [OK]

Hint: store() auto-renames files to unique names [OK]

Common Mistakes:

• Assuming original filename is kept
• Expecting absolute URL path
• Confusing storage path with public URL

4. What is wrong with this Laravel file upload code?

public function upload(Request $request) {
    $file = $request->file('photo');
    $file->storeAs('uploads');
    return 'File uploaded';
}

medium

A. The storeAs() method cannot be used in Laravel

B. The file() method should be files()

C. The storeAs() method requires a second argument for filename

D. The uploads folder must be inside storage/app

Solution

1. Step 1: Check storeAs() method usage

   The storeAs() method requires two arguments: destination path and filename. Here only destination is given.

2. Step 2: Verify other method correctness

   file() is correct to get uploaded file; storeAs() is valid but needs filename; folder location depends on app setup.

3. Final Answer:

   The storeAs() method requires a second argument for filename -> Option C

4. Quick Check:

   storeAs() needs destination and filename [OK]

Hint: storeAs() always needs destination path and filename [OK]

Common Mistakes:

• Passing only destination to storeAs()
• Confusing file() with files()
• Assuming storeAs() is invalid in Laravel

5. You want to upload multiple images and save their paths in the database. Which Laravel code snippet correctly handles multiple file uploads and stores their paths in an array?

hard

A. $paths = $request->file('images')->move('gallery');

B. $paths = $request->file('images')->store('gallery');

C. foreach ($request->images as $image) {
$paths[] = $image->move('gallery');
}

D. foreach ($request->file('images') as $image) {
$paths[] = $image->store('gallery');
}

Solution

1. Step 1: Understand handling multiple files

   When uploading multiple files, $request->file('images') returns an array of files, so we loop through each.

2. Step 2: Use store() inside loop and collect paths

   Each file is stored individually with store(), and the returned paths are saved in an array.

3. Final Answer:

   foreach ($request->file('images') as $image) { $paths[] = $image->store('gallery'); } -> Option D

4. Quick Check:

   Loop files, store each, collect paths [OK]

Hint: Loop multiple files, store each, save paths in array [OK]

Common Mistakes:

• Calling store() on array directly
• Using move() without filename in loop
• Not looping over multiple files