ドラッグ・アンド・ドロップとクラウドストレージでファイルアップロードツールを構築する方法

By Shefali Jangid ファイルをウェブサイトにアップロードしてみたことがありますか? ほとんどの人は過去に閉じ込められているような気がします。 今日のユーザーはより多くを期待しています。彼らは、デスクトップから容易に、ドラッグアンド・ドロップ、インスタントプレビュー、そして実際に何が起こっているかを知らせる進捗バーを感じるファイルアップロードツールを望んでいます。 そして、デスクトップやモバイルにいるか、小さな画像や巨大なビデオをアップロードしているかは関係ありません。 それはまさに、このガイドで私たちが構築するものです。 ドラッグ・アンド・ドロップアップロード、リアルタイムの進捗追跡、クラウドストレージ統合を備えた近代的なファイルアップロードツールを作成するので、すべてをゼロからやる必要はありません。 私たちは説明でコードをきれいでシンプルに保ち、あなた自身のプロジェクトに簡単に使用することができます。 このガイドの終わりに、私たちは、 それは今日の期待を満たし、ファイル管理をスムーズで直感的なものにします。 ユーザーフレンドリーファイルアップロードツール ユーザーフレンドリーファイルアップロードツール Key Takeaways Key Takeaways 自然で使いやすいアップロードツールに drag-and-drop 機能を追加します。 複数のファイルタイプとサイズを効率的に処理する強力なツールを構築します。 APIドキュメントに時間を費やすことなくシームレスにクラウドストレージを統合します。 リアルタイムの進捗状況を表示し、ユーザーは常に何が起こっているかを知ることができます。 エラーを優しく処理し、明確なフィードバックを提供します。 Understanding the Challenge 挑戦を理解 ファイルアップロード機能の構築は最初はシンプルで、ユーザーがファイルを選択してアップロードにヒットさせなければなりません。 実際には、人々が実際に楽しむ現代のファイルアップロードツールを構築したい場合は特に、より複雑です。 最初の大きな障害はインターフェイスで、ユーザーはもはや「ファイルを選択」ボタンを望んでいません。 彼らは、ドラッグ・アンド・ドロップ、リアルタイムのフィードバック、デスクトップやモバイル上で、スムーズな体験を期待しています。 通常のファイルアップロードは、基本的なHTMLフォームを使用して遅く、混乱します. ユーザーは進捗状況やメッセージを表示しません。 開発者として、ファイルが許可されているかどうかを確認し、大きすぎないことを確認し、異なる種類のファイルを処理し、ユーザーにとって簡単でスムーズに見えるようにする必要があります。 ストレージは複雑さのもう一つの層を追加します。 ファイルをローカルに保存しますか? バックアップを設定しますか? CDN を通じてファイルを押し出して、グローバルユーザーが遅延に直面しないようにしますか? 独自のシステムをリリースすることは高価で時間がかかりますが、クラウドストレージAPIも圧倒的です。 それに加えて、セキュリティも大きな懸念です。 ファイルのアップロードは、ウェブ上で最も一般的な攻撃ベクターの1つです. ファイルを正しく検証しない場合は、マルウェアやデータ漏洩に直面するリスクがあります。 Learn more about ! secure file handling on OWASP’s guidelines OWASPのガイドラインに基づく安全なファイル処理 OWASPのガイドラインに基づく安全なファイル処理 最後に、スケーラビリティ. 10 人のユーザーがいるときにアップロードを処理するのは十分に簡単です。 しかし、何百人もの人が同時にファイルアップロードツールを使用しているとどうなるでしょうか? 今、インターネットの速度、サーバーがどれだけの負荷を処理できるか、すべてのファイルをどこに保存するかについても取り組まなければなりません。 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: Step 2: Styling for a Modern Look トップページ 今、私たちのインターフェイスを視覚的に魅力的にするために、いくつかのCSSを追加しましょう。 完全なCSSについて GitHub リポジトリ GitHub リポジトリ 以下は、CSSを追加した後の様子です。 ステップ3:JavaScriptの基本機能の実装 このステップでは、イベント処理、検証、進捗追跡、ファイル管理を含むファイルアップロードをパワーアップする論理を構築します。 Step 3.1: Class Setup and Initial Configuration (クラス設定と初期設定) 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 Step 3.2: Event Listeners の設定 クリック、ドラッグ、落とし、ファイル選択のためのハンドラーを付加してアップロードをインタラクティブにします。 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 STEP 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 ⚠️重要:クライアント側とサーバー側の両方でファイルを検証します。クライアント側のチェックはすぐにフィードバックを与えますが、サーバー側の検証だけが悪意のあるアップロードからアプリを保護します。 Step 3.4: 複数のファイルのアップロード 進捗バーを表示し、各ファイルを1つずつアップロードし、進捗状況を隠します。 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 Step 3.6: アップロードしたファイルを表示する UI にアップロードしたファイルをアイコン、サイズ、日付、および削除オプションで表示します。 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:ファイルの削除 ユーザーがファイルを削除し、ファイルリストとUIを適切に更新できます。 deleteFile(fileName) { this.files = this.files.filter((f) => f.name !== fileName); this.fileList.innerHTML = ""; this.files.forEach((f) => this.addFileToList(f)); } ステップ 3.8: File Icons Based on Type 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: ファイルサイズのフォーマット ファイルサイズをKB、MB、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: アップロードの進捗状況を表示および隠す 進捗バーの可視性を制御し、その値をダイナミックに更新します。 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: File Manager の初期化 FileManager クラスのインスタンスを作成して、機能を開始します。 const fileManager = new FileManager(); // Start the file manager このファイルアップロードツールの完全なソースコードをここでアクセスしてください! このファイルアップロードツールの完全なソースコードをここでアクセスしてください! このファイルアップロードツールの完全なソースコードをここでアクセスしてください! これにより、ファイルアップロードツールは完全にインタラクティブであり、ユーザーは簡単にファイルをドラッグ、ドロップ、アップロード、管理することができます。 Ref: MDN Web API - File MDN Web API - ファイル MDN Web API - ファイル Step 4: Integrating Filestack for Cloud Storage (クラウドストレージのためのファイルセットの統合) このステップでは、ファイルアップロードツールをクラウドに接続することで次のレベルに移行します。 クラウドストレージから直接抽出し、セキュアなリンクを生成し、すべてのものがユーザーにとってシームレスに感じられるようにします。 フィルター フィルター まず、Filestack SDK を HTML ヘッダーに追加します。 https://static.filestackapi.com/filestack-js/4.x.x/filestack.min.js 次に、FileManager クラスを拡張して、クラウドアップロードを統合し、プレビューを表示し、ファイルリンクを管理します。 詳細な資料については、訪問 . Filestack’s API reference Filestack の API 参照 Step 4.1: FileManager を Fileestack 統合で拡張する 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 重要: YOUR_API_KEY_HERE の代わりに、独自の API キーを使用して、Filestack ダッシュボードから取得できます。 重要: YOUR_API_KEY_HERE の代わりに、独自の API キーを使用して、Filestack ダッシュボードから取得できます。 Filestack およびその他のクラウドサービスには、API キーとセットアップが必要です。 生産用途では、常に API キーを保護し、適切なセキュリティ設定を設定してください。 Step 4.2: Initializing Event Listeners with Filestack Button (フィールスタックボタンでイベント・ライターを初期化する) initializeEventListeners() { super.initializeEventListeners(); this.addFilestackButton(); } // Set up existing file selection and drag-drop listeners // Add a new button for accessing cloud storage through Filestack Step 4.3: Filestack Picker Button を追加する 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: File Stack 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 Step 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: Enhanced File Manager の初期化 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は、舞台の後ろで重いリフトをすべて管理します。 これには、さまざまなストレージ プロバイダー、CDN 配布、ファイル変換の処理が含まれます。 Ref: FileStacks ドキュメンタリー Filestack ドキュメント Filestack ドキュメント 実施の強化 今、私たちのファイルマネージャーを突き出せるアップロードツールにいくつかの高度な機能を追加しましょう。 リアルタイムファイルプレビュー ユーザーは即時フィードバックが大好きです. 画像、ビデオ、および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 constructor で 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を使用する美しさは、多くの高度な機能が組み込まれていることです。 画像変換、ドキュメント変換、さらにはスマートなカッピングも得られます。 つまり、これらの複雑な機能をゼロから構築する必要はありません。 また、複数の第三者サービスを維持する必要もありません。 トップ > Best Practices & Common Pitfalls 以下は、私がファイルアップロードツールを構築する際に学んだ重要なレッスン(時には難しい方法)です。 クライアントとサーバーの両方でファイルを検証する:クライアント側の検証はユーザーに迅速なフィードバックを与えるため有用ですが、実際のセキュリティはサーバー上のファイルもチェックすることから来ます。 エラーを適切に処理する: アップロードは必ずしもスムーズに進まない ファイルが失敗し、ネットワークが崩壊したり、サーバーが崩壊したりする可能性があります. 常に明確なエラーメッセージを表示し、ユーザーに再度試す方法を提供します。 アクセシビリティの問題:アップロードがすべての人に適していることを確認してください. スクリーンリーダーのためのARIAラベルを追加し、キーボードのナビゲーションを許可し、メッセージを表示するために色だけに頼らないでください. 適切なHTML構造を使用してアクセシビリティツールでテストします。 アップロードパフォーマンスを見る: 遅いネットワーク上の大きなファイルは時間が経過するか、失敗する可能性があります. 切断されたアップロードを使用すると、ユーザーに残された時間を示すことは大きな違いです. Filestack のようなツールは、あなたのためにこれを処理しますが、あなたがそれを自分で構築している場合は、それを逃さないでください。 ストレージコストのプラン:ファイルのストレージは迅速に高価になることがあります。一時的なファイルをクリアし、可能な限りそれらを圧縮し、インフラストラクチャの容量に基づいてファイルサイズの制限を設定します。 ファイルを安全に保存する: アップロードしたファイルをウェブのルートディレクトリの外に常に保存し、署名された URL を介してそれらをサービスし、不正アクセスを防止し、セキュリティを向上させます。 結論 現代のファイルアップロードツールを構築するには、複雑である必要はありません。堅固なHTML基礎から始めて、ステップごとに強化し、 . クラウドストレージ用のFilestackのようなツールを使用する クラウドストレージ用のFilestackのようなツールを使用する 最初に体験に焦点を当てる: drag-and-drop を自然に感じ、プレビューを即座にロードし、進捗バーを有意義にする。 複雑なテクノロジーを舞台の後ろに置き、クリーンでシンプルなインターフェイスの後ろに隠れてください. Once that's working, you can add advanced features such as file sharing, collaborative editing, or automated workflows. ファイル管理は、ユーザーが毎日相互作用するものです。これを正しく取得し、より幸せなユーザー、より良い関わり、より少ないサポートチケットを得るでしょう。 さらなる学習のための資源 GitHub Repository with Complete Code(完全なコード) MDN Web API - ファイル OWASP - セキュアファイルアップロード Filestack ドキュメント GitHub Repository with Complete Code(完全なコード) MDN Web API - ファイル OWASP - セキュアファイルアップロード Filestack ドキュメント 著者について Shefali Jangidは、直感的な開発ツールと教育リソースを構築することに情熱を持ったウェブ開発者、技術作家、コンテンツクリエイターです。 開発者がクリーンで効率的でアクセス可能なコードでより良いウェブ体験を作成するのを助ける トップページ > Dev トップページ > Dev