files property

Retrieves the local image files associated with a HTML paste operation (into an editable region of a web page).

Syntax

JavaScript

fileListArray = object.files

 

Property values

Type: FileList

Remarks

When pasting HTML into an editable region of a web page (see contentEditable), referenced image URLs are generally inaccessible if they refer to a location on the local file system, resulting in broken images.

To solve this issue, the files property of the clipboardData object returns an array of zero or more File objects, one for each local image in the HTML paste operation.

Note  The files property will be null when the paste event is not running. Additionally, be aware that when event.clipboardData.files contains an image file generated from a device independent bitmap (such as from a print screen or a photo editing program), that file’s name property will contain the empty string because it does not refer to a file on the local file system.
 

Examples

A web developer may want to perform more sophisticated handling of images by replacing the default base64 encoding with object URLs or blobs that can be handled directly by the site, as indicated by this example.

HTML
Copy 

<!DOCTYPE html>

<html>
<head>
  <title>Improved Web Paste</title>
  <style>
    #pasteZone {
      width: 75%;
      border: 1px solid black;
      padding: 1em;
    }
  </style>
</head>
<body>
  <div id="pasteZone" contenteditable="true">
    Paste in some HTML that references one or more local images (i.e., on the local file system).
  </div>
  <script>
    var blobList = [];

    document.getElementById("pasteZone").addEventListener('paste', handlePaste, false);

    function handlePaste(evt) {
      var fileList = window.clipboardData.files; // Note that window.DataTransfer.files is not applicable.

      if (!fileList) {
        console.log("fileList is null.");
        return;
      }

      for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        var url = URL.createObjectURL(file);

        if (evt.convertURL) { // Use standard if available.
          evt.convertURL(file, "specified", url);
        } else {
          evt.msConvertURL(file, "specified", url);
        }

        console.log("Local file: " + file.name + " (" + file.size + ")");
        blobList.push(file);
      } // for
    } // handlePaste
  </script>
</body>
</html>

See also

clipboardData
msConvertURL

 

 

Show: