ディレクトリアップロード入力ジェネレーターとは
input type=file要素のwebkitdirectory属性により、ユーザーは個別のファイルではなくフォルダ全体を選択できます。フォルダが選択されると、ブラウザは選択されたディレクトリとそのサブディレクトリからすべてのファイルをinput.files FileListに取り込みます。各ファイルにはwebkitRelativePathプロパティがあり、選択されたディレクトリへの相対パス（例：images/logo.png）を提供します。標準化されたdirectory属性は、モダンブラウザ全体で同じ機能を提供します。
クイックアンサー
input type=fileにwebkitdirectory属性を付けて使用すると、ユーザーがフォルダ全体を選択してアップロードできます。選択されたディレクトリ内の各ファイルは、選択されたフォルダへの相対パスを示すwebkitRelativePathプロパティを公開します。Chrome 30+、Edge 12+、Safari 11.1+、Firefox 50+でサポートされています。生成されたHTMLには、ドラッグ＆ドロップゾーン、ディレクトリツリービュー付きファイルリスト表示、単一ファイル/複数ファイル/ディレクトリモードのサポートが含まれています。
Last updated: 2026-06-01
制限事項
- webkitRelativePathはディレクトリピッカーを通じて選択されたファイルでのみ利用可能です。オペレーティングシステムからドラッグ＆ドロップで追加されたファイルは、FirefoxとSafariではパス情報を持ちません。ただし、ChromeとEdgeはディレクトリのドラッグ＆ドロップをサポートしています。
- ディレクトリ入力のブラウザサポートはChromiumベースのブラウザとFirefoxでは強力ですが、Safariの実装は歴史的に遅れています。標準化されたdirectory属性はSafari 17+でサポートされていますが、古いSafariバージョンではwebkitdirectoryプレフィックスが必要です。
- 大規模なディレクトリ選択（数千のファイル）は、ファイルリストが取り込まれて表示されている間、ブラウザタブがフリーズする可能性があります。大規模なディレクトリを扱う本番環境のデプロイメントでは、遅延レンダリングまたはWeb Workerを使用してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- アップロードモードを選択します。単一ファイル（一度に1ファイル）、複数ファイル（複数ファイルを選択）、またはディレクトリ（フォルダ全体を選択）。
- ドラッグ＆ドロップゾーンを設定します。ドラッグ＆ドロップサポートの有効/無効、ドロップゾーンテキストとアクティブ状態のスタイリング（ボーダー色、背景、オーバーレイ）をカスタマイズします。
- ファイルリスト表示をカスタマイズします。ファイル名、サイズ、タイプ、およびディレクトリアップロードのwebkitRelativePathを表示します。フラットリストとディレクトリ構造を保持するツリービューを切り替えます。
- 埋め込みCSSとJavaScriptを含む生成済みHTMLをコピーします。出力には、changeイベントとドラッグ＆ドロップイベントのイベントハンドリングを備えた、完全で自己完結型のファイルアップロードインターフェースが含まれます。
主な用途
- ディレクトリ構造を保持しながら、画像やMarkdownファイルのフォルダ全体を受け入れるドキュメントサイトのアップロードインターフェースを構築します。
- 編集者がアセットのフォルダをドラッグ＆ドロップし、相対パスをURLマッピングに使用するCMS用の一括ファイルアップロードツールを作成します。
- エクスポートされたコンテンツのフォルダを受け入れ、webkitRelativePathを使用してサーバー上で元のディレクトリ階層を再構築する移行ツールを設計します。