プログラミング

「ファイルアップロードの再開方法」

最終更新： 17/03/2025
1 分の読み

ファイルアップロードを行う際、接続が途中で失われることがあります。特に大きなファイルを扱う場合やネットワークの状態が不安定な場合、アップロードプロセスが中断されることがあります。しかし、幸いにもこの問題に対処するために、JavaScriptを使ってアップロードの途中から再開する機能を実装することが可能です。以下では、JavaScriptでファイルアップロードの再開機能を実装する方法について、包括的に説明します。

1. ファイルアップロードの基本的な流れ

まず、ファイルアップロードの基本的な流れを確認しましょう。一般的に、ファイルアップロードは以下のステップで行われます。

関連記事
  1. ユーザーがファイルを選択。
  2. ファイルをサーバーに送信。
  3. サーバー側でファイルを受け取って保存。
  4. 成功または失敗のレスポンスを返す。

しかし、途中で接続が切れた場合、この一連の流れは中断されます。この問題に対処するためには、再開機能を実装する必要があります。

2. アップロードの途中から再開する仕組み

ファイルアップロードの再開を実現するためには、「分割アップロード」と呼ばれる技術を利用します。大きなファイルを小さなチャンク（断片）に分け、各チャンクを順番にサーバーに送信します。接続が失われても、途中で送信が完了したチャンクはサーバーに保存されるため、再接続後は未送信の部分だけをアップロードすれば良いのです。

この仕組みを実現するために、以下の手順を踏んでいきます。

3. 必要なライブラリとセットアップ

ファイルアップロードを分割して行うためのライブラリとして、以下のものがあります。

  • Resumable.js

    Resumable.jsは、JavaScriptで大きなファイルを分割してアップロードできるライブラリです。ネットワークの接続が失われても、再開機能を提供してくれます。

  • Fine Uploader

    Fine Uploaderも、分割アップロードや再開機能を提供する人気のライブラリです。

これらのライブラリを使用することで、非常に簡単に再開機能を実装できますが、ここでは純粋なJavaScriptを使った基本的な方法を説明します。

4. JavaScriptでの分割アップロードの実装

以下は、JavaScriptで分割アップロードを実装する基本的な方法です。

(1) ファイルをチャンクに分割

まず、アップロードするファイルを指定されたサイズのチャンクに分割します。これを実現するために、Blob.slice()メソッドを使用します。

javascript
function createChunks(file, chunkSize) {
    const chunks = [];
    let start = 0;
    while (start < file.size) {
        const chunk = file.slice(start, start + chunkSize);
        chunks.push(chunk);
        start += chunkSize;
    }
    return chunks;
}

この関数は、指定されたファイルをチャンクサイズごとに分割し、各チャンクを配列として返します。

(2) アップロードの進行状況を管理

次に、各チャンクをサーバーに送信し、その進行状況を管理します。サーバーに送信したチャンクのインデックスを追跡し、途中で接続が切れた場合には再送信が可能です。

javascript
let currentChunkIndex = 0;

function uploadChunk(chunk, index) {
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('index', index);

    return fetch('/upload', {
        method: 'POST',
        body: formData,
    })
    .then(response => {
        if (response.ok) {
            currentChunkIndex = index + 1;
        } else {
            throw new Error('Upload failed');
        }
    });
}

このコードでは、各チャンクをサーバーに送信する関数uploadChunkを定義しています。indexは各チャンクの番号を示しており、サーバーに送信するたびに進行状況が更新されます。

(3) 再開機能の実装

アップロードが中断された場合、サーバー側でどのチャンクまでアップロードされたかを追跡し、再接続時に未送信のチャンクのみをアップロードします。サーバーがどこまでアップロードされたかを返すAPIを作成し、再接続時にその情報を基に再開することができます。

javascript
function resumeUpload(file) {
    fetch('/check-upload-status', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        currentChunkIndex = data.lastUploadedChunk || 0;
        const chunks = createChunks(file, 1024 * 1024); // 1MB チャンク
        uploadNextChunk(chunks);
    });
}

function uploadNextChunk(chunks) {
    if (currentChunkIndex < chunks.length) {
        uploadChunk(chunks[currentChunkIndex], currentChunkIndex)
            .then(() => uploadNextChunk(chunks))
            .catch(error => console.error('Error uploading chunk:', error));
    } else {
        console.log('Upload complete!');
    }
}

このコードでは、サーバーに問い合わせて最後にアップロードしたチャンクのインデックスを取得し、そのインデックスから再開する仕組みです。

5. サーバー側の実装

サーバー側でも、アップロードの進行状況を管理する必要があります。通常、アップロードされたチャンクは一時的に保存され、全てのチャンクが揃った時点でファイルとして結合されます。

サーバー側では、アップロードされたチャンクをファイルシステムやデータベースに一時保存し、すべてのチャンクが揃った時にファイルとして結合する処理を実装します。

6. エラーハンドリング

再開機能を実装する際には、エラーハンドリングが非常に重要です。例えば、ネットワークが一時的に切断された場合、数回再試行を行うなど、再送信を試みるロジックを組み込むと、より信頼性が高いアップロード機能が実現できます。

javascript
function uploadChunkWithRetry(chunk, index, retries = 3) {
    return uploadChunk(chunk, index).catch(error => {
        if (retries > 0) {
            console.log(`Retrying chunk ${index}, attempts remaining: ${retries}`);
            return uploadChunkWithRetry(chunk, index, retries - 1);
        } else {
            throw new Error('Max retries reached');
        }
    });
}

7. まとめ

ファイルアップロードの再開機能を実装することで、途中で接続が切れてもアップロードを再開できるようになり、ユーザーにとって非常に便利で信頼性の高いシステムを提供できます。JavaScriptとサーバーサイドでの協力により、効率的なアップロードシステムを構築することができます。

再開機能を実装するための基本的な手順は、ファイルをチャンクに分割し、各チャンクを順次送信することです。また、進行状況を管理し、再接続時に未送信のチャンクだけを送信することで、効率的にアップロードを再開できます。

最終更新： 17/03/2025
1 分の読み
Back to top button