d to using a DOM [ ` File `
](/en-US/docs/Web/API/File) object, including local files on the user's
computer.

When you have a [ ` File ` ](/en-US/docs/Web/API/File) object you'd like to
reference by URL from HTML, you can create an object URL for it like this:

js

    
    
    const objectURL = window.URL.createObjectURL(fileObj);
    

The object URL is a string identifying the [ ` File ` ](/en-
US/docs/Web/API/File) object. Each time you call [ ` URL.createObjectURL() `
](/en-US/docs/Web/API/URL/createObjectURL_static "URL.createObjectURL\(\)") ,
a unique object URL is created even if you've created an object URL for that
file already. Each of these must be released. While they are released
automatically when the document is unloaded, if your page uses them
dynamically you should release them explicitly by calling [ `
URL.revokeObjectURL() ` ](/en-US/docs/Web/API/URL/revokeObjectURL_static
"URL.revokeObjectURL\(\)") :

js

    
    
    URL.revokeObjectURL(objectURL);
    

##  Example: Using object URLs to display images

This example uses object URLs to display image thumbnails. In addition, it
displays other file information including their names and sizes.

The HTML that presents the interface looks like this:

html

    
    
    <input
      type="file"
      id="fileElem"
      multiple
      accept="image/*"
      style="display:none" />
    <a href="#" id="fileSelect">Select some files</a>
    <div id="fileList">
      <p>No files selected!</p>
    </div>
    

This establishes our file [ ` <input> ` ](/en-US/docs/Web/HTML/Element/input)
element as well as a link that invokes the file picker (since we keep the file
input hidden to prevent that less-than-attractive user interface from being
displayed). This is explained in the section  Using hidden file input elements
using the click() method  , as is the method that invokes the file picker.

The ` handleFiles() ` method follows:

js

    
    
    const fileSelect = document.getElementById("fileSelect"),
      fileElem = document.getElementById("fileElem"),
      fileList = document.getElementById("fileList");
    
    fileSelect.addEventListener(
      "click",
      (e) => {
        if (fileElem) {
          fileElem.click();
        }
        e.preventDefault(); // prevent navigation to "#"
      },
      false,
    );
    
    fileElem.addEventListener("change", handleFiles, false);
    
    function handleFiles() {
      if (!this.files.length) {
        fileList.innerHTML = "<p>No files selected!</p>";
      } else {
        fileList.innerHTML = "";
        const list = document.createElement("ul");
        fileList.appendChild(list);
        for (let i = 0; i < this.files.length; i++) {
          const li = document.createElement("li");
          list.appendChild(li);
    
          const img = document.createElement("img");
          img.src = URL.createObjectURL(this.files[i]);
          img.height = 60;
          img.onload = () => {
            URL.revokeObjectURL(img.src);
          };
          li.appendChild(img);
          const info = document.createElement("span");
          info.innerHTML = `${this.files[i].name}: ${this.files[i].size} bytes`;
          li.appendChild(info);
        }
      }
    }
    

This starts by fetching the URL of the [ ` <div> ` ](/en-
US/docs/Web/HTML/Element/div) with the ID ` fileList ` . This is the block
into which we'll insert our file list, including thumbnails.

If the [ ` FileList ` ](/en-US/docs/Web/API/FileList) object passed to `
handleFiles() ` is ` null ` , we set the inner HTML of the block to display
"No files selected!". Otherwise, we start building our file list, as follows:

  1. A new unordered list ( [ ` <ul> ` ](/en-US/docs/Web/HTML/Element/ul) ) element is created. 
  2. The new list element is inserted into the [ ` <div> ` ](/en-US/docs/Web/HTML/Element/div) block by calling its [ ` Node.appendChild() ` ](/en-US/docs/Web/API/Node/appendChild) method. 
  3. For each [ ` File ` ](/en-US/docs/Web/AP