File Upload with Preview

Question

Allow users to upload an image and preview it before submitting.

Accepted Answer

import './index.css'; import React, { useState } from 'react'; function App() { const [file, setFile] = useState(null); const [preview, setPreview] = useState(''); const handleChange = e => { const f = e.target.files[0]; setFile(f); setPreview(f ? URL.createObjectURL(f) : ''); }; return (

File Upload with Preview

{preview && preview

} {file &&

{file.name}

}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f5; } * { box-sizing: border-box; } .fu-demo { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; text-align: center; } .fu-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .fu-img { margin: 1rem auto; max-width: 100%; max-height: 200px; border-radius: 8px; } .fu-filename { margin-top: 0.5rem; color: #2563eb; font-weight: 600; }