फ्रंटेंड इंटरव्यू: एक प्रोग्रेसिव-एन्हांसमेंट फ़ाइल इम्पोर्ट फ़्लो डिज़ाइन करें

सवाल

एक डेस्कटॉप वेब ऐप बड़ी फ़ाइलों को इम्पोर्ट करता है। यूज़र्स फ़ाइल चुनने के लिए क्लिक कर सकते हैं, फ़ाइलों को ड्रॉप ज़ोन पर ड्रैग कर सकते हैं, या ऐसे ब्राउज़र का उपयोग कर सकते हैं जो showOpenFilePicker() को सपोर्ट करता हो। फ़ीचर डिटेक्शन, फ़ॉलबैक, कैंसिलेशन, प्रोग्रेस, एक्सेसिबिलिटी, प्राइवेसी और पुनः प्रयास (रीट्राई) सहित पूरा फ्रंटेंड फ़्लो डिज़ाइन करें। बताएं कि कौन सी क्षमताएं बेसलाइन डिपेंडेंसी होने के बजाय एन्हांसमेंट (संवर्धन) हैं।

संदर्भ

एक ही इनपुट मॉडल का उपयोग करें: एक File या एक रीडेबल फ़ाइल हैंडल। UI को केवल संभावित फ़ाइलें, स्रोत (सोर्स), साइज़, प्रकार (टाइप) और स्थिति (स्टेट) प्राप्त करनी चाहिए। बेसलाइन एक दृश्यमान, लेबल्ड <input type="file"> है क्योंकि यह व्यापक रूप से उपलब्ध है; ड्रैग-एंड-ड्रॉप उसी मॉडल को तैयार करने का एक अन्य तरीका है। यदि एक सुरक्षित संदर्भ (सिक्योर कॉन्टेक्स्ट) में window.showOpenFilePicker मौजूद है, तो इसे केवल एक एन्हांसमेंट के रूप में यूज़र-क्लिक हैंडलर से उपयोग करें। यदि पिकर विफल हो जाता है, रद्द कर दिया जाता है, या अनुमति अस्वीकार कर दी जाती है, तो अपवाद (एक्सेप्शन) को सपोर्ट की कमी मानने के बजाय इनपुट पाथ को उपलब्ध रखें।

फ़्लो को idle → selected → validating → reading → uploading → complete के रूप में मॉडल करें, जिसमें cancelled और failed शाखाएं हों। एक्सटेंशन, घोषित MIME, वास्तविक साइज़ सीमाओं और व्यावसायिक प्रारूप (बिजनेस फ़ॉर्मेट) को मान्य (वैलिडेट) करें; क्लाइंट जांच तेज़ फ़ीडबैक प्रदान करती है, जबकि सर्वर को इसे फिर से वैलिडेट करना चाहिए। बड़ी फ़ाइलों को स्ट्रीम या स्लाइस के रूप में पढ़ें, AbortController के साथ पढ़ने और अपलोड करने की प्रक्रिया को रद्द करें, केवल दोबारा चलाए जा सकने वाले (रिप्लेएबल) चंक्स का पुनः प्रयास करें, और पूरे हो चुके बाइट्स के साथ एक अनुमानित मान दिखाएं।

नाम, पाथ और सामग्री यूज़र डेटा हैं। केवल आवश्यक मेटाडेटा दिखाएं और सामग्री को लॉग्स से बाहर रखें; URL.revokeObjectURL() के साथ प्रीव्यू ऑब्जेक्ट URLs को निरस्त (रिवोक) करें। ड्रॉप ज़ोन को एक कीबोर्ड और सामान्य-बटन पाथ की आवश्यकता होती है, जिसमें फ़ोकस, त्रुटियां और प्रोग्रेस सिमेंटिक तत्वों और एक लाइव रीजन के माध्यम से प्रदर्शित होते हैं। ड्रैगिंग ही एकमात्र ऑपरेशन नहीं होना चाहिए। यूज़र को बताएं कि डेटा कब अपलोड किया जाएगा, फिर कैंसिलेशन के बाद स्थानीय संदर्भों (लोकल रेफरेंसेज़) और अधूरे काम को साफ़ करें।

मुख्य कठिनाइयाँ

showOpenFilePicker() के लिए क्षणिक यूज़र सक्रियण (ट्रांजिएंट यूज़र एक्टिवेशन) की आवश्यकता होती है, इसलिए इसे टाइमर, पेज लोड या किसी विलंबित बैकग्राउंड टास्क से कॉल नहीं किया जा सकता है। यह हैंडल्स लौटाता है, जिसका अर्थ स्थायी पढ़ने की अनुमति (परमानेंट रीड परमिशन) नहीं है। फ़ीचर डिटेक्शन अनुमति की गारंटी नहीं देता है। इनपुट पर accept एक संकेत (हिंट) है, कोई सुरक्षा जांच नहीं, और File.type खाली या क्लाइंट द्वारा प्रदान किया गया हो सकता है। ड्रॉप हैंडलर्स को डिफ़ॉल्ट नेविगेशन को रोकना चाहिए और डायरेक्टरीज़, एकाधिक फ़ाइलों और बहुत बड़ी सूचियों को संभालना चाहिए।

सामान्य गलतियाँ

1. File System Access API को एक बेसलाइन डिपेंडेंसी मानना।
2. फ़ाइल सुरक्षा सत्यापन के रूप में एक्सटेंशन या MIME मान पर भरोसा करना।
3. लेबल, कीबोर्ड पाथ और स्क्रीन-रीडर पाथ को सुरक्षित रखे बिना इनपुट को छिपाना।
4. अपलोड करने से पहले पूरी बड़ी फ़ाइल को मेमोरी में पढ़ना।
5. कैंसिलेशन, फ़ॉर्मेट त्रुटियों और नेटवर्क विफलताओं सभी के लिए "अनुमति अस्वीकृत" (permission denied) दिखाना।

ट्रेड-ऑफ़ विश्लेषण

इनपुट सबसे व्यापक पहुंच वाली भरोसेमंद बेसलाइन है, लेकिन इसमें हैंडल-स्तरीय संचालन का अभाव है। पिकर बार-बार चयन को कम कर सकता है और अधिक समृद्ध हैंडल संचालन को प्रदर्शित कर सकता है, फिर भी यह ब्राउज़र सपोर्ट, HTTPS, यूज़र एक्टिवेशन और अनुमति पर निर्भर करता है। ड्रैग-एंड-ड्रॉप डेस्कटॉप थ्रूपुट में सुधार करता है लेकिन इसके लिए एक कीबोर्ड विकल्प की आवश्यकता होती है। क्लाइंट वैलिडेशन फ़ीडबैक समय को कम करता है; सर्वर वैलिडेशन सुरक्षा सीमा है। चंकिंग और फिर से शुरू करने की क्षमता (रिज्यूमेबिलिटी) स्टेट जटिलता जोड़ती है लेकिन बड़े ट्रांसफ़र के पुनः प्रयास की लागत को कम करती है।

चलाने योग्य उदाहरण

async function chooseFiles(input) {
  if (window.showOpenFilePicker && window.isSecureContext) {
    try {
      const handles = await window.showOpenFilePicker({ multiple: true });
      return Promise.all(handles.map((handle) => handle.getFile()));
    } catch (error) {
      if (error?.name !== "AbortError") throw error;
    }
  }
  return Array.from(input.files ?? []);
}

इसे यूज़र-क्लिक हैंडलर से कॉल करें। प्रोडक्शन कोड को टाइप, संख्या और साइज़ को भी सीमित करना चाहिए और विफलताओं को यूज़र-फ़ेसिंग स्टेट्स में मैप करना चाहिए। एक ड्रॉप हैंडलर event.dataTransfer.files को उसी एरे में परिवर्तित कर सकता है और वैलिडेशन तथा अपलोड स्टेट मशीन का पुन: उपयोग कर सकता है।

साक्षात्कारकर्ता के फॉलो-अप सवाल

पेज लोड के दौरान showOpenFilePicker() को कॉल क्यों नहीं किया जाता? API को क्षणिक यूज़र एक्टिवेशन की आवश्यकता होती है, इसलिए विलंबित या बैकग्राउंड कॉल्स को अस्वीकार किया जा सकता है। क्या accept मैलवेयर को रोकता है? नहीं। यह एक पिकर हिंट है; सुरक्षा जांच सर्वर पर होनी चाहिए। फ़ॉलबैक क्यों रखें? ब्राउज़र सपोर्ट और अनुमति अलग-अलग हो सकती है, इसलिए बेसलाइन को व्यापक रूप से उपलब्ध इनपुट के साथ काम करना चाहिए।

फॉलो-अप जवाब

आप फ़ॉलबैक पाथ का परीक्षण कैसे करते हैं?

एक असमर्थित ब्राउज़र, एक गैर-सुरक्षित संदर्भ, कैंसिलेशन और अस्वीकृत अनुमति का अलग-अलग परीक्षण करें; यह सुनिश्चित (assert) करें कि इनपुट पाथ अभी भी इम्पोर्ट पूरा करता है।

आप मेमोरी समाप्त होने (मेमोरी एग्जॉशन) को कैसे रोकते हैं?

File.slice() या स्ट्रीम्स का उपयोग करें, समवर्तीता (कंकरेंसी) को सीमित करें, चंक्स अपलोड करें, और जब यूज़र रद्द करे तो कंट्रोलर को एबॉर्ट करें।

आप फ़्लो को सुलभ (एक्सेसिबल) कैसे बनाते हैं?

एक वास्तविक लेबल और बटन रखें, ड्रॉप ज़ोन को फ़ोकसेबल बनाएं, कीबोर्ड को इनपुट ट्रिगर करने दें, और त्रुटियों तथा प्रोग्रेस को टेक्स्ट और एक लाइव रीजन के साथ संबद्ध करें।

कौन से मेट्रिक्स दिखाते हैं कि यह काम कर रहा है?

फ़ाइल सामग्री को रिकॉर्ड किए बिना सफलता, कैंसिलेशन, वैलिडेशन विफलता, रीट्राई के बाद अंतिम समापन, पहले प्रोग्रेस तक का समय, और ब्राउज़र द्वारा फ़ॉलबैक दरों को ट्रैक करें।