File API

Akash Pattnaik - Mar 21 - - Dev Community

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

File API

The File API allows web applications to interact with files on the user's device. It enables reading file content, accessing metadata, and handling file uploads, enhancing user experience with file management in web applications.

Example Code (Not a part of explanation)

// Reading file content using File API
const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (event) => {
  // Get the selected file
  const file = event.target.files[0];

  // Create a FileReader object
  const reader = new FileReader();

  // Define what to do when file is loaded
  reader.onload = (event) => {
    // Retrieve the file content
    const fileContent = event.target.result;
    console.log('File content:', fileContent);
  };

  // Read the file as text
  reader.readAsText(file);
});
Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .