Како да изградите алатка за испраќање на датотеки со Drag-and-Drop и облак за складирање

By Shefali Jangid Дали некогаш сте се обиделе да испратите датотеки на веб-страница?Повеќето од нив се чувствуваат како да се заглавени во минатото. Корисниците денес очекуваат повеќе. Тие сакаат алатка за преземање на датотеки која се чувствува без напор, одвлекување и спуштање од нивната десктоп, инстант прегледи и ленти за напредок кои всушност им дозволуваат да знаат што се случува. И не треба да е важно дали тие се на десктоп или мобилен, или поставување на мала слика или масивно видео. Тоа е токму она што ќе го изградиме во овој водич. Ќе создадеме модерна алатка за пренесување на датотеки со префрлување и спуштање, следење на напредокот во реално време и интеграција на облак за складирање, така што нема да мораме да правиме сè од нула. Ние ќе го задржиме кодот чист и едноставен со објаснувања, така што лесно можете да го користите за вашите сопствени проекти. До крајот на оваа книга ќе имаме што ги исполнува денешните очекувања и го прави управувањето со датотеки да се чувствува мазно и интуитивно. Корисничко-пријателски File Uploader алатка Корисничко-пријателски File Uploader алатка Key Takeaways Клучни Takeaways Додадете функционалност за повлекување и спуштање на нашата алатка за поставување која се чувствува природно и едноставно да се користи. Изградете силна алатка која ефикасно се справува со повеќе типови и големини на датотеки. Интегрирајте го складирањето во облак беспрекорно без да трошите денови на API документи. Прикажи напредок во реално време, така што корисниците секогаш знаат што се случува. Ракувајте со грешки грациозно, обезбедувајќи јасни повратни информации. Understanding the Challenge Разбирање на предизвикот Изградбата на функцијата за качување на датотеки звучи едноставно на почетокот. Ние само треба да им дозволиме на корисниците да изберете датотека и да го погодиме качувањето, нели? Во реалноста, тоа е многу посложено, особено ако сакаме да изградиме модерна алатка за пренесување на датотеки што луѓето навистина уживаат во користење. Првата голема пречка е интерфејсот. корисниците повеќе не сакаат само копче "изберете датотека". Тие очекуваат превртување и спуштање, повратни информации во реално време и беспрекорно искуство без разлика дали се на десктоп или мобилен. Редовното пренесување на датотеки со користење на основните HTML форми е бавно и збунувачко.Корисниците не гледаат никаков напредок или порака, што ги остава да гледаат во празен екран додека чекаат да ги пренесат своите датотеки. Како програмер, треба да проверите дали датотеката е дозволена, да бидете сигурни дека не е преголема и да се справувате со различни типови на датотеки, додека го правите да изгледа лесно и мазно за корисниците. Складирањето додава уште еден слој на сложеност. Дали датотеки ги чувате локално? Поставете резервни копии? Потиснете ги преку CDN за глобалните корисници да не се соочуваат со одложувања? Воведувањето на вашиот сопствен систем е скапо и потребно време, но API-ите за складирање во облак исто така може да се чувствуваат преоптоварувачки. Покрај тоа, безбедноста е исто така голема загриженост. Пренесувањето на датотеки е еден од најчестите вектори на напади на интернет.Ако не ги проверите датотеките правилно, ризикувате да се соочите со малициозен софтвер и истекување на податоци. Learn more about ! secure file handling on OWASP’s guidelines безбедно ракување со датотеки според насоките на OWASP безбедно ракување со датотеки според насоките на OWASP И на крајот, скалабилност. Доволно е лесно да се справите со поставувањата кога имате десет корисници. Но, што се случува кога стотици луѓе истовремено ја користат вашата алатка за испраќање на датотеки? Сега, исто така, мора да се справите со брзината на интернет, колку оптоварување може да се справи со вашиот сервер и каде да ги чувате сите датотеки. Building the Solution Изградба на решението 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: Стил за модерен изглед Сега, ајде да додадеме некои CSS за да го направиме нашиот интерфејс визуелно привлечен. За целосниот CSS. Репозиториум на GitHub Репозиториум на GitHub Еве како изгледа после додавањето на CSS: Чекор 3: имплементирање на основната функционалност на JavaScript Во овој чекор, ќе ја изградиме логиката која го поттикнува преземачот на датотеки, вклучувајќи обработка на настани, валидација, следење на напредокот и управување со датотеки. Чекор 3.1: Поставување на класа и почетна конфигурација Поставете ја класата FileManager и упатете ги потребните елементи на DOM. Инициализирајте празна матрица за да ги следите преземените датотеки и да го повикате методот за да додадете слушатели на настани. 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: Икони за датотеки врз основа на типот Прикажи соодветни икони врз основа на MIME тип на датотека за подобро корисничко искуство. 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; } } Чекор 3.11: Инициализирање на менаџерот на датотеки Креирајте инстанца на класата FileManager за да ја започнете функционалноста. const fileManager = new FileManager(); // Start the file manager Пристап до целосниот изворниот код за оваа алатка за пренос на датотеки тука! Пристап до целосниот изворниот код за оваа алатка за пренос на датотеки тука! Пристап до целосниот изворниот код за оваа алатка за пренос на датотеки тука! Со ова, нашата алатка за испраќање на датотеки е целосно интерактивна, а корисниците можат лесно да ги префрлат, спуштаат, испраќаат и управуваат со датотеки. Ref: MDN Web API - датотека MDN Web APIs - датотека MDN Web APIs - датотека Чекор 4: Интегрирање на FileStack за облачно складирање Во овој чекор, ќе ја однесеме нашата алатка за пренос на датотеки на следното ниво со поврзување со облакот. да се повлече директно од облакот за складирање, да се генерираат безбедни врски и да се направи сè да се чувствува беспрекорно за корисниците. Филестак Филестак Прво, додадете го Filestack SDK во нашиот HTML наслов: https://static.filestackapi.com/filestack-js/4.x.x/filestack.min.js Потоа, ајде да ја прошириме нашата класа FileManager за да ги интегрираме облачните поставувања, да ги прикажеме прегледите и да управуваме со линковите за датотеки. За детална документација, посетете . API референца на Filestack API референца на Filestack Чекор 4.1: Проширување на FileManager со Filestack интеграција 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; можете да го добиете од таблата за контрола на Filestack. Важно: Користете го вашиот сопствен API клуч наместо YOUR_API_KEY_HERE; можете да го добиете од таблата за контрола на Filestack. Filestack и другите облачни услуги бараат API клучеви и подесување.За производствена употреба, секогаш заштитете ги вашите API клучеви и конфигурирајте соодветни безбедносни поставки. Чекор 4.2: Инициализирање на слушателите на настани со копчето Filestack 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: Додавање на копчето Filestack Picker 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: Конфигурирање и отворање на 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: Прикажување на преземени датотеки од облак за складирање 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: Пренесување на датотеки директно во 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: Инициализирање на засилениот менаџер на датотеки const fileManager = new EnhancedFileManager(); // Instantiate the EnhancedFileManager to replace the default FileManager functionality Додадете го овој CSS за да одговара на нашите постоечки стилови: .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); } Оваа интеграција го претвора нашиот основен менаџер на датотеки во моќна алатка. Таа може да се справи со датотеки од повеќе извори, локални поставувања, услуги за складирање во облак како Google Drive и Dropbox, па дури и увоз на URL адреси. Filestack управува со сите тешки подигање зад сцените. That includes handling different storage providers, CDN distribution, and file transformations. Ref: Документација на FileStacks Филозофска документација Филозофска документација Подобрување на имплементацијата Сега, ајде да додадеме некои напредни функции на нашата алатка за испраќање што ќе го направи нашиот менаџер на датотеки да се издвои. Преглед на датотеки во реално време Корисниците сакаат инстант повратни информации. За слики, видеа и PDF, можеме да генерираме прегледи директно во листата на датотеки: generatePreview(file) { if (file.mimetype && file.mimetype.startsWith("image/")) { return ` `; } else if (file.mimetype === "application/pdf") { return ` `; } return ""; } Додадете го ова во нашата CSS датотека: .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; } Најдобра пракса: Секогаш дозволувајте на корисниците лесно да филтрираат датотеки при управување со големи списоци. Убавината на користењето на Filestack е дека многу напредни функции доаѓаат вградени. Ќе добиете трансформации на слики, конверзии на документи, па дури и интелигентно исечување надвор од кутијата. Тоа значи дека не треба да ги градите овие комплексни карактеристики од нула. И нема да треба да одржувате повеќе услуги од трети страни. Најдобри практики и заеднички стапици Еве некои важни лекции што ги научив (понекогаш на тежок начин) додека градев алатки за пренесување на датотеки: Верификување на датотеки и на клиентот и на серверот: Верификувањето од страна на клиентот е корисно затоа што им дава на корисниците брзи повратни информации, но вистинската безбедност доаѓа и од проверка на датотеките на серверот. Правилно управување со грешките: Пренесувањата не одат секогаш глатко. Датотеки може да пропаднат, мрежи може да падне, или сервери може да се распадне. Секогаш покажуваат јасни пораки за грешки и им даде на корисниците начин да се обиде повторно. Пристапност работи: Осигурајте се дека вашиот предавач работи за секого. Додадете ARIA етикети за екрански читатели, дозволете навигација на тастатурата, и не се потпираат само на бои за да се прикаже пораки. Watch Upload Performance: Big files on slow networks can time out or fail. Using chunked uploads can help, and showing users how much time is left makes a big difference. Tools like Filestack handle this for you, but if you’re building it yourself, don’t skip it. Планирање на трошоците за складирање: складирањето на датотеки може брзо да стане скапо. Исчистете ги привремените датотеки, компресирајте ги каде што е можно и поставете граници за големината на датотеките врз основа на капацитетот на вашата инфраструктура. Чувајте ги преземените датотеки безбедно: Секогаш чувајте ги преземените датотеки надвор од веб-коренскиот директориум и сервирајте ги преку потпишани URL-адреси за да спречите неовластен пристап и да ја подобрите безбедноста. Заклучок Изградбата на модерна алатка за пренесување на датотеки не мора да биде комплицирана. Започнете со солидна HTML основа, подобрете ја чекор по чекор, и . use tools like Filestack for cloud storage Користете алатки како Filestack за складирање во облак Целта е мазна, корисничка-пријателски преземач кој луѓето навистина уживаат во користење. Фокусирајте се на искуството прво: да се направи префрлување и спуштање се чувствуваат природно, прегледи се вчитаат веднаш, и прогрес ленти значајни. Чувајте ја сложената технологија зад сцената, скриена зад чист и едноставен интерфејс. Откако тоа ќе работи, можете да додадете напредни функции како споделување на датотеки, заедничко уредување или автоматизирани работни процеси. Управување со датотеки е нешто со што корисниците комуницираат секој ден. Добијте го ова право, и ќе имате посреќни корисници, подобро ангажирање и многу помалку билети за поддршка. Ресурси за понатамошно учење Репозиториум на GitHub со комплетен код MDN Web APIs - датотека OWASP – безбедно испраќање на датотеки Филозофска документација Репозиториум на GitHub со комплетен код MDN Web APIs - датотека OWASP – безбедно испраќање на датотеки Филозофска документација За авторот Shefali Jangid е веб програмер, технички писател и креатор на содржини страстен за градење на интуитивни алатки за програмери и образовни ресурси. Да им помогне на програмерите да создадат подобри веб искуства со чист, ефикасен и достапен код. shefali.dev Ѓоковиќ.dev