सामग्री पर जाएँ
FFormhook
← ब्लॉग पर वापस जाएँ

ब्लॉग

स्टैटिक साइट पर फ़ाइल अपलोड: आपके असली विकल्प

· 4 मिनट का पठन

टेक्स्ट फ़ील्ड आसान होती हैं - असली मुश्किल तब आती है जब ब्रीफ़ में लिखा हो "और आवेदकों को अपना CV अटैच करना चाहिए।" एक स्टैटिक साइट कोई फ़ाइल प्राप्त नहीं कर सकती; उसे प्राप्त करने के लिए कोई सर्वर ही नहीं है। यहाँ असली विकल्प दिए गए हैं, सबसे ख़राब से सबसे अच्छे तक।

विकल्प 1: "हमें ईमेल कर दीजिए" (हार मान लेना)

यूज़र्स से कहें कि वे अटैचमेंट ईमेल से भेजें। यह तकनीकी रूप से काम करता है, बिल्कुल फ़ैक्स मशीन की तरह: फ़ाइल फ़ॉर्म डेटा से अलग होकर, बिना किसी संरचना और बिना साइज़ नियंत्रण के, एक इनबॉक्स में पहुँचती है। किसी भी दोहराए जाने वाले काम के लिए - नौकरी के आवेदन, सपोर्ट अटैचमेंट, प्रिंट फ़ाइलें - यह हमेशा के लिए मैनुअल फ़ाइलिंग बन जाता है।

विकल्प 2: सीधे क्लाउड स्टोरेज पर अपलोड (DIY तरीक़ा)

फ़्रंट-एंड JavaScript सीधे ऑब्जेक्ट स्टोरेज पर अपलोड कर सकता है (S3-स्टाइल प्रीसाइन्ड URL)। यह एक वैध आर्किटेक्चर है - और इसे सुरक्षित तरीक़े से करना हैरान करने वाला काम है: कुछ न कुछ तो उन प्रीसाइन्ड URL को जनरेट करेगा (यानी आप आख़िरकार एक सर्वरलेस फ़ंक्शन ही लिख रहे हैं), आप ख़ुद साइज़ और टाइप वैलिडेशन लागू कर रहे हैं, अपलोड की गई फ़ाइल को उस फ़ॉर्म सबमिशन से जोड़ रहे हैं जिससे वह संबंधित है, और यह तय कर रहे हैं कि वह bucket दुनिया में कहाँ स्थित है - जो उस पल अहम हो जाता है जब अपलोड में CV जैसा व्यक्तिगत डेटा शामिल हो।

यह चुनें जब अपलोड ही आपका प्रोडक्ट हो। "फ़ॉर्म में एक फ़ाइल अटैच करने" के लिए, यह बहुत ज़्यादा प्लंबिंग है।

विकल्प 3: फ़ॉर्म बैकएंड के ज़रिए multipart (उबाऊ लेकिन सही तरीक़ा)

HTML में फ़ाइल फ़ील्ड लगभग हमेशा से समर्थित रही हैं:

<form action="https://formhook.app/f/fh_your-key"
      method="POST" enctype="multipart/form-data">
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <input type="file" name="attachment">
  <button type="submit">Send</button>
</form>

जो एक चीज़ लोग भूल जाते हैं वह है enctype="multipart/form-data" - इसके बिना ब्राउज़र फ़ाइल की बजाय सिर्फ़ फ़ाइलनेम भेजता है। जब POST को कोई फ़ॉर्म बैकएंड प्राप्त करता है, तो फ़ाइल उसके सबमिशन के साथ ही स्टोर होती है: डैशबोर्ड में वह पूछताछ खोलिए, अटैचमेंट वहीं मौजूद है। साइज़ और टाइप की सीमाएँ एंडपॉइंट पर लागू होती हैं, और स्पैम प्रोटेक्शन पूरे सबमिशन पर लागू होता है, फ़ाइलों सहित।

Formhook में, फ़ाइल अपलोड Pro प्लान और उससे ऊपर उपलब्ध है, और - यूरोपीय साइटों के लिए जो हिस्सा मायने रखता है - अपलोड की गई फ़ाइलें Cloudflare R2 के EU क्षेत्र में स्टोर होती हैं, इसलिए किसी EU आवेदक द्वारा अटैच किया गया CV भी टेक्स्ट फ़ील्ड जैसा ही डेटा-रेज़िडेंसी जवाब पाता है: वह कभी EU से बाहर नहीं जाता। (डॉक्स में स्टोरेज की जानकारी।)

चाहे जो भी विकल्प चुनें, ये व्यावहारिक नियम अपनाएँ

  1. इनपुट को सीमित करें। accept एट्रिब्यूट (accept=".pdf,.png,.jpg") का इस्तेमाल UX के तौर पर करें, लेकिन इसे सिर्फ़ सलाहरूप मानें - असली वैलिडेशन एंडपॉइंट पर होती है।
  2. सीमा तक पहुँचने से पहले ही यूज़र्स को बता दें। फ़ील्ड के बगल में "अधिकतम 10 MB" लिखना, धीमी अपलोड के बाद आने वाली एरर से बेहतर है।
  3. फ़ाइलें भी व्यक्तिगत डेटा हैं। एक CV शायद आसपास की फ़ॉर्म फ़ील्ड्स से भी ज़्यादा संवेदनशील होता है। रिटेंशन, डिलीशन और एक्सपोर्ट पॉलिसी में अटैचमेंट शामिल होने चाहिए, और आपकी प्राइवेसी पॉलिसी में स्टोरेज-लोकेशन का दावा भी इन्हें कवर करे। (देखें GDPR चेकलिस्ट।)
  4. no-JS पाथ को काम करते रहने दें। एक सामान्य multipart फ़ॉर्म बिना किसी स्क्रिप्ट के भी ठीक से सबमिट हो जाता है; ऊपर से AJAX की पॉलिश जोड़ें, उसकी जगह नहीं।

स्टैटिक साइटों के लिए पैटर्न तय है: साइट स्टैटिक बनी रहती है, फ़ॉर्म बैकएंड multipart POST प्राप्त करता है, और फ़ाइल उसी मैसेज के बगल में पहुँच जाती है जिसके साथ वह आई थी। फ़ॉर्म अब भी बस एक एट्रिब्यूट है - साथ में एक enctype।

एक ही लाइन में काम करने वाला फ़ॉर्म

EU-होस्टेड, सबमिशन हमेशा के लिए सुरक्षित, हर टियर पर पुश सूचनाएँ।

मुफ़्त में शुरू करें

क्रेडिट कार्ड नहीं चाहिए · दस्तावेज़ पढ़ें

आगे पढ़ें