Angular 5 File Upload with FormData and HttpClient

You will learn how browser file inputs work in Angular, how to read the selected File, and how to send it to a server with FormData and Angular's HttpClient. You will also see basic validation, upload progress handling, and a reusable component structure.

A file upload has two separate jobs:

1. Choose a file in the browser using an HTML <input type="file"> element.
2. Send that file to a server using an HTTP request.

Angular does not need a special package for the basic version. The browser already provides a File object when a user selects a file. Your Angular component stores that object, places it in a FormData instance, and sends the form data to an API endpoint.

FormData is important because files are binary data. It creates a request using multipart/form-data, the standard request format that servers use for form submissions containing files.

In Angular 5, use HttpClient from @angular/common/http. It replaces the older Http service and supports typed responses and upload-progress events.

A successful upload still requires a backend endpoint such as POST /api/uploads. Angular can select and transmit the file, but the server must validate it, store it, and return a response.

Think of the file input as a customer choosing a package at a shipping desk.

• The <input type="file"> lets the customer choose the package.
• The browser gives Angular a File object: the package plus details such as its name, size, and type.
• FormData is the shipping box and label.
• HttpClient is the delivery service that sends the box to the server.
• The backend is the warehouse that receives and stores the package.

Selecting a file does not upload it automatically. Uploading happens only when your code sends the HTTP request.

The core flow is:

selectedFile: File | null = null;

onFileSelected(event: Event): void {
  const input = event.target as HTMLInputElement;
  this.selectedFile = input.files?.[0] ?? null;
}

upload(): void {
  if (!this.selectedFile) {
    return;
  }

  const formData = new FormData();
  formData.append('file', this.selectedFile, this.selectedFile.name);

  this.http.post('/api/uploads', formData).subscribe();
}

Template:

< = ()=>

  Upload

Consider this example:

onFileSelected(event: Event): void {
  const input = event.target as HTMLInputElement;
  this.selectedFile = input.files?.[0] ?? null;
}

upload(): void {
  if (!this.selectedFile) {
    this.message = 'Choose a file first.';
    return;
  }

  const data = new FormData();
  data.append('file', this.selectedFile, this.selectedFile.name);

  this.http.post('/api/uploads', data).subscribe({
    next: () => this.message = 'Upload complete.',
    :  . = 
  });
}

File uploads appear in many applications:

• Profile settings: upload an avatar or company logo.
• Support portals: attach screenshots, logs, or documents to a ticket.
• Content management systems: upload images, PDFs, and downloadable resources.
• Business workflows: submit invoices, receipts, contracts, or spreadsheets.
• Data import tools: upload CSV files for processing.
• Messaging applications: share images and attachments.

In each case, validate both in the browser for user feedback and on the server for security. Client-side checks can be bypassed, so the server is the final authority.

In production Angular applications, file upload code commonly follows these patterns:

• Keep HTTP calls in a service. Components manage the user interface; an UploadService sends requests.
• Use guard clauses. Return early when no file is selected or validation fails.
• Validate before uploading. Check size and allowed file types to give fast feedback.
• Show upload state. Disable repeated clicks while uploading and display success or failure messages.
• Track progress for larger files. Send requests with observe: 'events' and reportProgress: true.
• Let the server generate final file names. Do not trust a client-provided filename as a safe storage path.
• Handle errors explicitly. Network failure, unauthorized access, oversized files, and unsupported types all need useful messages.

A service-based upload method can look like this:

upload(file: File) {
  const formData = new FormData();
  formData.append('file', file, file.name);

  return this.http.post('/api/uploads', formData);
}

The component subscribes to that returned observable and updates its view state.

Setting the Content-Type header manually

This is a frequent mistake:

// Incorrect for FormData
const headers = new HttpHeaders({
  'Content-Type': 'multipart/form-data'
});

this.http.post('/api/uploads', formData, { headers });

Do not manually set Content-Type when sending FormData. The browser adds multipart/form-data plus a required boundary value. Set no content-type header unless your API has another specific requirement.

Sending the input value instead of the file

// Incorrect: this is usually a browser-protected path-like string, not file data.
const value = (event.target as HTMLInputElement).value;

Use input.files?.[0], which is the actual File object.

Forgetting to import HttpClientModule

// Read one selected file
const input = event.target as HTMLInputElement;
const file = input.files?.[0] ?? null;

// Build multipart form data
const data = new FormData();
data.append('file', file, file.name);

// Send it
this.http.post('/api/uploads', data).subscribe();

• Use <input type="file"> to open the browser file picker.
• Read selected files from input.files, not input.value.
• Use FormData for file requests.
• The append() field name must match what the server expects.
• Import HttpClientModule once in the Angular module.
• Do not manually set Content-Type for FormData.
• Use as a helpful UI hint, not as security.

Does Angular 5 have a built-in file upload component?

Angular uses the browser's standard <input type="file">. You build the upload behavior by sending the chosen File with HttpClient and FormData.

Do I need an external Angular file upload library?

Not for standard uploads. A library can help with drag-and-drop, queues, retries, or advanced UI, but native browser APIs are enough for basic uploads.

Why is my backend receiving no file?

Check that you append the file to FormData, that the field name matches the backend expectation, and that you do not manually override the multipart Content-Type header.

Can I upload multiple files in Angular?

Yes. Add multiple to the input, convert input.files to an array, and append each file to FormData.

How do I restrict uploads to images?

Use accept="image/*" on the input and validate the selected file in TypeScript. Also enforce image validation on the server.

Can I show upload progress with Angular HttpClient?

Yes. Send the request with reportProgress: true and observe: 'events', then calculate a percentage from events.

• Angular HttpClient — sends HTTP requests and receives API responses.
• FormData — packages files and ordinary form fields as multipart data.
• HTML file input — provides the browser-native file picker.
• Angular event binding — (change) detects when a user selects a file.
• TypeScript type assertions — helps treat event.target as an HTMLInputElement.
• RxJS Observables — represent the asynchronous upload request and its result.
• HTTP error handling — displays useful feedback when an upload request fails.
• Server-side validation — protects the application when receiving untrusted files.