HTML FileUpload files Property: Accessing Uploaded Files

HTML FileUpload files Property: Accessing Uploaded Files

The HTML FileUpload files property provides a way to access the list of files selected by the user through an <input type="file"> element. This property returns a FileList object, which contains File objects representing each selected file. It is a read-only property that allows you to inspect and manipulate the uploaded files using JavaScript.

What is the files Property?

The files property is an essential part of handling file uploads in HTML forms. It allows you to:

• Access the list of files selected by the user.
• Get information about each file, such as its name, size, and type.
• Perform actions on the files, such as uploading them to a server or displaying previews.

Syntax

The syntax to access the files property is as follows:

const fileList = document.getElementById("fileInput").files;

FileList Object

The files property returns a FileList object, which has the following properties and methods:

File Object

Each file in the FileList is represented by a File object, which has the following properties:

Examples

Let’s explore some examples of how to use the files property to access and manipulate uploaded files.

Basic Example: Displaying File Information

This example shows how to access the selected files and display their information (name, size, and type) in a list.

<input type="file" id="fileInput1" multiple />
<ul id="fileList1"></ul>

<script>
  const fileInput1 = document.getElementById("fileInput1");
  const fileList1 = document.getElementById("fileList1");

  fileInput1.addEventListener("change", function () {
    fileList1.innerHTML = ""; // Clear previous list

    const files = fileInput1.files;
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const listItem = document.createElement("li");
      listItem.textContent = `Name: ${file.name}, Size: ${file.size} bytes, Type: ${file.type}`;
      fileList1.appendChild(listItem);
    }
  });
</script>

In this example, when the user selects files, the change event is triggered. The script then iterates through the FileList, creating a list item for each file and displaying its name, size, and type.

Displaying Image Previews

This example demonstrates how to display a preview of selected image files.

<input type="file" id="imageInput2" accept="image/*" multiple />
<div id="imagePreview2"></div>

<script>
  const imageInput2 = document.getElementById("imageInput2");
  const imagePreview2 = document.getElementById("imagePreview2");

  imageInput2.addEventListener("change", function () {
    imagePreview2.innerHTML = ""; // Clear previous previews

    const files = imageInput2.files;
    for (let i = 0; i < files.length; i++) {
      const file = files[i];

      if (file.type.startsWith("image/")) {
        const reader = new FileReader();

        reader.onload = function (e) {
          const img = document.createElement("img");
          img.src = e.target.result;
          img.style.maxWidth = "100px";
          img.style.maxHeight = "100px";
          imagePreview2.appendChild(img);
        };

        reader.readAsDataURL(file);
      }
    }
  });
</script>

Here, the script listens for the change event on the file input. For each selected file, it checks if the file type starts with "image/". If it is an image, a FileReader is used to read the file as a data URL, which is then used as the src attribute for an <img> element, displaying the image preview.

Uploading Files via AJAX

This example demonstrates how to upload selected files to a server using AJAX (Asynchronous JavaScript and XML).

<input type="file" id="fileInput3" multiple />
<button id="uploadButton3">Upload</button>
<div id="uploadStatus3"></div>

<script>
  const fileInput3 = document.getElementById("fileInput3");
  const uploadButton3 = document.getElementById("uploadButton3");
  const uploadStatus3 = document.getElementById("uploadStatus3");

  uploadButton3.addEventListener("click", function () {
    const files = fileInput3.files;
    const formData = new FormData();

    for (let i = 0; i < files.length; i++) {
      formData.append("files", files[i]);
    }

    fetch("/upload", {
      method: "POST",
      body: formData,
    })
      .then((response) => response.text())
      .then((data) => {
        uploadStatus3.textContent = data;
      })
      .catch((error) => {
        uploadStatus3.textContent = "Upload failed: " + error;
      });
  });
</script>

In this example, when the user clicks the “Upload” button, the script creates a FormData object and appends each selected file to it. The fetch API is then used to send a POST request to the /upload endpoint, with the FormData object as the request body. The server-side script would handle the file upload and return a response, which is then displayed in the uploadStatus element.

Limiting File Size

This example demonstrates how to limit the size of the files that can be uploaded.

<input type="file" id="fileInput4" multiple />
<ul id="fileList4"></ul>

<script>
  const fileInput4 = document.getElementById("fileInput4");
  const fileList4 = document.getElementById("fileList4");
  const maxSize = 1024 * 1024; // 1MB

  fileInput4.addEventListener("change", function () {
    fileList4.innerHTML = ""; // Clear previous list

    const files = fileInput4.files;
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const listItem = document.createElement("li");

      if (file.size > maxSize) {
        listItem.textContent = `Error: ${file.name} exceeds the maximum size of 1MB.`;
        listItem.style.color = "red";
      } else {
        listItem.textContent = `Name: ${file.name}, Size: ${file.size} bytes, Type: ${file.type}`;
      }

      fileList4.appendChild(listItem);
    }
  });
</script>

Here, the script checks the size of each file against a maximum allowed size (1MB in this case). If a file exceeds the maximum size, an error message is displayed instead of the file information.

Filtering File Types

This example shows how to filter the types of files that can be uploaded.

<input type="file" id="fileInput5" multiple />
<ul id="fileList5"></ul>

<script>
  const fileInput5 = document.getElementById("fileInput5");
  const fileList5 = document.getElementById("fileList5");
  const allowedTypes = ["image/jpeg", "image/png", "application/pdf"];

  fileInput5.addEventListener("change", function () {
    fileList5.innerHTML = ""; // Clear previous list

    const files = fileInput5.files;
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const listItem = document.createElement("li");

      if (!allowedTypes.includes(file.type)) {
        listItem.textContent = `Error: ${file.name} is not an allowed file type.`;
        listItem.style.color = "red";
      } else {
        listItem.textContent = `Name: ${file.name}, Size: ${file.size} bytes, Type: ${file.type}`;
      }

      fileList5.appendChild(listItem);
    }
  });
</script>

In this example, the script checks the type of each file against a list of allowed MIME types. If a file is not of an allowed type, an error message is displayed.

Real-World Applications

The files property is essential in many real-world applications, including:

• File Upload Forms: Allowing users to upload documents, images, and other files to a server.
• Image Editors: Enabling users to load images for editing and manipulation.
• Video Sharing Platforms: Providing a way for users to upload videos.
• Document Management Systems: Allowing users to upload and manage documents.

Important Considerations

• Security: Always validate and sanitize uploaded files on the server-side to prevent security vulnerabilities such as cross-site scripting (XSS) and remote code execution (RCE).
• File Size Limits: Enforce file size limits to prevent abuse and ensure efficient use of server resources.
• File Type Validation: Validate file types to ensure that only allowed types of files are uploaded.
• Asynchronous Operations: Use asynchronous operations (e.g., FileReader, fetch) to prevent blocking the main thread and ensure a responsive user interface.

Browser Support

The files property is supported by all modern web browsers. Here’s a general overview:

• Chrome: Supported
• Edge: Supported
• Firefox: Supported
• Safari: Supported
• Opera: Supported

Conclusion

The HTML FileUpload files property is a powerful tool for accessing and manipulating uploaded files in web applications. By using this property, you can easily get information about selected files, display previews, upload files to a server, and implement various file validation and filtering techniques. Understanding how to use the files property is essential for building robust and user-friendly file upload interfaces. 🚀