फ़ाइल अपलोड किसी भी वेब एप्लिकेशन के लिए बहुत सर्वव्यापी है और जब इंटरनेट पर (ब्राउज़र पर) फ़ाइलें और संसाधन अपलोड करने की बात आती है, तो चीजें कुछ हद तक तनावपूर्ण हो सकती हैं। सौभाग्य से, HTML 5 के साथ, इनपुट तत्व जो आमतौर पर उपयोगकर्ताओं को डेटा संशोधित करने की अनुमति देने के लिए फॉर्म नियंत्रण के साथ आते हैं, अपलोडिंग संसाधनों को सरल बनाने में बहुत उपयोगी हो सकते हैं।

इस लेख में, हम वैनिला जावास्क्रिप्ट का उपयोग करके फ़ाइल अपलोड को संभालने के तरीके पर करीब से नज़र डालेंगे। इसका उद्देश्य आपको बाहरी लाइब्रेरी की आवश्यकता के बिना फ़ाइल अपलोड घटक बनाना सिखाना है और जावास्क्रिप्ट में कुछ मुख्य अवधारणाओं को भी सीखना है। आप यह भी सीखेंगे कि अपलोड होने पर उसकी प्रगति स्थिति को कैसे दिखाया जाए।

स्रोत कोड: हमेशा की तरह, आप प्रोजेक्ट के लिए GitHub रेपो पर होस्ट किए गए स्रोत कोड के साथ छेड़छाड़ कर सकते हैं।

प्रोजेक्ट सेटअप

सबसे पहले और सबसे महत्वपूर्ण, अपनी पसंदीदा निर्देशिका में, प्रोजेक्ट के लिए एक नया फ़ोल्डर बनाएं:

$ mkdir file-upload-progress-bar-javascript

ऐसा करने के बाद, आइए अब हम Index.html, main.css, और app.js फ़ाइलें बनाएं जहां हम अपने प्रोजेक्ट के लिए सभी मार्कअप लिखेंगे।

$ touch index.html && touch main.css && touch app.js

अब हम

और टैग के साथ एक बुनियादी HTML टेम्पलेट बनाकर फ़ाइल अपलोड के लिए संरचना बनाना शुरू कर सकते हैं:

इसके बाद, हम main.css में प्रोजेक्ट के लिए आधार शैलियाँ जोड़ते हैं:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

अब, Index.html अपडेट हो गया है, और main.css फ़ाइल लिंक हो गई है:

हम फ़ाइल अपलोडर के लिए संरचना का निर्माण जारी रखते हैं:

  
    
    
    
    
    
    
  
  
    

      
File Uploader JavaScript with Progress
      

        

            
            
            
Browse File to Upload
          
          

            

            

          
      
    
    
  

फिर, main.css को अपडेट करने के लिए निम्नलिखित कोड को कॉपी/पेस्ट करें:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  background: #cb67e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
}
::selection {
  color: white;
  background: #cb67e9;
}
.file-upload__wrapper {
  width: 640px;
  background: #fff;
  border-radius: 5px;
  padding: 35px;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.05);
}
.file-upload__wrapper header {
  color: #cb67e9;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 20px;
}
.form-parent {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: center;
}
.file-upload__wrapper form.file-upload__form {
  height: 150px;
  border: 2px dashed #cb67e9;
  cursor: pointer;
  margin: 30px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 6px;
  padding: 10px;
}
form.file-upload__form :where(i, p) {
  color: #cb67e9;
}
form.file-upload__form i {
  font-size: 50px;
}
form.file-upload__form p {
  font-size: 1rem;
  margin-top: 15px;
}
section .row {
  background: #e9f0ff;
  margin-bottom: 10px;
  list-style: none;
  padding: 15px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
}
section .row i {
  font-size: 2rem;
  color: #cb67e9;
}
section .details span {
  font-size: 1rem;
}
.progress-container .row .content-wrapper {
  margin-left: 15px;
  width: 100%;
}
.progress-container .details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.progress-container .content .progress-bar-wrapper {
  height: 10px;
  width: 100%;
  margin-bottom: 5px;
  background: #fff;
  border-radius: 30px;
}
.content .progress-bar .progress-wrapper {
  height: 100%;
  background: #cb67e9;
  width: 0%;
  border-radius: 6px;
}
.uploaded-container {
  overflow-y: scroll;
  max-height: 230px;
}
.uploaded-container.onprogress {
  max-height: 160px;
}
.uploaded-container .row .content-wrapper {
  display: flex;
  align-items: center;
}
.uploaded-container .row .details-wrapper {
  display: flex;
  flex-direction: column;
  margin-left: 15px;
}
.uploaded-container .row .details-wrapper .name span {
  color: green;
  font-size: 10px;
}
.uploaded-container .row .details-wrapper .file-size {
  color: #404040;
  font-size: 11px;
}

अब, घटक ब्राउज़र पर बेहतर दिखना चाहिए:

अपलोड कार्यक्षमता जोड़ना

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

निम्नलिखित को app.js में कॉपी/पेस्ट करें:

const uploadForm = document.querySelector(".file-upload__form");
const myInput = document.querySelector(".file-input");
const progressContainer = document.querySelector(".progress-container");
const uploadedContainer = document.querySelector(".uploaded-container");
uploadForm.addEventListener("click", () => {
  myInput.click();
});
myInput.onchange = ({ target }) => {
  let file = target.files[0];
  if (file) {
    let fileName = file.name;
    if (fileName.length >= 12) {
      let splitName = fileName.split(".");
      fileName = splitName[0].substring(0, 13)   "... ."   splitName[1];
    }
    uploadFile(fileName);
  }
};
function uploadFile(name) {
  let xhrRequest = new XMLHttpRequest();
  const endpoint = "uploadFile.php";
  xhrRequest.open("POST", endpoint);
  xhrRequest.upload.addEventListener("progress", ({ loaded, total }) => {
    let fileLoaded = Math.floor((loaded / total) * 100);
    let fileTotal = Math.floor(total / 1000);
    let fileSize;
    fileTotal 
                          
                          

                            

                              ${name} | Uploading
                              ${fileLoaded}%
                            
                            

                              

                            
                          
                        `;
    uploadedContainer.classList.add("onprogress");
    progressContainer.innerHTML = progressMarkup;
    if (loaded == total) {
      progressContainer.innerHTML = "";
      let uploadedMarkup = `

${name} | Uploaded ${fileSize}

`; uploadedContainer.classList.remove("onprogress"); uploadedContainer.insertAdjacentHTML("afterbegin", uploadedMarkup); } }); let data = new FormData(uploadForm); xhrRequest.send(data); }

हमने जो किया है वह फ़ाइल इनपुट तत्व का उपयोग करके चुनी गई फ़ाइल को पढ़ने में सक्षम होना है, और DOM पर फ़ाइलों की एक नई सूची बनाना है। जब फ़ाइल अपलोड की जाती है, तो प्रगति स्तर दिखाया जाता है, और जब फ़ाइल अपलोड हो जाती है, तो प्रगति स्थिति अपलोड में बदल जाती है।

फिर, हम फ़ाइलें भेजने के लिए एक समापन बिंदु बनाने के लिए अपने प्रोजेक्ट में एक uploadFile.php भी जोड़ते हैं। इसका कारण हमारे प्रोजेक्ट में एसिंक्रोनोसिटी का अनुकरण करना है ताकि हमें प्रगति लोडिंग प्रभाव मिल सके।

निष्कर्ष

आप इस लेख के इस बिंदु तक पहुंचने में अद्भुत रहे हैं।

इस ट्यूटोरियल में, आपने सीखा है कि फ़ाइल अपलोड घटक कैसे बनाया जाए और उसमें एक प्रगति बार कैसे जोड़ा जाए। यह तब उपयोगी हो सकता है जब आप वेबसाइट बनाते हैं और चाहते हैं कि आपके उपयोगकर्ता इसमें शामिल महसूस करें और यह समझें कि फ़ाइल कितनी धीमी या तेज़ अपलोड हो रही है। जब भी आप चाहें, बेझिझक इस प्रोजेक्ट का दोबारा उपयोग करें।

यदि आप इस ट्यूटोरियल का अनुसरण करते समय अटक जाते हैं, तो मेरा सुझाव है कि आप अन्य डेवलपर्स की मदद के लिए अपना प्रोजेक्ट GitHub पर अपलोड करें या आप मुझे एक डीएम भी भेज सकते हैं, मुझे मदद करने में खुशी होगी।

यहां परियोजना के लिए GitHub रेपो का एक लिंक है।

प्रासंगिक संसाधन

• FontAwesome दस्तावेज़