File uploads in Laravel - Performance & Optimization

Performance: File uploads

MEDIUM IMPACT

File uploads impact page load speed and interaction responsiveness by affecting server response time and client-side resource usage during upload.

Uploading large files in a Laravel application

Laravel

<?php
// Controller method using chunked upload or queue
public function upload(Request $request) {
    $file = $request->file('upload');
    dispatch(new ProcessUploadJob($file));
    return response()->json(['message' => 'Upload started'], 202);
}

Uploads are processed asynchronously, freeing server to respond quickly and improving user interaction.

📈 Performance GainNon-blocking upload handling reduces server response time and improves INP.

Uploading large files in a Laravel application

Laravel

<?php
// Controller method handling upload synchronously
public function upload(Request $request) {
    $file = $request->file('upload');
    $file->move(public_path('uploads'), $file->getClientOriginalName());
    return back()->with('success', 'File uploaded');
}

Uploads block the request until complete, causing slow response and poor user experience for large files.

📉 Performance CostBlocks server response for entire upload duration, increasing INP and server load.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous upload handling	Minimal	0	0	[✗] Bad
Asynchronous upload with queue	Minimal	0	0	[✓] Good

Rendering Pipeline

File uploads affect the browser's interaction phase by delaying server response and can block UI updates if handled synchronously. Efficient handling moves upload processing off the main request thread.

→Network

→Server Processing

→Interaction to Next Paint (INP)

⚠️ BottleneckServer Processing during synchronous upload handling

Core Web Vital Affected

INP

File uploads impact page load speed and interaction responsiveness by affecting server response time and client-side resource usage during upload.

Optimization Tips

1Avoid synchronous file upload processing to prevent blocking server response.

2Use asynchronous jobs or chunked uploads to improve interaction responsiveness.

3Monitor upload request duration in DevTools Network panel to detect blocking.

Performance Quiz - 3 Questions

What is the main performance problem with handling file uploads synchronously in Laravel?

A It blocks server response until upload completes

B It increases DOM nodes on the page

C It causes excessive CSS recalculations

D It reduces image quality

DevTools: Network

How to check: Open DevTools, go to Network tab, start file upload, observe the request duration and timing waterfall.

What to look for: Long blocking time or stalled requests indicate synchronous upload blocking; shorter initial response times indicate asynchronous handling.

Practice

1. In Laravel, which method is used to check if a file was uploaded in a request?

easy

A. $request->isFile('file')

B. $request->hasFile('file')

C. $request->checkFile('file')

D. $request->fileExists('file')

Solution

1. Step 1: Identify Laravel method to check file upload

   Laravel provides hasFile to verify if a file was uploaded in the request.

2. Step 2: Compare options with Laravel documentation

   Only hasFile is the correct method; others do not exist in Laravel.

3. Final Answer:

   $request->hasFile('file') -> Option B

4. Quick Check:

   Check file upload with hasFile() = D [OK]

Hint: Use hasFile() to check uploaded files quickly [OK]

Common Mistakes:

• Using non-existent methods like fileExists()
• Confusing hasFile() with file() method
• Not checking if file exists before processing

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

easy

A. enctype="multipart/form-data"

B. method="post"

C. action="upload.php"

D. type="file"

Solution

1. Step 1: Identify form attribute for file uploads

   File uploads require the form to have enctype="multipart/form-data" to send file data properly.

2. Step 2: Check other attributes

   method="post" is needed but not enough alone; type="file" is for input, not form; action defines URL, not upload encoding.

3. Final Answer:

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

4. Quick Check:

   Form encoding for files = B [OK]

Hint: Always set enctype to multipart/form-data for file uploads [OK]

Common Mistakes:

• Omitting enctype attribute
• Using GET method instead of POST
• Confusing input type with form attribute

3. What will be the output of this Laravel code snippet after uploading a file named photo.jpg?

$path = $request->file('photo')->store('images');
return $path;

medium

A. "photo.jpg"

B. "images/photo.jpg"

C. "/storage/images/photo.jpg"

D. "images/unique_generated_name.jpg"

Solution

1. Step 1: Understand store() method behavior

   The store() method saves the file in the specified folder with a unique generated filename to avoid overwriting.

2. Step 2: Analyze returned path

   The returned path includes the folder and the unique filename, not the original filename or full storage path.

3. Final Answer:

   "images/unique_generated_name.jpg" -> Option D

4. Quick Check:

   store() returns folder + unique filename = A [OK]

Hint: store() saves file with unique name, returns folder plus new filename [OK]

Common Mistakes:

• Assuming original filename is kept
• Expecting full storage path returned
• Confusing store() with move() method

4. Identify the error in this Laravel file upload code:

if ($request->hasFile('avatar')) {
  $file = $request->file('avatar');
  $file->move('uploads');
}

medium

A. Missing second argument for move() method

B. Incorrect method to check file existence

C. move() should be called on $request, not $file

D. No error, code is correct

Solution

1. Step 1: Review move() method signature

   The move() method requires two arguments: destination path and filename.

2. Step 2: Check code arguments

   Only one argument ('uploads') is given; filename is missing, causing an error.

3. Final Answer:

   Missing second argument for move() method -> Option A

4. Quick Check:

   move() needs path and filename = C [OK]

Hint: move() needs destination path and filename both [OK]

Common Mistakes:

• Calling move() with only one argument
• Confusing hasFile() with fileExists()
• Calling move() on request instead of file

5. You want to upload multiple images and save their paths in the database. Which Laravel approach correctly handles multiple file uploads in a request named photos?

hard

A. if ($request->hasFile('photos')) {
$path = $request->file('photos')->store('gallery');
Photo::create(['path' => $path]);
}

B. $photos = $request->file('photos');
$photos->store('gallery');
Photo::create(['path' => $photos]);

C. foreach ($request->file('photos') as $photo) {
$path = $photo->store('gallery');
Photo::create(['path' => $path]);
}

D. $path = $request->file('photos')->move('gallery');
Photo::create(['path' => $path]);

Solution

1. Step 1: Understand multiple file upload handling

   Multiple files come as an array; you must loop through each file to store and save paths.

2. Step 2: Analyze options for correct looping and storing

   foreach ($request->file('photos') as $photo) {
     $path = $photo->store('gallery');
     Photo::create(['path' => $path]);
   }

   loops over each file, stores it, and saves path correctly. Others treat files as single or misuse methods.

3. Final Answer:

   Loop through each file, store, and save path -> Option C

4. Quick Check:

   Multiple files need foreach loop = A [OK]

Hint: Use foreach to handle multiple uploaded files individually [OK]

Common Mistakes:

• Treating multiple files as single file
• Not looping through file array
• Calling store() on file array directly