Come costruire uno strumento File Uploader con Drag-and-Drop e Cloud Storage

By Shefali Jangid Avete mai provato a caricare file su un sito web?La maggior parte di loro si sentono come se fossero bloccati nel passato. Gli utenti di oggi si aspettano di più. vogliono uno strumento di caricamento di file che si sente senza sforzo, trascinare e scaricare dal loro desktop, visualizzazioni istantanee e barre di progresso che in realtà permettono loro di sapere cosa sta succedendo. E non dovrebbe importare se sono sul desktop o sul cellulare, o caricando una piccola immagine o un video enorme. Questo è esattamente ciò che costruiremo in questa guida. Creeremo un moderno strumento di caricamento di file con caricamenti drag-and-drop, monitoraggio del progresso in tempo reale e integrazione del cloud storage, in modo da non dover fare tutto da zero. Mantenere il codice pulito e semplice con spiegazioni in modo da poterlo usare facilmente per i vostri progetti. Alla fine di questo libro avremo un che soddisfa le aspettative di oggi e rende la gestione dei file simile e intuitiva. File Uploader strumento user-friendly File Uploader strumento user-friendly Key Takeaways chiave di Takeaways Aggiungi la funzionalità drag-and-drop al nostro strumento di caricamento che si sente naturale e semplice da usare. Costruisci uno strumento robusto che gestisca in modo efficiente diversi tipi e dimensioni di file. Integrare il cloud storage senza problemi senza spendere giorni sui documenti API. Visualizza i progressi in tempo reale in modo che gli utenti sappiano sempre cosa sta accadendo. Gestire gli errori con grazia, fornendo un feedback chiaro. Understanding the Challenge Capire la sfida Costruire una funzione di upload di file suona semplice all'inizio. Abbiamo solo bisogno di lasciare che gli utenti scelgano un file e colpiscano l'upload, giusto? In realtà, è molto più complicato, soprattutto se vogliamo costruire uno strumento di caricamento di file moderno che le persone realmente amano usare. Il primo grande ostacolo è l'interfaccia. Gli utenti non vogliono più solo un pulsante "scegli file". Si aspettano drag-and-drop, feedback in tempo reale e un'esperienza fluida, sia sul desktop che sul mobile. Poi arriva la parte tecnica. caricamenti di file regolari utilizzando i moduli HTML di base sono lenti e confusi. gli utenti non vedono alcun progresso o messaggio, che li lascia guardare a uno schermo vuoto mentre attendono i loro file per caricare. Come sviluppatore, è necessario controllare se il file è consentito, assicurarsi che non sia troppo grande e gestire diversi tipi di file, rendendo tutto facile e liscio per gli utenti. Lo storage aggiunge un altro livello di complessità.Stieni i file localmente?Stieni i backup?Stieni attraverso un CDN in modo che gli utenti globali non si trovino di fronte ai ritardi? Il rilascio del proprio sistema è costoso e richiede tempo, ma anche le API di storage cloud possono sembrare sconvolgenti. Oltre a questo, la sicurezza è anche una grande preoccupazione. I file caricati sono uno dei vettori di attacco più comuni sul web. Se non verifichi correttamente i file, rischi di affrontare malware e perdite di dati. Learn more about ! secure file handling on OWASP’s guidelines gestione sicura dei file secondo le linee guida di OWASP gestione sicura dei file secondo le linee guida di OWASP E infine, la scalabilità. è abbastanza facile gestire i upload quando hai dieci utenti. Ma cosa succede quando centinaia di persone utilizzano il tuo file uploader allo stesso tempo? ora devi anche affrontare la velocità di Internet, quanto carico il tuo server può gestire e dove archiviare tutti i file. Building the Solution Costruire la soluzione 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: Passo 2: Styling per un look moderno Ora, aggiungiamo qualche CSS per rendere la nostra interfaccia visivamente attraente. Per il CSS completo. Il repository di GitHub Il repository di GitHub Ecco come appare dopo aver aggiunto il CSS: Passo 3: Implementazione della funzionalità JavaScript Core In questo passaggio, costruiremo la logica che alimenta il file uploader, tra cui la gestione degli eventi, la convalida, il monitoraggio del progresso e la gestione dei file. Passo 3.1: Impostazione di classe e configurazione iniziale Impostare la classe FileManager e fare riferimento agli elementi DOM necessari. inizializzare un array vuoto per tenere traccia dei file caricati e chiamare il metodo per aggiungere ascoltatori di eventi. 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 Passo 3.2: Impostare gli ascoltatori degli eventi Attaccare i gestori per cliccare, trascinare e scaricare e selezionare i file per rendere l'upload interattivo. 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 Passo 3.3: Trattamento e convalida dei file Filtrare i file in base alla dimensione e procedere solo con quelli validi. 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 ⚠️ Importante: Validare i file sia sul lato client che sul lato server. I controlli sul lato client forniscono feedback istantanei, ma solo la convalida sul lato server protegge la nostra app da caricamenti dannosi. Passo 3.4: carica file multipli Mostra la barra di progresso, carica ogni file uno alla volta e nascondi il progresso una volta fatto. 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 Passo 3.6: visualizzare i file caricati Render il file caricato nell'interfaccia utente con un'icona, dimensione, data e un'opzione di cancellazione. 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); } Passo 3.7: Eliminare i file Consenti agli utenti di eliminare i file, aggiornando di conseguenza l'elenco dei file e l'interfaccia utente. deleteFile(fileName) { this.files = this.files.filter((f) => f.name !== fileName); this.fileList.innerHTML = ""; this.files.forEach((f) => this.addFileToList(f)); } Passo 3.8: Le icone dei file in base al tipo Visualizza le icone appropriate in base al tipo di file MIME per una migliore esperienza utente. 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 "📁"; } Suggerimento: Mostra le icone dei file e le dimensioni formattate per dare un feedback migliore agli utenti. Passo 3.9: Formattazione delle dimensioni dei file Convertire le dimensioni dei file in unità leggibili come KB, MB o 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]; } Passo 3.10: Mostrare e nascondere i progressi di caricamento Controlla la visibilità della barra di progresso e aggiorna dinamicamente il suo valore. 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; } } Passo 3.11: inizializzare il File Manager Creare un'istanza della classe FileManager per avviare la funzionalità. const fileManager = new FileManager(); // Start the file manager Accedere al codice sorgente completo per questo file uploader strumento qui! Accedere al codice sorgente completo per questo file uploader strumento qui! Accedere al codice sorgente completo per questo file uploader strumento qui! Con questo, il nostro file uploader tool è completamente interattivo, e gli utenti possono trascinare, scaricare, caricare e gestire i file senza sforzo. Ref: MDN Web API - File MDN Web APIs - File MDN Web APIs - File Passo 4: Integrare il file stack per il cloud storage In questo passaggio, porteremo il nostro file uploader tool al livello successivo collegandolo al cloud. per trarre direttamente dal cloud storage, generare collegamenti sicuri e rendere tutto senza problemi per gli utenti. filastrocco filastrocco In primo luogo, aggiungi il Filestack SDK al nostro intestazione HTML: https://static.filestackapi.com/filestack-js/4.x.x/filestack.min.js Quindi, estendiamo la nostra classe FileManager per integrare i caricamenti cloud, visualizzare le anteprima e gestire i collegamenti ai file. Per documentazione dettagliata, visita . Riferimento API di Filestack Riferimento API di Filestack Passo 4.1: Estendere il FileManager con l'integrazione di 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 Importante: Utilizzare la propria chiave API al posto di YOUR_API_KEY_HERE; è possibile ottenerla dal dashboard Filestack. Importante: Utilizzare la propria chiave API al posto di YOUR_API_KEY_HERE; è possibile ottenerla dal dashboard Filestack. Filestack e altri servizi cloud richiedono chiavi API e configurazione.Per l'uso di produzione, proteggere sempre le chiavi API e configurare le impostazioni di sicurezza appropriate. Passo 4.2: Initializzare gli ascoltatori di eventi con il pulsante 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 Passo 4.3: Aggiungere il pulsante 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 Passo 4.4: Configurare e aprire il 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 Passo 4.5: visualizzare i file caricati dal cloud storage 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 Passo 4.6: caricamento dei file direttamente in 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 Passo 4.7: inizializzare il File Manager migliorato const fileManager = new EnhancedFileManager(); // Instantiate the EnhancedFileManager to replace the default FileManager functionality Aggiungi questo CSS per corrispondere ai nostri stili esistenti: .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); } Questa integrazione trasforma il nostro file manager di base in uno strumento potente. Può gestire file provenienti da più fonti, caricamenti locali, servizi di storage cloud come Google Drive e Dropbox, o persino importazioni di URL. Filestack gestisce tutto il sollevamento pesante dietro le quinte. Ciò include la gestione di diversi provider di archiviazione, distribuzione CDN e trasformazioni di file. Ref: Documentazione Filestack Documentazione Filestack Documentazione Filestack Migliorare l’attuazione Ora, aggiungiamo alcune funzionalità avanzate al nostro strumento di caricamento che renderà il nostro file manager eccellente. Previsioni di file in tempo reale Per le immagini, i video e i PDF, possiamo generare le visualizzazioni direttamente nell'elenco dei file: generatePreview(file) { if (file.mimetype && file.mimetype.startsWith("image/")) { return ` `; } else if (file.mimetype === "application/pdf") { return ` `; } return ""; } Aggiungi questo al nostro file CSS: .file-preview { width: 100%; max-height: 150px; object-fit: cover; border-radius: 10px; margin-top: 10px; cursor: pointer; } E aggiornare la funzione addCloudFileToList per visualizzare le visualizzazioni come questa: 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); } Suggerimento: le anteprima istantanee migliorano la fiducia degli utenti consentendo loro di confermare visualmente i caricamenti. Ricerca e filtrazione Rendi il nostro file uploader strumento ancora più user-friendly consentendo agli utenti di cercare e filtrare i file in tempo reale: 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"; }); } Nel costruttore EnhancedFileManager, chiamare this.implementSearch(); come questo: class EnhancedFileManager extends FileManager { constructor() { super(); this.client = filestack.init("YOUR_API_KEY"); this.picker = null; this.implementSearch(); } ... } // <-- add this Aggiungi questo 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; } ️ Best Practice: consente sempre agli utenti di filtrare facilmente i file quando si gestiscono grandi elenchi. La bellezza di utilizzare Filestack è che molte funzionalità avanzate vengono incorporate. Ottieni trasformazioni di immagini, conversioni di documenti e persino un'intelligente estrazione della scatola. Questo significa che non è necessario costruire queste caratteristiche complesse da zero. E non dovrai anche mantenere più servizi di terze parti. Le migliori pratiche e i pitfalls comuni Ecco alcune lezioni importanti che ho imparato (a volte in modo difficile) durante la costruzione di strumenti di caricamento di file: Validare i file sia sul client che sul server: la convalida da parte del client è utile perché fornisce un feedback rapido agli utenti, ma la vera sicurezza deriva anche dal controllo dei file sul server. Gestire correttamente gli errori: i caricamenti non vanno sempre senza intoppi. I file possono fallire, le reti possono cadere o i server possono crollare. Mostra sempre messaggi di errore chiari e dà agli utenti un modo per riprovare. Accessibilità: Assicurati che il tuo caricabatterie funzioni per tutti.Aggiungi etichette ARIA per i lettori di schermo, consente la navigazione della tastiera e non fare affidamento solo sui colori per mostrare i messaggi.Utilizza la struttura HTML corretta e prova con gli strumenti di accessibilità. Guardare le prestazioni di caricamento: i file di grandi dimensioni su reti lente possono uscire o fallire.Utilizzare caricamenti tagliati può aiutare, e mostrare agli utenti quanto tempo rimane fa una grande differenza.Gli strumenti come Filestack gestiscono questo per te, ma se lo stai costruendo da solo, non saltarlo. Pianificare i costi di archiviazione: l'archiviazione dei file può diventare costosa rapidamente. Pulire i file temporanei, comprimerli dove possibile e impostare limiti alla dimensione dei file in base alla capacità dell'infrastruttura. Store Files Securely: Always store uploaded files outside your web root directory and serve them through signed URLs to prevent unauthorised access and improve security. Conclusione Costruire uno strumento di upload di file moderno non deve essere complicato. Iniziare con una solida base HTML, migliorarlo passo dopo passo, e . Utilizzare strumenti come Filestack per il cloud storage Utilizzare strumenti come Filestack per il cloud storage L'obiettivo è un caricabatterie liscio e user-friendly che le persone realmente godono di utilizzare. Concentrarsi sull'esperienza prima: rendere il drag-and-drop sentire naturale, le visualizzazioni caricare istantaneamente, e le barre di progresso significativo. Mantenere la tecnologia complessa dietro le quinte, nascosta dietro un'interfaccia pulita e semplice. Una volta che funziona, è possibile aggiungere funzionalità avanzate come la condivisione di file, la modifica collaborativa o i flussi di lavoro automatizzati. Gestione dei file è qualcosa con cui gli utenti interagiscono ogni giorno. Ottenere questo giusto, e avrai utenti più felici, migliore coinvolgimento, e molto meno biglietti di supporto. Risorse per un ulteriore apprendimento GitHub Repository con codice completo MDN Web APIs - File OWASP - File Upload sicuro Documentazione Filestack GitHub Repository con codice completo MDN Web APIs - File OWASP - File Upload sicuro Documentazione Filestack A proposito dell'autore Shefali Jangid è uno sviluppatore web, scrittore tecnico e creatore di contenuti appassionato di costruire strumenti di sviluppo intuitivi e risorse educative. Aiutare gli sviluppatori a creare esperienze web migliori con codice pulito, efficiente e accessibile. Scuola.dev Scuola.dev