ReactJS Program to File Upload Preview Validate with Explanation
ReactJS
Hard
Forms & Validation
19 views
1 min read
93 words
This problem helps you practice core ReactJS fundamentals in a practical way. It builds intuition around preview, file, upload. Let’s break it down step by step so you can implement it confidently.
Problem Statement
Build an image upload input that previews the image and validates size.
Input Format
No input.
Output Format
Render a React component.
Constraints
Use FileReader for preview and show error when file is too large.
Code Solution
This explanation is written for learning purposes and to help beginners understand the concept clearly.
import React, { useState } from 'react';
export default function App() {
const [src, setSrc] = useState('');
const [error, setError] = useState('');
function onFile(e) {
const file = e.target.files && e.target.files[0];
if (!file) return;
if (file.size > 300 * 1024) {
setSrc('');
setError('File too large. Max 300KB');
return;
}
setError('');
const reader = new FileReader();
reader.onload = () => setSrc(String(reader.result || ''));
reader.readAsDataURL(file);
}
return (
<div style={{ padding: 16, width: 560 }}>
<h2 style={{ marginTop: 0 }}>meetcode avatar</h2>
<input type='file' accept='image/*' onChange={onFile} />
{error ? <div style={{ marginTop: 10, color: '#c1121f' }}>{error}</div> : null}
{src ? <img src={src} alt='Preview' style={{ marginTop: 12, width: 160, height: 160, objectFit: 'cover', borderRadius: '50%', border: '1px solid #eee' }} /> : <div style={{ marginTop: 12, color: '#555' }}>No image selected.</div>}
</div>
);
}
Output Example
No sample I/O is provided for this question.
Common Mistakes
- Misreading input/output format.
- Not handling constraints and edge cases.
- Off-by-one errors in loops.
- Forgetting to reset variables between test cases (if any).
Solution Guide
Problem
Build an image upload input that previews the image and validates size.
Input / Output
Output
Render a React component.
Constraints
Use FileReader for preview and show error when file is too large.
Details
Common Mistakes
- Misreading input/output format.
- Not handling constraints and edge cases.
- Off-by-one errors in loops.
- Forgetting to reset variables between test cases (if any).
Official Solution
import React, { useState } from 'react';
export default function App() {
const [src, setSrc] = useState('');
const [error, setError] = useState('');
function onFile(e) {
const file = e.target.files && e.target.files[0];
if (!file) return;
if (file.size > 300 * 1024) {
setSrc('');
setError('File too large. Max 300KB');
return;
}
setError('');
const reader = new FileReader();
reader.onload = () => setSrc(String(reader.result || ''));
reader.readAsDataURL(file);
}
return (
<div style={{ padding: 16, width: 560 }}>
<h2 style={{ marginTop: 0 }}>meetcode avatar</h2>
<input type='file' accept='image/*' onChange={onFile} />
{error ? <div style={{ marginTop: 10, color: '#c1121f' }}>{error}</div> : null}
{src ? <img src={src} alt='Preview' style={{ marginTop: 12, width: 160, height: 160, objectFit: 'cover', borderRadius: '50%', border: '1px solid #eee' }} /> : <div style={{ marginTop: 12, color: '#555' }}>No image selected.</div>}
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
