React Academy · Lesson

File Input & Reading File Data

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

File Input & Reading File Data is a free React Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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} />;
}

File Object Properties

A File object extends Blob and has: `name` (filename), `size` (bytes), `type` (MIME type like 'image/png'), and `lastModified` (timestamp). Read these before uploading or processing.

Accepting Specific File Types

Use the `accept` attribute to hint to the browser which file types to show. Combine MIME types and extensions. Always validate server-side too.

<input type="file" accept="image/png,image/jpeg,.pdf" />

Multiple File Selection

Add the `multiple` attribute to allow selecting multiple files. `e.target.files` returns a FileList — convert it to an array with `Array.from()` to use array methods.

<input type="file" multiple />

const files = Array.from(e.target.files);

Previewing an Image with URL.createObjectURL

Create a temporary preview URL for a selected image file using `URL.createObjectURL(file)`. Remember to revoke it with `URL.revokeObjectURL` when done to free memory.

const [preview, setPreview] = useState(null);

const handleChange = (e) => {
  const file = e.target.files[0];
  if (file) setPreview(URL.createObjectURL(file));
};

useEffect(() => {
  return () => { if (preview) URL.revokeObjectURL(preview); };
}, [preview]);

{preview && <img src={preview} alt="Preview" />}

Reading File Contents with FileReader

Use the `FileReader` API to read the file's contents as text or a data URL. Call `reader.readAsText(file)` for text files or `reader.readAsDataURL(file)` for binary files like images.

const reader = new FileReader();
reader.onload = (e) => setContent(e.target.result);
reader.readAsText(file);

File Size Validation

Validate file size on the client before uploading. Reject files larger than a threshold and display an error message.

const MAX_SIZE = 5 * 1024 * 1024; // 5 MB
if (file.size > MAX_SIZE) {
  setError('File must be under 5 MB');
  return;
}

Clearing the File Input

You cannot clear a file input by setting its value (it is read-only). Instead, reset it imperatively via a ref or by changing the input's `key` prop to force remounting.

const inputRef = useRef();
const clear = () => { inputRef.current.value = ''; };
<input ref={inputRef} type="file" />

Storing File References in State

Store the File object itself in state (not just the name or URL). This lets you upload the file later without re-reading it from the DOM.

const [file, setFile] = useState(null);
const handleChange = (e) => setFile(e.target.files[0] || null);

Quick Check

Which method creates a temporary URL for previewing a selected image file in the browser?

Recap

Read selected files from e.target.files. Use URL.createObjectURL for previews, FileReader for reading contents, validate size on the client, and store the File object in state for later upload.

Up Next

Next lesson: **Drag & Drop File Upload UI** — you will build a drag-and-drop zone with visual feedback using React events.

Frequently asked questions

Is the “File Input & Reading File Data” lesson free?

Yes — the full text of “File Input & Reading File Data” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “File Input & Reading File Data”?

Handle , read file metadata, and preview images with FileReader. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “File Input & Reading File Data” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy