Како изградити алат за преузимање датотека са превлачењем и спуштањем и складиштењем у облаку

By Shefali Jangid Да ли сте икада покушали да учитате датотеке на веб страницу?Већина њих се осећа као да су заглављени у прошлости. Корисници данас очекују више.Хоће алат за преузимање датотека који се осећа без напора, превлачење и спуштање са њиховог радног места, инстант прегледи и шипке напретка које им заправо омогућавају да знају шта се дешава. И не би требало да је битно да ли су на десктопу или мобилном, или уплоад малу слику или огроман видео. То је управо оно што ћемо изградити у овом водичу. Ми ћемо креирати модеран алат за преузимање датотека са пребацивањем и спуштањем, праћењем напретка у реалном времену и интеграцијом складишта у облаку, тако да не морамо све да радимо од нуле. Ми ћемо држати код чист и једноставан са објашњењима тако да га можете лако користити за своје пројекте. До краја овог водича, имаћемо To odgovara današnjim očekivanjima i čini upravljanje datotekama glatkim i intuitivnim. user-friendly file uploader tool Корисник-пријатељски File Uploader Tool Key Takeaways Кључни Takeaways Додајте функцију превлачења и спуштања нашем алату за преузимање који се осећа природно и једноставно за коришћење. Изградите снажан алат који ефикасно управља више врста и величина датотека. Интегришите складиштење у облаку беспрекорно без трошења дана на АПИ документе. Prikaži napredak u realnom vremenu tako da korisnici uvek znaju šta se dešava. Радите са грешкама грациозно, пружајући јасну повратну информацију. Understanding the Challenge Razumevanje izazova Изградња датотеке уплоад функција звучи једноставно на почетку. само морамо да дозволимо корисницима да изаберу датотеку и удари уплоад, зар не? У стварности, то је много компликованије, поготово ако желимо да изградимо модеран алат за преузимање датотека који људи заправо уживају у коришћењу. Прва велика препрека је интерфејс.Корисници више не желе само дугме "изабери датотеку". Очекују повратне информације у реалном времену и глатко искуство, без обзира да ли су на десктопу или мобилном. Редовно преузимање датотека користећи основне ХТМЛ форме је споро и збуњујуће.Корисници не виде никакав напредак или поруку, што их оставља гледајући на празан екран док чекају да се њихове датотеке учитају. Као програмер, морате да проверите да ли је датотека дозвољена, уверите се да није превелика и да се бавите различитим типовима датотека, све док изгледа лако и глатко за кориснике. Складиштење додаје још један слој сложености. Да ли складиштите датотеке локално? Поставите резервне копије? Пустите их кроз ЦДН тако да глобални корисници не суочавају кашњења? Управљање сопственим системом је скупо и дуготрајно, али АПИ за складиштење у облаку такође могу бити преплављени. Pored toga, bezbednost je takođe velika briga. Преузимање датотека је један од најчешћих вектора напада на вебу.Ако не проверите датотеке правилно, ризикујете да се суочите са злонамерним софтвером и цурењем података. Learn more about ! secure file handling on OWASP’s guidelines Bezbedno rukovanje fajlovima po OWASP smernicama Bezbedno rukovanje fajlovima po OWASP smernicama И на крају, скалабилност. Довољно је лако управљати преузимањима када имате десет корисника. Али шта се дешава када стотине људи истовремено користе алат за преузимање датотека? Сада такође морате да се бавите брзином интернета, колико оптерећења ваш сервер може да се носи и где да чувате све датотеке. Building the Solution Izgradnja rešenja 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: Стил за модеран изглед Сада, хајде да додамо неке ЦСС да би наш интерфејс визуелно привлачан. За комплетан ЦСС. GitHub репозиторијум GitHub репозиторијум Ево како изгледа након додавања ЦСС: Корак 3: Имплементација основне функционалности ЈаваСцрипта У овом кораку ћемо изградити логику која омогућава датотеку за преузимање, укључујући управљање догађајима, валидацију, праћење напретка и управљање датотекама. Корак 3.1: Подешавање класе и почетна конфигурација Поставите класу ФилеМанагер и позовите потребне ДОМ елементе. Иницирајте празан мареј да бисте пратили учитане датотеке и позвали метод да бисте додали слушаоце догађаја. 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: Подешавање слушалаца догађаја Причврстите управљаче за кликање, превлачење и падање и избор датотеке како бисте уплоадер учинили интерактивним. 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: Управљање и валидација датотека Филтрирајте датотеке на основу величине и наставите само са важећим. 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 ⚠️Важно: Валидација датотека на страни клијента и сервера. Провери на страни клијента дају тренутну повратну информацију, али само валидација на страни сервера штити нашу апликацију од злонамерних преузимања. Корак 3.4: Учитавање више фајлова Прикажите траку напретка, отпремите сваку датотеку један по један и сакријте напредак када је завршен. 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: Прикажи учитане датотеке Преузмите учитану датотеку у УИ са иконом, величином, датумом и опцијом за брисање. 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: Уклањање датотека Дозволите корисницима да бришу датотеке, ажурирајући листу датотека и кориснички интерфејс у складу с тим. deleteFile(fileName) { this.files = this.files.filter((f) => f.name !== fileName); this.fileList.innerHTML = ""; this.files.forEach((f) => this.addFileToList(f)); } Корак 3.8: Иконе датотека засноване на типу Прикажите одговарајуће иконе на основу типа датотеке МИМЕ за боље корисничко искуство. 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 "📁"; } 💡Савет: Прикажите иконе датотека и форматиране величине како бисте корисницима дали бољу повратну информацију. Корак 3.9: Форматирање величине датотеке Конвертујте величине датотека у читљиве јединице као што су КБ, МБ или ГБ. 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: Прикажи и сакриј напредак уплоад Контролишите видљивост траке напретка и динамички ажурирајте њену вредност. 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; } } Step 3.11: Initialising the File Manager Креирајте инстанцу класе ФилеМанагер да бисте покренули функционалност. const fileManager = new FileManager(); // Start the file manager Преузмите комплетан изворни код за овај алат за преузимање датотека овде! Преузмите комплетан изворни код за овај алат за преузимање датотека овде! Преузмите комплетан изворни код за овај алат за преузимање датотека овде! Са овим, наш алат за преузимање датотека је потпуно интерактиван, а корисници могу лако превући, спуштати, учитати и управљати датотекама. Ref: MDN Web API - датотека МДН Веб АПИ - датотека МДН Веб АПИ - датотека Корак 4: Интегрисање датотеке за складиштење у облаку У овом кораку, узмемо наш алат за преузимање датотека на следећи ниво повезивањем са облаком. да директно извучете из складиштења у облаку, генеришете сигурне везе и учините да се све осећа беспрекорно за кориснике. Филестацк Филестацк Прво, додајте Филестацк СДК у наш ХТМЛ наслов: https://static.filestackapi.com/filestack-js/4.x.x/filestack.min.js Затим, проширимо нашу класу ФилеМанагер да интегришемо уплоад у облаку, прикажемо прегледе и управљамо линковима за датотеке. За детаљну документацију, посете . Filestack’s API reference Filestack's API референца Корак 4.1: Проширење ФилеМанагер-а са Филестацк интеграцијом 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 Важно: Користите свој API кључ уместо YOUR_API_KEY_HERE; можете га добити са Филестацк контролне табеле. Важно: Користите свој API кључ уместо YOUR_API_KEY_HERE; можете га добити са Филестацк контролне табеле. ⚠️ Филестацк и друге услуге у облаку захтевају АПИ кључеве и подешавање.За производњу, увек заштитите своје АПИ кључеве и конфигуришите одговарајуће сигурносне поставке. Корак 4.2: Иницијализација слушалаца догађаја помоћу дугмета Филестацк 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: Додавање дугмета Филестацк Пицкер 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: Конфигурисање и отварање Филестацк Пицкер 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: Приказ учитаних датотека из складишта у облаку 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: Уплоад датотека директно у Филестацк 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: Иницијализација побољшаног менаџера датотека const fileManager = new EnhancedFileManager(); // Instantiate the EnhancedFileManager to replace the default FileManager functionality Додајте овај ЦСС да одговара нашим постојећим стиловима: .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); } Ова интеграција претвара наш основни менаџер датотека у моћан алат. Може да се бави датотекама из више извора, локалним уплоадима, услугама складиштења у облаку као што су Гоогле Диск и Дропбок, па чак и увоз УРЛ-а. Филестацк управља свим тешким подизањем иза сцене. То укључује управљање различитим провајдерима складишта, дистрибуцијом ЦДН-а и трансформацијама датотека. Ref: Филестацк документација Filestack документација Filestack Documentation Poboljšanje implementacije Сада, хајде да додамо неке напредне функције нашем алату за преузимање који ће направити наш менаџер датотека. Преглед фајлова у реалном времену Корисници воле тренутне повратне информације. За слике, видео записе и ПДФ-ове, можемо генерисати прегледе право у листи датотека: generatePreview(file) { if (file.mimetype && file.mimetype.startsWith("image/")) { return ` `; } else if (file.mimetype === "application/pdf") { return ` `; } return ""; } Додајте ово у нашу ЦСС датотеку: .file-preview { width: 100%; max-height: 150px; object-fit: cover; border-radius: 10px; margin-top: 10px; cursor: pointer; } Ажурирајте функцију addCloudFileToList да бисте приказали прегледе овако: 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); } 💡Савет: Инстант прегледи побољшавају поверење корисника тако што им омогућавају да визуелно потврде уплоад. Претраживање и филтрирање Направите наш алат за преузимање датотека још једноставнијим тако што ћете омогућити корисницима да претражују и филтрирају датотеке у реалном времену: 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 позовите this.implementSearch(); овако: class EnhancedFileManager extends FileManager { constructor() { super(); this.client = filestack.init("YOUR_API_KEY"); this.picker = null; this.implementSearch(); } ... } // <-- add this Додајте овај 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; } ️ Најбоља пракса: Увек дозволите корисницима да лако филтрирају датотеке приликом управљања великим списковима. Лепота коришћења Филестацк-а је у томе што су у њој уграђене многе напредне функције. Добијате трансформације слика, конверзије докумената, па чак и интелигентно исецање из кутије. То значи да не морате да градите ове сложене карактеристике од нуле. Такође нећете морати да одржавате више услуга треће стране. Најбоље праксе и уобичајени питови Ево неких важних лекција које сам научио (понекад на тежак начин) приликом изградње алата за преузимање датотека: Валидација датотека и на клијенту и на серверу: Валидација на страни клијента је корисна јер даје корисницима брзу повратну информацију, али права сигурност долази и од провере датотека на серверу. Правилно управљање грешкама: Уплоад не иде увек глатко. датотеке могу пропасти, мреже могу пасти, или сервери могу да се сруше. Увек покажите јасне поруке о грешкама и дајте корисницима начин да покушају поново. Accessibility Matters: Уверите се да ваш уплоадер ради за све. Додајте АРИА ознаке за читаче екрана, омогућите навигацију тастатуре и не ослањајте се само на боје да бисте приказали поруке. Гледајте перформансе учитавања: Велике датотеке на спорим мрежама могу да се заврше или да пропадне. Коришћење прекидача учитавања може помоћи, а показивање корисницима колико је времена преостало чини велику разлику. алати као што је Филестацк то раде за вас, али ако га сами градите, не прескочите. Планирање трошкова складиштења: складиштење датотека може брзо постати скупо. Чистите привремене датотеке, компресирајте их где је то могуће и поставите ограничења величине датотеке на основу капацитета ваше инфраструктуре. Чувајте датотеке безбедно: Увек чувајте учитане датотеке изван веб кореновог директоријума и служе их преко потписаних УРЛ-ова како бисте спречили неовлашћени приступ и побољшали сигурност. Закључак Изградња модерног алата за преузимање датотека не мора бити компликована. Почните са чврстим ХТМЛ темељима, побољшајте га корак по корак, и . use tools like Filestack for cloud storage користите алате као што је Филестацк за складиштење у облаку Циљ је гладак, кориснички прихватљив уплоадер који људи заправо уживају у коришћењу. Фокусирајте се на искуство прво: учините да се превлачење и спуштање осећају природно, прегледи се одмах учитавају, а шипке напретка су значајне. Држите сложену технологију иза сцене, скривену иза чистог и једноставног интерфејса.Када то функционише, можете додати напредне функције као што су дељење датотека, заједничко уређивање или аутоматизоване радне токове. Управљање датотекама је нешто са чиме корисници комуницирају сваки дан.Добијте ово право, и имаћете срећније кориснике, боље ангажовање и много мање карте за подршку. Ресурси за даље учење ГитХуб Репозиторијум са комплетним кодом МДН Веб АПИ - датотека OWASP - Bezbedno preuzimanje fajlova Filestack документација ГитХуб Репозиторијум са комплетним кодом МДН Веб АПИ - датотека OWASP - Bezbedno preuzimanje fajlova Filestack документација O autoru Шефали Јангид је веб програмер, технички писац и креатор садржаја страствени за изградњу интуитивних алата за програмере и образовних ресурса. , помаже програмерима да креирају боља веб искуства са чистим, ефикасним и приступачним кодом. Мађарска.dev Мађарска.dev