Kā izveidot failu augšupielādes rīku ar vilcienu un nolaidi un mākoņa uzglabāšanu

By Shefali Jangid Vai esat kādreiz mēģinājuši augšupielādēt failus tīmekļa vietnē? Lielākā daļa no viņiem jūtas kā viņi ir iestrēguši pagātnē. Viņi vēlas failu augšupielādes rīku, kas jūtas bez pūlēm, velciet un nolaidiet no sava darbvirsmas, tūlītējus priekšskatījumus un progresa joslas, kas faktiski ļauj viņiem zināt, kas notiek. Un nav svarīgi, vai viņi ir darbvirsmas vai mobilajā ierīcē, vai augšupielādē nelielu attēlu vai milzīgu video. Tas ir tieši tas, ko mēs būvēsim šajā ceļvedī. Mēs radīsim modernu failu augšupielādes rīku ar vilkt un nolaist augšupielādes, reāllaika progresa izsekošanu un mākoņa uzglabāšanas integrāciju, lai mums nebūtu jādara viss no nulles. Mēs saglabāsim kodu tīru un vienkāršu ar paskaidrojumiem, lai jūs varētu to viegli izmantot saviem projektiem. Šīs rokasgrāmatas beigās mums būs tas atbilst mūsdienu cerībām un padara failu pārvaldību justies gludu un intuitīvu. Lietotājam draudzīgs failu augšupielādes rīks Lietotājam draudzīgs failu augšupielādes rīks Key Takeaways Atslēgvārdi takeaways Pievienojiet mūsu augšupielādes rīkam vilkt un nolaist funkcionalitāti, kas ir dabiska un viegli lietojama. Izveidojiet stabilu rīku, kas efektīvi apstrādā vairākus failu veidus un izmērus. Integrējiet mākoņa uzglabāšanu netraucēti, neizmantojot dienas API dokos. Rādīt reāllaika progresu, lai lietotāji vienmēr zinātu, kas notiek. Rīkojieties ar kļūdām pieklājīgi, sniedzot skaidru atgriezenisko saiti. Understanding the Challenge Izpratne par izaicinājumu Lai izveidotu failu augšupielādes funkciju, sākumā tas izklausās vienkārši. mums vienkārši ir jāļauj lietotājiem izvēlēties failu un hit augšupielādi, vai ne? Patiesībā tas ir daudz sarežģītāk, it īpaši, ja mēs vēlamies izveidot modernu failu augšupielādes rīku, ko cilvēki patiešām patīk izmantot. Pirmais lielais šķērslis ir saskarne. lietotāji vairs nevēlas tikai "izvēlieties failu" pogu. They expect drag-and-drop, real-time feedback, and a smooth experience whether they’re on desktop or mobile. Regulāras failu augšupielādes, izmantojot pamata HTML veidlapas, ir lēnas un mulsinošas.Lietotāji neredz nekādu progresu vai ziņojumu, kas liek viņiem skatīties uz tukšu ekrānu, kamēr viņi gaida savus failus augšupielādēt. Kā izstrādātājs, jums ir nepieciešams pārbaudīt, vai fails ir atļauts, pārliecinieties, ka tas nav pārāk liels, un rīkoties ar dažādiem failu veidiem, vienlaikus padarot to izskatās viegli un gludi lietotājiem. Uzglabāšana pievieno vēl vienu sarežģītības slāni.Vai jūs glabājat failus lokāli?Iestatiet dublējumus?Spiediet tos caur CDN, lai globālie lietotāji netiktu pakļauti kavējumiem? Savas sistēmas ieviešana ir dārga un laikietilpīga, bet arī mākoņa uzglabāšanas API var justies pārsteidzoši. Turklāt drošība ir arī liela problēma. Failu augšupielādes ir viens no visbiežāk sastopamajiem uzbrukuma vektoriem tīmeklī.Ja jūs nepareizi pārbaudāt failus, jūs riskējat saskarties ar ļaunprātīgu programmatūru un datu noplūdi. Learn more about ! secure file handling on OWASP’s guidelines droša failu apstrāde saskaņā ar OWASP vadlīnijām droša failu apstrāde saskaņā ar OWASP vadlīnijām Un visbeidzot, mērogojamība. ir pietiekami viegli apstrādāt augšupielādes, ja jums ir desmit lietotāji. Bet kas notiek, kad simtiem vienlaicīgi izmanto failu augšupielādes rīku? Tagad jums ir jārisina arī interneta ātrums, cik daudz slodzes var apstrādāt jūsu serveris un kur glabāt visus failus. Building the Solution Izveidot risinājumu Let's start building our file uploader tool step by step. We'll begin with a simple HTML structure and progressively enhance it into a smooth, user-friendly uploader that our users will actually enjoy. Step 1: Creating the Basic Structure First, let's set up our HTML: Modern File Manager File Management System Drop files here or click to browse Support for images, documents, and videos up to 100MB

Uploading... 0% Here’s what it will look like: 2. solis – moderns izskats Tagad pievienosim dažus CSS, lai padarītu mūsu saskarni vizuāli pievilcīgu. Par pilnīgu CSS. GitHub repository Github repozitorija Lūk, kā tas izskatās pēc CSS pievienošanas: 3. solis: JavaScript funkcionalitātes ieviešana Šajā posmā mēs izveidosim loģiku, kas atbalsta failu augšupielādētāju, ieskaitot notikumu apstrādi, validāciju, progresa izsekošanu un failu pārvaldību. 3.1 solis: Klases iestatīšana un sākotnējā konfigurācija Izveidojiet FileManager klasi un atsauciet nepieciešamos DOM elementus.Inicializējiet tukšu matricu, lai izsekotu augšupielādētos failus un izsauktu metodi, lai pievienotu notikumu klausītājus. class FileManager { constructor() { this.uploadArea = document.getElementById("upload-area"); this.fileInput = document.getElementById("file-input"); this.progressContainer = document.getElementById("upload-progress"); this.progressFill = document.querySelector(".progress-fill"); this.progressText = document.querySelector(".progress-text"); this.fileList = document.getElementById("file-list"); this.files = []; this.initializeEventListeners(); } // Reference DOM elements for file upload // Store uploaded files // Set up event handlers 3.2 solis: Iestatīt notikumu klausītājus Pievienojiet manipulatorus, lai noklikšķinātu, vilktu un nolaistu, un failu atlasiet, lai augšupielādētājs būtu interaktīvs. initializeEventListeners() { this.uploadArea.addEventListener("click", () => { this.fileInput.click(); }); this.fileInput.addEventListener("change", (e) => { this.handleFiles(e.target.files); }); this.uploadArea.addEventListener("dragover", (e) => { e.preventDefault(); this.uploadArea.classList.add("dragover"); }); this.uploadArea.addEventListener("dragleave", (e) => { e.preventDefault(); this.uploadArea.classList.remove("dragover"); }); this.uploadArea.addEventListener("drop", (e) => { e.preventDefault(); this.uploadArea.classList.remove("dragover"); this.handleFiles(e.dataTransfer.files); }); } // Open file dialog when user clicks the upload area // Handle file selection from the input // Drag over the area - highlight the drop zone // Remove highlight when dragging leaves // Handle files dropped onto the area 3.3 solis: failu apstrāde un validēšana Filtrējiet failus, pamatojoties uz izmēru un turpiniet tikai ar derīgiem. handleFiles(fileList) { const validFiles = Array.from(fileList).filter((file) => { if (file.size > 100 * 1024 * 1024) { alert(`${file.name} is too large. Maximum size is 100MB.`); return false; } return true; }); if (validFiles.length > 0) { this.uploadFiles(validFiles); } } // Reject files larger than 100MB ⚠️Svarīgi: validējiet failus gan klienta, gan servera pusēs. Klienta puses pārbaudes sniedz tūlītēju atgriezenisko saiti, bet tikai servera puses validācija aizsargā mūsu lietotni no ļaunprātīgiem augšupielādējumiem. Step 3.4: Uploading Multiple Files Parādiet progresa joslu, augšupielādējiet katru failu vienu pēc otra un paslēpiet progresu, kad tas ir paveikts. async uploadFiles(files) { this.showProgress(); for (let i = 0; i { let progress = 0; const interval = setInterval(() => { progress += Math.random() * 15; if (progress >= 100) { progress = 100; clearInterval(interval); this.addFileToList(file); resolve(); } const overallProgress = ((current - 1) / total) * 100 + progress / total; this.updateProgress(overallProgress, `Uploading ${current} of ${total}...`); }, 200); }); } // Add file to list once upload is done 3.6 solis: Rādīt augšupielādētos failus Rādīt augšupielādēto failu UI ar ikonu, izmēru, datumu un opciju dzēst. addFileToList(file) { const fileCard = document.createElement("div"); fileCard.className = "file-card"; const fileIcon = this.getFileIcon(file.type); const fileSize = this.formatFileSize(file.size); fileCard.innerHTML = ` ${fileIcon} ${file.name} ${fileSize} • ${new Date().toLocaleDateString()}

Delete `; this.fileList.appendChild(fileCard); this.files.push(file); } 3.7 solis: Izdzēst failus Ļaujiet lietotājiem dzēst failus, attiecīgi atjauninot failu sarakstu un lietotāja interfeisu. deleteFile(fileName) { this.files = this.files.filter((f) => f.name !== fileName); this.fileList.innerHTML = ""; this.files.forEach((f) => this.addFileToList(f)); } 3.8 solis: failu ikonas, pamatojoties uz tipu Rādīt atbilstošas ikonas, pamatojoties uz faila MIME tipu, lai uzlabotu lietotāja pieredzi. getFileIcon(mimeType) { if (mimeType.startsWith("image/")) return "🖼️"; if (mimeType.startsWith("video/")) return "🎥"; if (mimeType.startsWith("audio/")) return "🎵"; if (mimeType.includes("pdf")) return "📄"; if (mimeType.includes("word")) return "📝"; if (mimeType.includes("excel") || mimeType.includes("spreadsheet")) return "📊"; return "📁"; } Padoms: Rādīt failu ikonas un formatētus izmērus, lai lietotājiem sniegtu labāku atgriezenisko saiti. 3.9 solis: Formatēt failu izmērus Konvertējiet failu izmērus lasāmās vienībās, piemēram, KB, MB vai GB. formatFileSize(bytes) { if (bytes === 0) return "0 Bytes"; const k = 1024; const sizes = ["Bytes", "KB", "MB", "GB"]; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]; } 3.10 solis: Rādīt un slēpt augšupielādes progresu Kontrolējiet progresa joslas redzamību un dinamiski atjauniniet tās vērtību. showProgress() { this.progressContainer.classList.remove("hidden"); } hideProgress() { setTimeout(() => { this.progressContainer.classList.add("hidden"); this.updateProgress(0, "Upload complete!"); }, 1000); } updateProgress(percent, text) { this.progressFill.style.width = percent + "%"; this.progressText.textContent = text; } } 3.11 solis: Sākotnējais failu pārvaldnieks Izveidojiet FileManager klases instanci, lai sāktu funkcionalitāti. const fileManager = new FileManager(); // Start the file manager Iegūstiet pilnu avota kodu šim failu augšupielādes rīkam šeit! Iegūstiet pilnu avota kodu šim failu augšupielādes rīkam šeit! Iegūstiet pilnu avota kodu šim failu augšupielādes rīkam šeit! Ar to mūsu failu augšupielādes rīks ir pilnībā interaktīvs, un lietotāji var viegli velkot, nolaist, augšupielādēt un pārvaldīt failus. Ref: MDN Web API - fails MDN Web API - fails MDN Web API - fails 4. solis: Integrējiet failu kopumu mākoņa glabāšanai In this step, we will take our file uploader tool to the next level by connecting it to the cloud. We can use tools like lai tieši izvilktu no mākoņa uzglabāšanas, izveidotu drošas saites un padarītu visu lietotājiem nevainojamu. Filestack Filmas Pirmkārt, pievienojiet Filestack SDK mūsu HTML galvai: https://static.filestackapi.com/filestack-js/4.x.x/filestack.min.js Tad paplašiniet mūsu FileManager klasi, lai integrētu mākoņa augšupielādes, rādītu priekšskatījumus un pārvaldītu failu saites. Detalizēta informācija, apmeklējiet . Filestack’s API reference Filestack API atsauce 4.1 solis: FileManager paplašināšana ar Filestack integrāciju class EnhancedFileManager extends FileManager { constructor() { super(); this.client = filestack.init('YOUR_API_KEY_HERE'); this.picker = null; } // Extend the basic FileManager class to add cloud storage functionality using Filestack // Call the parent class constructor // Initialize Filestack with your API key // Placeholder for the Filestack picker instance Svarīgi: Izmantojiet savu API taustiņu YOUR_API_KEY_HERE vietā; to var iegūt no Filestack rokasgrāmatas. Svarīgi: Izmantojiet savu API taustiņu YOUR_API_KEY_HERE vietā; to var iegūt no Filestack rokasgrāmatas. Filestack un citi mākoņpakalpojumi prasa API atslēgas un uzstādīšanu.Ražošanas nolūkā vienmēr aizsargājiet API atslēgas un konfigurējiet atbilstošus drošības iestatījumus. 4.2 solis: Notikumu klausītāju inicializēšana ar Filestack pogu initializeEventListeners() { super.initializeEventListeners(); this.addFilestackButton(); } // Set up existing file selection and drag-drop listeners // Add a new button for accessing cloud storage through Filestack 4.3 solis: Filestack Picker Button pievienošana addFilestackButton() { const button = document.createElement("button"); button.textContent = "Browse Cloud Storage"; button.className = "filestack-btn"; button.onclick = (e) => { e.stopPropagation(); this.openFilestack(); }; this.uploadArea.appendChild(button); } // Button label // Apply styling // Open the Filestack picker when the button is clicked // Prevent triggering other events // Add the button to the upload area 4.4 solis: Konfigurēt un atvērt Filestack Picker openFilestack() { const options = { accept: ['image/*', 'video/*', 'application/pdf', '.doc', '.docx'], maxFiles: 10, uploadInBackground: false, onUploadDone: (result) => { result.filesUploaded.forEach(file => { this.addCloudFileToList(file); }); } }; this.client.picker(options).open(); } // Allowed file types // Limit number of files selectable at once // Upload immediately instead of in background // Add each uploaded file to the file list // Open the Filestack file picker with the above options 4.5 solis: augšupielādēto failu rādīšana no mākoņa uzglabāšanas addCloudFileToList(file) { const fileCard = document.createElement('div'); fileCard.className = 'file-card cloud-file'; fileCard.innerHTML = ` ☁️ ${file.filename} ${this.formatFileSize(file.size)} • Cloud Storage

View Copy Link `; this.fileList.appendChild(fileCard); } // Styling for cloud files // Add to the file list 4.6 solis: augšupielādēt failus tieši uz Filestack async uploadSingleFile(file, current, total) { try { const fileHandle = await this.client.upload(file, { onProgress: (evt) => { const progress = (evt.loaded / evt.total) * 100; const overallProgress = ((current - 1) / total) * 100 + (progress / total); this.updateProgress(overallProgress, `Uploading ${current} of ${total}...`); } }); this.addCloudFileToList({ filename: file.name, size: file.size, url: fileHandle.url }); } catch (error) { console.error('Upload failed:', error); alert(`Failed to upload ${file.name}. Please try again.`); } } } // Upload file using Filestack and track progress // Once uploaded, add the file to the list view 4.7 solis: uzlabotā failu pārvaldnieka inicializēšana const fileManager = new EnhancedFileManager(); // Instantiate the EnhancedFileManager to replace the default FileManager functionality Pievienojiet šo CSS, lai atbilstu mūsu esošajiem stiliem: .filestack-btn, .btn-view, .btn-share { margin-top: 1rem; padding: 0.75rem 1.25rem; background: linear-gradient(135deg, #00030c, #764ba2); color: #fff; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .filestack-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); } .filestack-btn:active { transform: translateY(0); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15); } Šī integrācija pārvērš mūsu pamata failu pārvaldnieku par spēcīgu rīku. Tas var apstrādāt failus no vairākiem avotiem, vietējām augšupielādēm, mākoņa uzglabāšanas pakalpojumiem, piemēram, Google Drive un Dropbox, vai pat URL importu. Filestack pārvalda visu smago pacelšanu aiz skatuves. Tas ietver dažādu uzglabāšanas pakalpojumu sniedzēju apstrādi, CDN izplatīšanu un failu pārveidošanu. Ref: Filestack dokumentācija Filestack dokumentācija Filestack dokumentācija Uzlabo īstenošanu Tagad pievienosim dažas uzlabotas funkcijas mūsu augšupielādes rīkam, kas padarīs mūsu failu pārvaldnieku izcilu. Reāllaika failu priekšskatījumi Lietotājiem patīk tūlītēja atgriezeniskā saite. attēliem, videoklipiem un PDF failiem mēs varam ģenerēt priekšskatījumus tieši failu sarakstā: generatePreview(file) { if (file.mimetype && file.mimetype.startsWith("image/")) { return ` `; } else if (file.mimetype === "application/pdf") { return ` `; } return ""; } Pievienojiet to mūsu CSS failam: .file-preview { width: 100%; max-height: 150px; object-fit: cover; border-radius: 10px; margin-top: 10px; cursor: pointer; } Un atjauniniet addCloudFileToList funkciju, lai rādītu priekšskatījumus šādi: addCloudFileToList(file) { const fileCard = document.createElement("div"); fileCard.className = "file-card cloud-file"; const preview = this.generatePreview(file); // ☁️ ${file.filename} ${this.formatFileSize(file.size)} • Cloud Storage

${preview} View Copy Link `; this.fileList.appendChild(fileCard); } Padoms: Instant priekšskatījumi uzlabo lietotāju uzticēšanos, ļaujot viņiem vizuāli apstiprināt augšupielādes. Meklēšana un filtrēšana Padariet mūsu failu augšupielādes rīku vēl lietotājam draudzīgāku, ļaujot lietotājiem meklēt un filtrēt failus reālā laikā: implementSearch() { const searchInput = document.createElement("input"); searchInput.type = "text"; searchInput.placeholder = "Search files..."; searchInput.className = "search-input"; this.uploadArea.insertAdjacentElement("beforebegin", searchInput); searchInput.addEventListener("input", (e) => { this.filterFiles(e.target.value); }); } filterFiles(query) { const fileCards = this.fileList.querySelectorAll(".file-card"); fileCards.forEach((card) => { const fileName = card.querySelector("h4").textContent.toLowerCase(); card.style.display = fileName.includes(query.toLowerCase()) ? "flex" : "none"; }); } EnhancedFileManager konstruktorā zvaniet this.implementSearch(); šādi: class EnhancedFileManager extends FileManager { constructor() { super(); this.client = filestack.init("YOUR_API_KEY"); this.picker = null; this.implementSearch(); } ... } // <-- add this Un pievienojiet šo CSS: .search-input { width: 100%; padding: 0.75rem 1.25rem; margin-bottom: 20px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.95rem; color: #2d3748; outline: none; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .search-input:focus { border-color: #764ba2; box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.3); } .search-input::placeholder { color: #a0aec0; font-style: italic; } ️ Labākā prakse: Vienmēr ļaujiet lietotājiem viegli filtrēt failus, pārvaldot lielus sarakstus. Filestack izmantošanas skaistums ir tāds, ka tajā ir iebūvētas daudzas uzlabotas funkcijas. Jūs saņemsiet attēlu transformācijas, dokumentu konversijas un pat inteliģentu izgriezumu no kastes. Tas nozīmē, ka jums nav nepieciešams veidot šīs sarežģītās funkcijas no nulles. Un jums arī nebūs jāuztur vairāki trešo pušu pakalpojumi. Labākās prakses un kopīgie trūkumi Šeit ir dažas svarīgas mācības, ko esmu iemācījies (dažreiz grūti), veidojot failu augšupielādes rīkus: Apstipriniet failus gan klientā, gan serverī: klienta puses validācija ir noderīga, jo tā sniedz lietotājam ātru atgriezenisko saiti, bet patiesa drošība nāk arī no failu pārbaudes serverī. Kļūdu pareiza apstrāde: augšupielādes ne vienmēr notiek vienmērīgi. faili var neizdoties, tīkli var nokrist vai serveri var sabrukt. Pieejamības jautājumi: Pārliecinieties, ka augšupielādētājs darbojas visiem. Pievienojiet ARIA etiķetes ekrāna lasītājiem, atļaujiet tastatūras navigāciju un neuzticieties tikai krāsām, lai parādītu ziņas. Skatīt augšupielādes veiktspēju: Lieli faili lēnos tīklos var izlaist laiku vai neizdoties. Izmantojot sagrieztus augšupielādes var palīdzēt, un parādot lietotājiem, cik daudz laika ir atlicis, ir liela atšķirība. Plānojiet uzglabāšanas izmaksas: failu uzglabāšana var kļūt dārga ātri.Tīrīt pagaidu failus, saspiest tos, ja iespējams, un noteikt ierobežojumus failu izmēram, pamatojoties uz jūsu infrastruktūras jaudu. Saglabājiet failus droši: vienmēr saglabājiet augšupielādētos failus ārpus jūsu tīmekļa sakņu direktorijas un apkalpojiet tos, izmantojot parakstītus URL, lai novērstu neatļautu piekļuvi un uzlabotu drošību. Secinājums Mūsdienu failu augšupielādes rīka izveidei nav jābūt sarežģītai.Sāciet ar stingru HTML pamatu, pakāpeniski to uzlabojiet, un . izmantot rīkus, piemēram, Filestack mākoņa uzglabāšanai izmantot rīkus, piemēram, Filestack mākoņa uzglabāšanai Mērķis ir gluds, lietotājam draudzīgs augšupielādētājs, kas cilvēkiem patiešām patīk izmantot. Saglabājiet sarežģītas tehnoloģijas aiz skatuves, paslēptas aiz tīras un vienkāršas saskarnes.Kad tas darbojas, varat pievienot uzlabotas funkcijas, piemēram, failu koplietošanu, sadarbīgu rediģēšanu vai automatizētas darba plūsmas. Iegūstiet to pareizi, un jums būs laimīgāki lietotāji, labāka iesaistīšanās un daudz mazāk atbalsta biļešu. Resursi turpmākai mācīšanai GitHub Repository ar pilnu kodu MDN Web API - fails OWASP - droša failu augšupielāde Filestack dokumentācija GitHub Repository ar pilnu kodu MDN Web API - fails OWASP - droša failu augšupielāde Filestack dokumentācija Par autoru Shefali Jangid ir tīmekļa izstrādātājs, tehniskais rakstnieks un satura radītājs, kas ir kaislīgs par intuitīvu izstrādātāja rīku un izglītības resursu veidošanu. , palīdzot izstrādātājiem izveidot labākas tīmekļa pieredzes ar tīru, efektīvu un pieejamu kodu. shefali.dev Lāčplēsis.dev