Backend interview prep

Start

Angular File Upload

Learn Angular File Upload with HttpClient, FormData, upload progress, drag-and-drop, multiple file upload, image preview, file validation, enterprise architecture, best practices, and interview questions.

File Upload is one of the most common features in Angular enterprise applications.

Angular provides powerful support for uploading files using HttpClient, FormData, and RxJS Observables.

Typical enterprise use cases include:

  • Profile Picture Upload
  • Resume Upload
  • Banking Document Upload
  • KYC Verification
  • Medical Reports
  • Invoice Upload
  • Product Images
  • PDF Documents
  • Video Uploads
  • Cloud Storage Integration

File Upload is one of the most frequently asked Angular interview topics.

Table of Contents

  • What is File Upload?
  • Why Use FormData?
  • File Upload Architecture
  • Selecting Files
  • Uploading Files
  • Multiple File Upload
  • Upload Progress
  • Image Preview
  • File Validation
  • Drag and Drop Upload
  • Enterprise Banking Example
  • Performance Best Practices
  • Common Mistakes
  • Top 10 Interview Questions
  • Summary

What is File Upload?

File Upload is the process of transferring one or more files from a client application to a server.

Angular typically uploads files using:

  • HttpClient
  • FormData
  • Multipart Requests

Flow

User

↓

Select File

↓

Angular

↓

HttpClient

↓

REST API

↓

Storage

↓

Database

File Upload Architecture

flowchart LR

User

User --> FileInput

FileInput --> AngularComponent

AngularComponent --> FormData

FormData --> HttpClient

HttpClient --> RESTAPI

RESTAPI --> FileStorage

FileStorage --> Database

Why Use FormData?

FormData is designed to send files and form fields using the multipart/form-data content type.

Benefits

  • Supports binary files
  • Supports multiple files
  • Supports text fields
  • Works with all major backend frameworks
  • Efficient for large uploads

Creating a File Input

<input

type="file"

(change)="onFileSelected($event)">

For multiple files

<input

type="file"

multiple

(change)="onFilesSelected($event)">

Selecting a File

selectedFile!: File;

onFileSelected(

event: Event

){

const input =

event.target as HTMLInputElement;

if(input.files?.length){

this.selectedFile =

input.files[0];

}

}

File Selection Flow

flowchart TD

User

User --> FileChooser

FileChooser --> Browser

Browser --> Angular

Angular --> SelectedFile

Creating FormData

const formData =

new FormData();

formData.append(

'file',

this.selectedFile

);

Additional fields can also be included.

formData.append(

'customerId',

'1001'

);

formData.append(

'documentType',

'Passport'

);

FormData Architecture

flowchart LR

File

File --> FormData

Metadata --> FormData

FormData --> HttpClient

Uploading a File

upload(){

return this.http.post(

this.api,

formData

);

}

Component

this.uploadService

.upload()

.subscribe({

next:()=>{

console.log(

'Upload Successful'

);

}

});

Upload Flow

sequenceDiagram

participant User

participant Angular

participant API

participant Storage

User->>Angular: Select File

Angular->>API: POST Multipart Request

API->>Storage: Save File

Storage-->>API: Success

API-->>Angular: Response

Multiple File Upload

const formData =

new FormData();

for(

const file of this.files

){

formData.append(

'files',

file

);

}

Server receives multiple uploaded files.

Multiple Upload Architecture

flowchart TD

Files

Files --> FormData

FormData --> HttpClient

HttpClient --> RESTAPI

RESTAPI --> CloudStorage

Upload Progress

Angular can report upload progress using observe: 'events' and reportProgress: true.

import {
HttpEventType
} from '@angular/common/http';

this.http.post(

this.api,

formData,

{

reportProgress:true,

observe:'events'

}

)

.subscribe(event=>{

if(

event.type===

HttpEventType.UploadProgress

){

const percent=

Math.round(

100 *

(event.loaded/

(event.total ?? 1))

);

console.log(percent);

}

});

Progress Flow

flowchart LR

Upload

Upload --> 10%

Upload --> 40%

Upload --> 70%

Upload --> 100%

100% --> Success

Image Preview

preview='';

const reader =

new FileReader();

reader.onload=()=>{

this.preview=

reader.result as string;

};

reader.readAsDataURL(

this.selectedFile

);

Template

<img

[src]="preview"

width="200">

Image Preview Architecture

flowchart TD

Image

Image --> FileReader

FileReader --> Base64

Base64 --> ImagePreview

File Validation

Validate file size.

const maxSize =

5 * 1024 * 1024;

if(

this.selectedFile.size>

maxSize

){

alert(

'File too large'

);

}

Validate file type.

const allowed =

[

'image/png',

'image/jpeg',

'application/pdf'

];

if(

!allowed.includes(

this.selectedFile.type

)

){

alert(

'Invalid file'

);

}

Important: Client-side validation improves user experience, but the server must also validate file type, size, and content before storing uploaded files.

Validation Flow

flowchart TD

File

File --> SizeCheck

SizeCheck --> TypeCheck

TypeCheck --> Upload

TypeCheck --> Reject

Drag and Drop Upload

Template

<div

(drop)="onDrop($event)"

(dragover)="allowDrop($event)">

Drop Files Here

</div>

Benefits

  • Better user experience
  • Faster uploads
  • Modern UI
  • Supports multiple files

Drag & Drop Architecture

flowchart LR

DragFile

DragFile --> DropZone

DropZone --> Angular

Angular --> Upload

Uploading to Cloud Storage

Common enterprise destinations

  • AWS S3
  • Azure Blob Storage
  • Google Cloud Storage
  • Enterprise File Servers

Architecture

flowchart TD

Angular

Angular --> RESTAPI

RESTAPI --> CloudStorage

CloudStorage --> CDN

CDN --> User

Enterprise Banking Example

Customer uploads:

  • Passport
  • Driver License
  • Salary Slip
  • Bank Statement
  • PAN Card
  • Tax Documents

Architecture

flowchart TD

Customer

Customer --> AngularApp

AngularApp --> UploadService

UploadService --> HttpClient

HttpClient --> BankingAPI

BankingAPI --> DocumentService

DocumentService --> SecureStorage

SecureStorage --> Database

Benefits

  • Secure uploads
  • Audit trail
  • Scalable storage
  • Better compliance
  • Improved customer experience

File Upload Lifecycle

flowchart TD

SelectFile

SelectFile --> Validate

Validate --> FormData

FormData --> Upload

Upload --> Progress

Progress --> Success

Progress --> Failure

Performance Best Practices

Practice Benefit
Validate before upload Reduce unnecessary traffic
Upload only required files Better bandwidth usage
Show progress indicators Better UX
Compress images when appropriate Smaller payloads
Use lazy loading for previews Better performance
Support resumable uploads for very large files Improved reliability
Upload directly to cloud storage when appropriate Reduce backend load

Security Best Practices

Practice Reason
Validate on the server Prevent malicious uploads
Restrict file types Reduce attack surface
Limit maximum file size Prevent abuse
Rename uploaded files Avoid filename collisions
Scan files for malware Improve security
Store uploads outside the web root when appropriate Prevent direct execution
Generate secure download URLs Protect sensitive documents

Common Mistakes

Sending File as JSON

Incorrect

{

file:

this.selectedFile

}

Correct

FormData

Setting Content-Type Manually

Avoid manually setting:

Content-Type:
multipart/form-data

When sending FormData, let the browser set the Content-Type (including the multipart boundary) automatically.

Skipping Validation

Always validate:

  • File size
  • File type
  • Required fields

Also validate on the server.

Ignoring Upload Progress

Provide upload progress for large files to improve the user experience.

Storing Sensitive Files Insecurely

Use secure storage, proper access control, encryption where required, and audit logging for sensitive documents.

Best Practices

  • Use FormData.
  • Validate files before upload.
  • Validate again on the server.
  • Show upload progress.
  • Support drag-and-drop.
  • Display image previews when appropriate.
  • Restrict file types and sizes.
  • Store files securely.
  • Scan uploads for malware.
  • Use HTTPS for all uploads.

Advantages

Feature Benefit
FormData Multipart upload support
HttpClient Simple API communication
Progress Events Better UX
Image Preview Immediate feedback
Multiple Upload Efficient bulk upload
Drag & Drop Modern user experience
Secure Validation Safer applications
Enterprise Ready Scalable architecture

Top 10 Angular File Upload Interview Questions

1. How does Angular upload files?

Answer

Angular uploads files using HttpClient and FormData, typically through multipart/form-data requests.

2. Why is FormData used?

Answer

FormData efficiently sends binary files along with additional form fields in multipart requests.

3. How do you select a file?

Answer

Use an HTML file input and handle the (change) event to retrieve the selected File object.

4. How do you upload multiple files?

Answer

Append each file to the same FormData instance and send it with HttpClient.

5. How can upload progress be tracked?

Answer

Use observe: 'events', reportProgress: true, and monitor HttpEventType.UploadProgress.

6. How do you preview an image before uploading?

Answer

Use the browser's FileReader API to convert the selected image into a Data URL and display it.

7. What validations should be performed?

Answer

Validate:

  • File size
  • File type
  • Required fields

Repeat validation on the server.

8. Why shouldn't the Content-Type header be set manually?

Answer

When uploading FormData, the browser automatically generates the correct multipart/form-data header and boundary.

9. What are common enterprise file upload use cases?

Answer

  • KYC documents
  • Profile pictures
  • Medical records
  • Product images
  • Contracts
  • Invoices
  • Reports

10. What are Angular File Upload best practices?

Answer

  • Use FormData.
  • Validate on both client and server.
  • Show upload progress.
  • Restrict file types and sizes.
  • Use HTTPS.
  • Scan uploaded files.
  • Store files securely.

Interview Cheat Sheet

Topic Remember
Upload API HttpClient
Multipart Data FormData
File Selection <input type="file">
Progress HttpEventType.UploadProgress
Multiple Upload FormData.append()
Preview FileReader
Validation Size + Type
Security Server-side validation
Cloud Storage S3 / Azure Blob / GCS
Best Practice Never trust client validation

Summary

Angular File Upload combines HttpClient, FormData, and RxJS to provide a robust solution for transferring files to backend services. By implementing client and server validation, tracking upload progress, supporting drag-and-drop interactions, and storing files securely, developers can build scalable, secure, and user-friendly enterprise applications. File uploads are a fundamental requirement in many real-world Angular projects and remain an important interview topic.

Key Takeaways

  • ✔ Use FormData for multipart file uploads.
  • ✔ Use HttpClient to send upload requests.
  • ✔ Track upload progress using HttpEventType.UploadProgress.
  • ✔ Validate file size and type on both client and server.
  • ✔ Let the browser set the multipart Content-Type.
  • ✔ Use FileReader for image previews.
  • ✔ Support multiple file uploads where appropriate.
  • ✔ Store uploaded files securely.
  • ✔ Protect uploads with HTTPS and server-side validation.
  • ✔ File Upload is one of the most common Angular enterprise interview topics.

Next Article

➡️ 68-Download-Files-QA.md