Angular & JavaScript | Open Blob URL View PDF and Images in New Tab

August 31, 2020 Jolly.Exe

In this JavaScript quick tutorial, we’ll learn how to select a file using a File input control to convert it into a Base64 URL, also add a View button to preview the selected file by opening in the new Chrome tab by creating a BLOB url.

Article compatible with Angular version starting 4+ up to latest version including 6,7,8,9,10,11 and 12.

In the HTML forms, where we have upload document or image functionality, we usually convert the selected file into a Base64 encoded url to upload it as a string to the remote server, where the base64 string is converted into a file and saved on remote disk space.

We have already discussed how to convert the selected file into a Base64 string URL here, you can check the complete tutorial in Angular.

While filling and selecting the files into form, we may need to provide a preview link using which we can display the selected file to the user in a new browser tab. This can be easily done on the Client-end by converting the File into a Blob object URL.

Summary of content

1) What is Blob?

2) Adding a Form

3) Adding JavaScript

3.1) # Create a Blob URL

4) Final onchange function

5) Angular Application

6) Dealing with Unsafe URL’s in Angular

7) Make Unsafe URLs Trusted

8) Conclusion

9) Related Popular Tutorials

We’ll create a sample for a simple JavaScript application and Angular as well. In Angular application, we face unsafe link scenarios which can be resolved by URL sanitization.

What is Blob?

Binary Large Object(Blob) is an Object used to store or holding data in a browser. Blobs can be used to read then save data on disk.

A Blob object has properties to represent the size and MIME type of stored file. This can be used as a normal file.

Adding a Form

Let’s create a simple HTML form with input control of type file. This file control is having a change event handler to convert the selected file into a base64 string. The onchange event will take care to convert the file into base64 anf Blog.

<form onsubmit="myFunction(event)">

    <label>Select a File</label>
    <input type="file" name="myfile" onchange="fileChangeEvent(event)">
    <div id="selected-file">
    </div>
    <button>Upload</button>

</form>
Copy

Adding JavaScript

Now add the fileChangeEvent() function which will do the main task for fetching the Base64 URL and Blob based URL.

The FileReader() function is used to read files and then load in the browser’s memory. It returns a callback method onloadinside of which we’ll get selected file information.

function fileChangeEvent(fileInput) {

  if (fileInput.target.files && fileInput.target.files[0]) {
    const reader = new FileReader();
    reader.onload = (e) => {
      
        ....
        ....

    };
    reader.readAsDataURL(fileInput.target.files[0]);
  }
}
Copy

Inside the reader.onload, we’ll get  Base64 encoded string URL

// Base64 String
console.log(e.target.result);
Copy

Ad by Valueimpression

# Create a Blob URL

To create a Blob we call new Blob()then call window.URL.createObjectURL() to convert it into a URL.

// Create a Blog object for selected file & define MIME type
var blob = new Blob(fileInput.target.files, { type: fileInput.target.files[0].type });

// Create Blog URL 
 var url = window.URL.createObjectURL(blob);
Copy

Final onchange function

After the file is selected by a user, we’ll append the selected inside the