File Uploads को Handle करना
एक file upload input एक mail slot जैसा है — आप एक file उसमें डालते हैं और React इसे कहीं भेजने से पहले इसका नाम और size देख सकता है।
In this page:
Syntax
function handleChange(e) {
const file = e.target.files[0];
// use file.name, file.size, file.type
}
<input type="file" onChange={handleChange} />एक Selected File की Info पढ़ना
एक file input का onChange handler एक event receive करता है जिसका target.files एक FileList है जिसमें चुनी गई file(s) हैं। कुछ भी upload किए बिना, आप immediately इस object से file का नाम, size, और type पढ़ सकते हैं।
Note:
files[0] पहली (या सिर्फ, non-multiple input के लिए) selected file देता है।
Warning:
e.target.files खाली है अगर user file picker dialog cancel कर दे — files[0] access करने से पहले हमेशा files.length check करें।
उदाहरण: Reading a Selected File's Info
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [fileName, setFileName] = React.useState("");
const handleChange = e => {
const file = e.target.files[0];
setFileName(file ? file.name : "No file selected");
};
return <div><input type="file" onChange={handleChange} /><p>{fileName}</p></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Upload से पहले एक Image Preview करना
URL.createObjectURL(file) चुनी गई file के data को सीधे point करने वाला एक temporary local URL generate करता है, आपको एक <img> preview तुरंत दिखाने देते हुए इसे server पर upload करने की ज़रूरत के बिना पहले।
Note:
Object URL को URL.revokeObjectURL() से revoke करें जब इसकी ज़रूरत न हो, browser memory free करने के लिए।
Warning:
Object URLs सिर्फ तब तक काम करते हैं जब तक page open है — उन्हें permanent links के रूप में save या share नहीं किया जा सकता।
उदाहरण: Previewing an Image Before Upload
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [preview, setPreview] = React.useState(null);
const handleChange = e => {
const file = e.target.files[0];
if (file) setPreview(URL.createObjectURL(file));
};
return (
<div>
<input type="file" accept="image/*" onChange={handleChange} />
{preview && <img src={preview} width="100" />}
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>File Inputs हमेशा Uncontrolled क्यों होते हैं
Browsers JavaScript को एक file input की value set करने की अनुमति नहीं देते, एक security measure के रूप में websites को यह pretend करने से रोकने के लिए कि files user द्वारा 'चुनी' गई थीं।
इसकी वजह से, file inputs React में कभी value prop नहीं लेते — आप सिर्फ user ने क्या चुना वह पढ़ सकते हैं, onChange या एक ref के through।
Note:
एक file input clear करने के लिए, इसे एक ref के through reset करें (inputRef.current.value = '') इसे state से control करने की कोशिश करने के बजाय।
Warning:
input.value = 'somefile.png' की कोशिश करना हर modern browser में एक security error throw करता है — यह एक hard, unavoidable browser restriction है।
उदाहरण: Why File Inputs Are Always Uncontrolled
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const inputRef = React.useRef(null);
const clearFile = () => { inputRef.current.value = ""; };
return (
<div>
<input type="file" ref={inputRef} />
<button onClick={clearFile}>Clear Selection</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- एक file input की value directly set करने की कोशिश करना, जिसे browsers security reasons के लिए block करते हैं।
- यह भूल जाना कि e.target.files एक FileList है, plain array नहीं — Array.from() या indexing चाहिए।
- File चुने जाने के बाद कोई feedback (file name, preview, progress) न दिखाना, users को confused छोड़ते हुए कि यह काम किया या नहीं।
चैप्टर सारांश
- File inputs React में हमेशा uncontrolled होते हैं — आप इनकी value programmatically set नहीं कर सकते।
- onChange event का e.target.files selected file(s) की एक FileList देता है।
- आप file metadata (name, size, type) immediately पढ़ सकते हैं, कुछ भी upload किए बिना।
- FileReader या URL.createObjectURL file server को भेजे जाने से पहले एक image preview generate कर सकते हैं।
ब्राउज़र सपोर्ट
कोई React-version restriction नहीं — standard File/FileReader Web APIs पर relies करता है, जो सभी modern browsers में supported हैं।
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: