Web 開発の分野では、ユーザー入力を収集するときにファイルをアップロードする方法が複数あります。方法の 1 つはコピー&ペーストです。ファイル入力のためのコピー&ペーストは、ユーザーからファイルをアップロードする非常に直感的な方法です。コピー&ペーストのファイル入力方法により、ユーザーはアップロードするファイルの場所を記憶する必要がなくなります。この記事では、Web サイトにコピー&ペーストによるファイル入力を実装する方法について説明します。

ClipboadEvent インターフェイスと EventTarget インターフェイスを利用して、コピー&ペーストのファイル入力を実装します。 ClipboardEvent インターフェイスは貼り付けイベントに関する情報を提供し、EventTarget インターフェイスを使用すると貼り付けイベントをリッスンできます。

貼り付けイベントをリッスンしながら、貼り付けたアイテムをどのように処理するかを決定するイベント ハンドラー関数をアタッチします。この例では、貼り付けたファイルを取得し、ブラウザに完全に読み込まれた後、即座にレンダリングします。 HTML とスタイルから始めます。

HTML とスタイル

まず、貼り付け領域の HTML マークアップを作成します。以下のコード スニペットは HTML マークアップです:

    
    
    
    


    

        Paste your file here
    
    

    

上記のコード スニペットは、ファイルを貼り付けることができる長方形のコンテナーをレンダリングします。コンテナーには、true に設定された contenteditable という属性があります。 contenteditable 属性は、コンテナ内でファイルやその他のアイテムを貼り付けることができるようにするために重要です。 contenteditable 属性が false に変更されるか削除されると、貼り付けアクションは期待どおりに機能しなくなります。プレビューという ID を持つコンテナーもあります。プレビュー コンテナを使用して、ユーザーが貼り付けた画像をプレビューします。

style.css のマークアップに基本的なスタイルをいくつか追加しましょう

*{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    text-align: center;
    margin-block-start: 4rem;
}
#pasteArea {
    border: 2px dashed #ccc;
    padding: 20px;
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: auto;
    color: rgb(5, 89, 89);
}

#preview img {
    max-width: 100%;
    margin-top: 10px;
}

上記のマークアップとスタイル シートは、以下のスクリーンショットに示すように、単純なプロンプト テキストを含む単純なダッシュで囲まれたコンテナを作成します。

UI を作成したので、次のセクションで JavaScript を使用して便利な機能を追加しましょう。

スクリプト

このセクションでは、JavaScript を使用して、貼り付けエリアに貼り付けイベント リスナーを追加します。イベント リスナーをアタッチするために DOM から貼り付け領域を取得する前に、以下のコード スニペットにあるように、まず DOM コンテンツがロードされるのを待ちます。

document.addEventListener('DOMContentLoaded', () => {
    const pasteArea = document.querySelector('#pasteArea');

    pasteArea.addEventListener('paste', (event) => {

    });
});

上記のコード スニペットでは、DOMContentLoaded イベントのリスナーを追加しました。これにより、DOM 要素を取得する前に、DOM ツリーが作成されるのを待つことができます。次に、貼り付け領域コンテナーを選択し、貼り付けイベント リスナーをそれに追加します。

貼り付けたアイテムからファイルを取得する

前のコード スニペットでは、貼り付けイベント ハンドラーが実装されていませんでした。イベント オブジェクトからデータを取得し、コンソールに記録することで実装してみましょう。データについてはこの記事の後半でさらに詳しく説明しますが、今のところは、項目が貼り付け領域に貼り付けられたときにファイルが確実に受信されるようにするだけです。以下のコード スニペットは、貼り付けイベント ハンドラーの最小限の実装を示しています。

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()

                console.log(file)
            }
        }
    })

上記のコード スニペットでは、event.clipboardData オブジェクトから項目を取得します。 event.clipboardData.items は、貼り付けられた項目のコンテンツを含むリストのようなオブジェクトである DataTransferItemList です。ユーザーは複数の項目を一度にコピーして貼り付けることができるため、項目はリストに保存されます。

次に、for ...of ループを使用して項目を繰り返します。ループ内で、各項目がファイルであるかどうかを確認します。アイテムが「ファイル」の場合、それをファイルとして取得し、ブラウザのコンソールに出力します。

コンソールにファイル情報を出力することは、Web ページのユーザーにとってあまり役に立ちません。次のセクションではもう少し面白いことをやってみましょう。

アップロードされたファイルをプレビューする

クリップボードにアイテムを貼り付けた後、ファイルのアップロードが成功したことをどこにも表示しないと、ユーザーはそれを知るのが難しくなります。成功を示す何かを表示することで、ファイルが正常にアップロードされたことを示すことが重要です。アップロードの成功を示すために、アップロードされたファイル自体を表示するより良い方法はあるでしょうか?

このセクションでは、ペースト イベント ハンドラーを拡張して、受信したファイルから URL を作成します。ファイルがブラウザに読み込まれたら、作成された URL を使用してファイルをレンダリングします。以下のスニペットにコードされているように、FileReader API を利用してファイルから URL を作成します。

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()


                const reader = new FileReader();

                reader.onloadend = (e) => {
                    const url = e.target.result
                    console.log(url)

                };
                reader.readAsDataURL(file);
            }
        }
    });

上記のコード スニペットでは、FileReader のインスタンスを作成し、それを使用してデータ URL を生成しました。また、loadend イベント リスナーを FileReader オブジェクトに追加し、読み取りの結果をコンソールに記録します。これはファイルをプレビューするための最初のステップです。URL を使用してファイルを表示できるようになります。

ユーザーが画像ファイルを貼り付けたと仮定して、次のコード スニペットは、イベント ハンドラーを拡張して URL を作成し、画像ファイルを表示する方法を示しています。

 reader.onloadend = (e) => {
       const url = e.target.result
       const preview = document.querySelector('#preview')
       const img = document.createElement('img');

       img.src = url;
       preview.appendChild(img);
   };

上記のコード スニペットでは、DOM からプレビュー コンテナーを取得し、画像をレンダリングするための img 要素を作成します。作成したURLを画像のsrcとして割り当て、プレビューコンテナに画像を追加します。画像がプレビュー コンテナーに追加されると、ユーザーは貼り付けた画像が Web ページに正常に読み込まれたことを知ることができます。

成功！ Web ページ上でコピー&ペーストによるファイルのアップロードを実装することに成功しました。このファイル アップロード方法を使用すると、ユーザーは、アップロードするファイルを選択するためにいくつかのボタンをクリックする必要がなく、簡単にファイルをアップロードできる権限が得られます。 ClipboadEvent インターフェイスは、ブラウザに貼り付けられたアイテムからデータを収集する簡単な方法を提供します。 FileReader インターフェイスを使用すると、アップロードされたファイルから URL を作成し、それを使用してアップロードされたファイルをプレビューできます。

コメント欄にお気軽にご発言ください。 ClipBoardEvent インターフェイスと FileReader インターフェイスの詳細については、MDN からご覧ください。