उपयोगकर्ता के स्थानीय डिवाइस पर फ़ाइलें चुनना और उनसे इंटरैक्ट करना, वेब की सबसे ज़्यादा इस्तेमाल की जाने वाली सुविधाओं में से एक है. इससे उपयोगकर्ता, फ़ाइलें चुनकर उन्हें सर्वर पर अपलोड कर सकते हैं. उदाहरण के लिए, फ़ोटो शेयर करते समय या टैक्स के दस्तावेज़ सबमिट करते समय. इससे साइटों को, नेटवर्क पर डेटा ट्रांसफ़र किए बिना, उसे पढ़ने और उसमें बदलाव करने की अनुमति मिलती है. इस पेज पर फ़ाइलों के साथ इंटरैक्ट करने के लिए JavaScript का इस्तेमाल करने का तरीका बताया गया है.
नया File System Access API
File System Access API की मदद से, उपयोगकर्ता के लोकल सिस्टम पर मौजूद फ़ाइलों और डायरेक्ट्री में सेव किया गया डेटा पढ़ा और उसमें बदलाव किया जा सकता है. यह सुविधा, Chromium पर आधारित ज़्यादातर ब्राउज़र, जैसे कि Chrome और Edge में उपलब्ध है. इसके बारे में ज़्यादा जानने के लिए, फ़ाइल सिस्टम ऐक्सेस एपीआई देखें.
File System Access API सभी ब्राउज़र के साथ काम नहीं करता. इसलिए, हमारा सुझाव है कि आप browser-fs-access का इस्तेमाल करें. यह एक हेल्पर लाइब्रेरी है, जो जहां भी उपलब्ध होती है वहां नए एपीआई का इस्तेमाल करती है. अगर एपीआई उपलब्ध नहीं होता है, तो यह पुराने तरीकों का इस्तेमाल करती है.
फ़ाइलों के साथ क्लासिक तरीके से काम करना
इस गाइड में, लेगसी JavaScript तरीकों का इस्तेमाल करके फ़ाइलों के साथ इंटरैक्ट करने का तरीका बताया गया है.
फ़ाइलें चुनें
फ़ाइलें चुनने के दो मुख्य तरीके हैं: एचटीएमएल इनपुट एलिमेंट का इस्तेमाल करना और खींचकर छोड़ने वाले ज़ोन का इस्तेमाल करना.
एचटीएमएल इनपुट एलिमेंट
उपयोगकर्ताओं के लिए, फ़ाइलें चुनने का सबसे आसान तरीका, <input type="file">
एलिमेंट का इस्तेमाल करना है. यह एलिमेंट, सभी मुख्य ब्राउज़र पर काम करता है. इस पर क्लिक करने पर, उपयोगकर्ता अपने ऑपरेटिंग सिस्टम के पहले से मौजूद फ़ाइल चुनने वाले यूज़र इंटरफ़ेस का इस्तेमाल करके, एक फ़ाइल या multiple
एट्रिब्यूट शामिल होने पर एक से ज़्यादा फ़ाइलें चुन सकता है. जब उपयोगकर्ता कोई फ़ाइल या फ़ाइलें चुन लेता है, तो एलिमेंट का change
इवेंट ट्रिगर होता है. event.target.files
से फ़ाइलों की सूची ऐक्सेस की जा सकती है. यह सूची, FileList
ऑब्जेक्ट होती है.
FileList
का हर आइटम एक File
ऑब्जेक्ट है.
<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="file-selector" multiple>
<script>
const fileSelector = document.getElementById('file-selector');
fileSelector.addEventListener('change', (event) => {
const fileList = event.target.files;
console.log(fileList);
});
</script>
इस उदाहरण में, उपयोगकर्ता अपने ऑपरेटिंग सिस्टम में पहले से मौजूद, फ़ाइल चुनने वाले यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करके कई फ़ाइलें चुनता है. इसके बाद, वह चुनी गई हर फ़ाइल को कंसोल में लॉग करता है.
उपयोगकर्ताओं को चुनने के लिए, फ़ाइलों के टाइप सीमित करना
कुछ मामलों में, हो सकता है कि आप उपयोगकर्ताओं को चुनने के लिए, फ़ाइलों के टाइप सीमित करना चाहें. उदाहरण के लिए, इमेज में बदलाव करने वाले ऐप्लिकेशन में सिर्फ़ इमेज को स्वीकार किया जाना चाहिए, न कि टेक्स्ट फ़ाइलों को. फ़ाइल टाइप से जुड़ी पाबंदियां सेट करने के लिए, इनपुट एलिमेंट में accept
एट्रिब्यूट जोड़ें. इससे यह तय किया जा सकता है कि कौनसे फ़ाइल टाइप स्वीकार किए जाएं:
<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">
पसंद के मुताबिक खींचें और छोड़ें
कुछ ब्राउज़र में, <input type="file">
एलिमेंट एक ड्रॉप टारगेट भी होता है. इससे उपयोगकर्ता, आपके ऐप्लिकेशन में फ़ाइलों को खींचकर छोड़ सकते हैं. हालांकि, यह ड्रॉप टारगेट छोटा होता है और इसका इस्तेमाल करना मुश्किल हो सकता है. इसके बजाय, <input type="file">
एलिमेंट का इस्तेमाल करके मुख्य सुविधाएं उपलब्ध कराने के बाद, आपके पास एक बड़ा और पसंद के मुताबिक बनाया गया 'खींचें और छोड़ें' प्लैटफ़ॉर्म उपलब्ध कराने का विकल्प होता है.
ड्रॉप ज़ोन चुनें
ड्रॉप करने की जगह, आपके ऐप्लिकेशन के डिज़ाइन पर निर्भर करती है. हो सकता है कि आप सिर्फ़ विंडो के कुछ हिस्से को ड्रॉप-सर्फ़ेस के तौर पर इस्तेमाल करना चाहें. हालांकि, आपके पास पूरी विंडो का इस्तेमाल करने का विकल्प भी है.
इमेज कंप्रेस करने वाले ऐप्लिकेशन Squoosh की मदद से, उपयोगकर्ता किसी इमेज को विंडो में कहीं भी खींचकर छोड़ सकता है. साथ ही, <input type="file">
एलिमेंट को चालू करने के लिए, कोई इमेज चुनें पर क्लिक कर सकता है. ड्रॉप ज़ोन के तौर पर जो भी चुनें, पक्का करें कि उपयोगकर्ता को यह साफ़ तौर पर पता हो कि वह उस प्लैटफ़ॉर्म पर फ़ाइलें खींचकर छोड़ सकता है.
ड्रॉप ज़ोन तय करना
किसी एलिमेंट को ड्रैग-एंड-ड्रॉप ज़ोन के तौर पर चालू करने के लिए, दो इवेंट के लिए लिसनर बनाएं: dragover
और drop
.
dragover
इवेंट, ब्राउज़र यूज़र इंटरफ़ेस (यूआई) को अपडेट करता है, ताकि यह विज़ुअल तौर पर दिखाया जा सके कि खींचकर छोड़ने की कार्रवाई से फ़ाइल की कॉपी बन रही है. उपयोगकर्ता के फ़ाइलों को प्लैटफ़ॉर्म पर छोड़ने के बाद, drop
इवेंट ट्रिगर होता है. इनपुट एलिमेंट की तरह ही, event.dataTransfer.files
से फ़ाइलों की सूची ऐक्सेस की जा सकती है. यह सूची, FileList
ऑब्जेक्ट होती है. FileList
में मौजूद हर आइटम, एक File
ऑब्जेक्ट है.
const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragover', (event) => {
event.stopPropagation();
event.preventDefault();
// Style the drag-and-drop as a "copy file" operation.
event.dataTransfer.dropEffect = 'copy';
});
dropArea.addEventListener('drop', (event) => {
event.stopPropagation();
event.preventDefault();
const fileList = event.dataTransfer.files;
console.log(fileList);
});
event.stopPropagation()
और event.preventDefault()
ब्राउज़र के डिफ़ॉल्ट बिहेवियर को रोकें और इसके बजाय अपना कोड चलाएं. इनके बिना, ब्राउज़र आपके पेज से दूसरे पेज पर चला जाएगा और ब्राउज़र विंडो में उपयोगकर्ता की डाली गई फ़ाइलें खोल देगा.
लाइव डेमो देखने के लिए, पसंद के मुताबिक खींचें और छोड़ें लेख पढ़ें.
डायरेक्ट्री के बारे में क्या?
माफ़ करें, JavaScript का इस्तेमाल करके किसी डायरेक्ट्री को ऐक्सेस करने का कोई अच्छा तरीका नहीं है.
<input type="file">
एलिमेंट पर मौजूद webkitdirectory
एट्रिब्यूट की मदद से, उपयोगकर्ता कोई डायरेक्ट्री या डायरेक्ट्री चुन सकता है. यह सुविधा ज़्यादातर मुख्य ब्राउज़र में काम करती है. हालांकि, यह Android के लिए Firefox और iOS पर Safari में काम नहीं करती.
अगर खींचकर छोड़ने की सुविधा चालू है, तो हो सकता है कि कोई उपयोगकर्ता किसी डायरेक्ट्री को खींचकर, छोड़ने के लिए बने ज़ोन में छोड़ने की कोशिश करे. जब ड्रॉप इवेंट ट्रिगर होता है, तो इसमें डायरेक्ट्री के लिए File
ऑब्जेक्ट शामिल होता है. हालांकि, यह डायरेक्ट्री में मौजूद किसी भी फ़ाइल का ऐक्सेस नहीं देता.
फ़ाइल का मेटाडेटा पढ़ें
File
ऑब्जेक्ट में फ़ाइल का मेटाडेटा होता है. ज़्यादातर ब्राउज़र, फ़ाइल का नाम, फ़ाइल का साइज़, और MIME टाइप की जानकारी देते हैं. हालांकि, प्लैटफ़ॉर्म के हिसाब से, अलग-अलग ब्राउज़र अलग या ज़्यादा जानकारी दे सकते हैं.
function getMetadataForFileList(fileList) {
for (const file of fileList) {
// Not supported in Safari for iOS.
const name = file.name ? file.name : 'NOT SUPPORTED';
// Not supported in Firefox for Android or Opera for Android.
const type = file.type ? file.type : 'NOT SUPPORTED';
// Unknown cross-browser support.
const size = file.size ? file.size : 'NOT SUPPORTED';
console.log({file, name, type, size});
}
}
input-type-file
के डेमो में, इसे काम करते हुए देखा जा सकता है.
फ़ाइल का कॉन्टेंट पढ़ना
File
ऑब्जेक्ट के कॉन्टेंट को मेमोरी में पढ़ने के लिए, FileReader
का इस्तेमाल करें. FileReader
को किसी फ़ाइल को कलेक्शन बफ़र, डेटा यूआरएल या टेक्स्ट के तौर पर पढ़ने के लिए कहा जा सकता है:
function readImage(file) {
// Check if the file is an image.
if (file.type && !file.type.startsWith('image/')) {
console.log('File is not an image.', file.type, file);
return;
}
const reader = new FileReader();
reader.addEventListener('load', (event) => {
img.src = event.target.result;
});
reader.readAsDataURL(file);
}
यह उदाहरण, उपयोगकर्ता से मिले File
को पढ़ता है. इसके बाद, उसे डेटा यूआरएल में बदलता है और img
एलिमेंट में इमेज दिखाने के लिए, उस डेटा यूआरएल का इस्तेमाल करता है.
उपयोगकर्ता ने कोई इमेज फ़ाइल चुनी है, इसकी पुष्टि करने का तरीका जानने के लिए, read-image-file
का डेमो देखें.
पढ़ी गई फ़ाइल की प्रोग्रेस पर नज़र रखना
बड़ी फ़ाइलों को पढ़ते समय, उपयोगकर्ता को यह बताने में मदद मिल सकती है कि
कॉन्टेंट को कितना पढ़ा गया है. इसके लिए, FileReader
से मिले progress
इवेंट का इस्तेमाल करें. progress
इवेंट में दो प्रॉपर्टी होती हैं:
loaded
(रीड की गई संख्या) और total
(रीड की जाने वाली संख्या).
function readFile(file) {
const reader = new FileReader();
reader.addEventListener('load', (event) => {
const result = event.target.result;
// Do something with result
});
reader.addEventListener('progress', (event) => {
if (event.loaded && event.total) {
const percent = (event.loaded / event.total) * 100;
console.log(`Progress: ${Math.round(percent)}`);
}
});
reader.readAsDataURL(file);
}
Unsplash से ली गई विंसेंट बोटा की हीरो इमेज