3 Ways to Access Local Files From Web Browser

You can use the HTML APIs to browse, drag and drop or paste files

This article will discuss different ways of accessing local files in the context of uploading files to an Angular App . Those methods are also applicable to other JavaScript frameworks.

Let’s walk through these methods one by one.

Jump ahead:

• File type Input
• Drag and Drop
• Paste from Clipboard

Background

Accessing local files from a browser is a balance between features and security concerns. It is necessary, as we all need to upload files from a browser. Conversely, if browsers can access all local files without restriction, the door is wide open for attackers to launch malware from your browser.

Due to security concerns, access to local files from browsers is restricted. Web browsers (and JavaScript) can only access local files with user permission.

To standardize file access from the browser, the W3C publish the HTML5 File API in 2014. It defines how to access and upload local files with file objects in web applications. Since all modern browsers follow HTML5 standards, we have a standard programming API to manipulate files in the Angular App.

We have three approaches to accessing local files based on the HTML API. Let’s go deep into them.

File type Input

HTML File API defines the file interface as below.

The **_File_** interface provides information about files and allows JavaScript in a web page to access their content.

The following<input type="file"> represents a file select field and a “Choose file” button. This plain button allows users to access local files from a browser. We can use the accept attribute to limit the type of files to upload. In the example, we only allow users to select image files.

Unfortunately, we can’t change the style of the default file select button. The solution is to use another custom button to invoke the default button. In the sample code below, we hide the default button and style the custom button.

In the above Angular sample code, we use @ViewChild decorator to get a reference to the hidden file select button in the template. Instead of calling the click handler within the HTML template, we can invoke the hidden button click within the component class as below. This way gives a better separation between the component class and its HTML template.

1

this.fileInput.nativeElement.click();

Please note that browsers do not allow JavaScript to get the file’s real path. For security reasons, you can only get the file name instead of the full path.

Drag and Drop

Drag-and-Drop is a more intuitive way to move files into the web app. To enable it, we need to use HTML Drag and Drop interfaces .

Firstly, let’s define an HTML element to be our drop zone.

The next step is to define event handlers to capture the dropped files.

There are four events related to drag and drop files directly. They are drop, dragover, dragleave, dragenter. The most important one is drop, and the others are used to create visual effects in the drag-and-drop action.

To listen to those events, we use Angular HostListener.

As shown above, the file content data can be retrieved from event.dataTransfer.files. We must also call [preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) to turn off the browser’s default drag-and-drop handler.

In the context of Angular, you can use the @angular/cdk/drag-drop module. It provides a component called cdkDropList that you can use to create a drop zone where users can drag and drop files. Below is an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import { CdkDropList } from "@angular/cdk/drag-drop";  
  
// In template:  
<div dropDivArea (cdkDropListDropped)="fileDropped($event)">  
  <div class="file" *ngFor="let file of files" cdkDrag>  
    {{ file.name }}  
  </div>  
</div>  
  
// In component's class:  
fileDropped(event: CdkDragDrop<string[]>) {  
  // Get the dropped files  
  const files = event.item.data;  
  
  // Do something with the files  
  // ...  
}

This example creates a dropDivArea component and defines an event handler for the cdkDropListDropped event. When the user drops files into the drop zone, the fileDropped method is called and receives the dropped files as an argument. You can process these files as needed in your application.

Paste from Clipboard

Pasting files from the clipboard to the browser can be a convenient way to upload a file. For example, we can directly upload the screen clipping from the snipping tool.

The feature is possible because the “paste“ action triggers the “paste” event in the selected HTML element.

It is fairly straightforward to implement the paste functionality. Firstly, we register the paste event handler.

1

<div contenteditable="true" (paste)="onPaste($event)">

To get the file from the paste event handler, we make use of the [clipboardData](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData). It contains a file property that exposes the list of files in the clipboard.

The file content can be assigned to FormData or converted to blob/ArrayBuffer, then sent to your backend service.

The default paste behavior in the browser is to insert the contents of the clipboard into the screen’s current cursor position. We can cancel the default action by using e.preventDefault().

With Angular, we can use the Clipboard service from the @angular/cdk/clipboard module. This service provides a method called paste that allows you to get the contents of the clipboard. Below is an example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import { Clipboard } from "@angular/cdk/clipboard";  
  
constructor(private clipboard: Clipboard) {}  
  
copyFromClipboard() {  
  // Get the clipboard content  
  this.clipboard.paste().then(  
    (value: string) => {  
      // Do something with the clipboard content  
      // ...  
    },  
    (error: any) => {  
      // Handle any errors  
      // ...  
    }  
  );  
}

In the above code sample, the Clipboard service is injected into the component’s constructor. Then we use the paste method to get the contents of the clipboard. Under the hood, it makes use of the same clipboard API.

Summary

In this article, We have an overview of various approaches to accessing local files from a web browser. These approaches are:

• File type input
• Drag and Drop
• Paste within an editable HTML element

The sample stackblitz project is available here .