0Pricing
React Academy · Lesson

File Input & Reading File Data

Handle , read file metadata, and preview images with FileReader.

Welcome

In this lesson you will handle file inputs in React, read file metadata, preview selected images, and use the FileReader API to process file contents.

The File Input Element

The `` element cannot be controlled by React's value prop — it is always uncontrolled. Read the selected file from `e.target.files[0]` in the onChange handler.
function FileInput() {
  const handleChange = (e) => {
    const file = e.target.files[0];
    console.log(file.name, file.size, file.type);
  };
  return <input type="file" onChange={handleChange} />;
}

All lessons in this course

  1. Uncontrolled Inputs with useRef
  2. File Input & Reading File Data
  3. Drag & Drop File Upload UI
  4. Uploading Files to a Backend API
← Back to React Academy