再開可能なファイルアップロード

fetch メソッドを使用すると、とても簡単にファイルをアップロードすることができます。

接続が切れた後、アップロードを再開するにはどうすればよいでしょう？そのための組み込みのオプションはありません。が、ここではそれを実装するためのヒントがあります。

再開可能なアップロードには、アップロードの進行状況の表示が一緒に必要になります。大きなファイルが期待されるからです(再開が必要かもしれないほどのサイズ)。したがって、 fetch ではアップロードの進行状況を追跡できないため、XMLHttpRequestを使います。

あまり役に立たない progress イベント

アップロードを再開するには、接続が失われるまでにどれだけアップロードされたかを知る必要があります。

アップロードの進行状況を追跡する xhr.upload.onprogress があります。

ただ、残念ながらここでは役に立ちません。これはデータが 送られた ときに発生しますが、サーバが受け取ったかはブラウザは知らないからです。

ローカルネットワークプロキシによってバッファリングされていたり、リモートサーバプロセスが停止して処理ができなかったり、あるいは接続が切れた際に途中で失われサーバに届かなったかもしれません。

したがって、このイベントはプログレスバーを出すときにだけ役立ちます。

アップロードを再開するには、サーバが受け取った正確なバイト数を知る必要があります。そして、それを知っているのはサーバだけです。

アルゴリズム

最初に、アップロードするファイルを一意に識別するために、ファイル id を作成します。e.g.
```
let fileId = file.name + '-' + file.size + '-' + +file.lastModifiedDate;
```
これはアップロードを再開するのに必要で、サーバに再開する内容を伝えるときに使います。
サーバにリクエストを送り、すでに受け取り済みのバイト数を訪ねます。次のようになります:
```
let response = await fetch('status', {
  headers: {
    'X-File-Id': fileId
  }
});

// The server has that many bytes
let startByte = +await response.text();
```
これは、サーバがファイルのアップロードを X-File-Id ヘッダで追跡していることを前提としています。サーバ側で実装されている必要があります。
次に, Blob のメソッド slice を使って startByte からファイルを送信します。:
```
xhr.open("POST", "upload", true);

// サーバが再開されるファイルをしるためにファイル id を送信します
xhr.setRequestHeader('X-File-Id', fileId);
// 再開時のバイトを送信します
xhr.setRequestHeader('X-Start-Byte', startByte);

xhr.upload.onprogress = (e) => {
  console.log(`Uploaded ${startByte + e.loaded} of ${startByte + e.total}`);
};

// ファイルは input.files[0] または別の元から取得できます
xhr.send(file.slice(startByte));
```
ここでは、サーバに両方のファイル id を X-File-Id として送信するため、どのファイルをアップロードしているかが分かります。そして X-Start-Byte で開始バイトを送信するので、最初にアップロードするのではなく、再開であることを認識します。

サーバはそのレコードをチェックし、そのファイルのアップロードがあり、かつ現在のアップロードサイズが正確に X-Start-Byte であれば、データを追加します。

これはクライアントとサーバ両方のコードを使用したデモです。Node.js で記述しています。

Node.js は Nginx という別のサーバの裏におり、これがアップロードをバッファリングし、完全に完了したときに Node.js にわたすため、このサイト上では、部分的にしか機能しません。

ですが、ダウンロードして、ローカルで完全なデモを見ることもできます:

結果

server.js

uploader.js

index.html

let http = require('http');
let static = require('node-static');
let fileServer = new static.Server('.');
let path = require('path');
let fs = require('fs');
let debug = require('debug')('example:resume-upload');

let uploads = Object.create(null);

function onUpload(req, res) {

  let fileId = req.headers['x-file-id'];
  let startByte = req.headers['x-start-byte'];

  if (!fileId) {
    res.writeHead(400, "No file id");
    res.end();
  }

  // we'll files "nowhere"
  let filePath = '/dev/null';
  // could use a real path instead, e.g.
  // let filePath = path.join('/tmp', fileId);

  debug("onUpload fileId: ", fileId);

  // initialize a new upload
  if (!uploads[fileId]) uploads[fileId] = {};
  let upload = uploads[fileId];

  debug("bytesReceived:" + upload.bytesReceived + " startByte:" + startByte)

  let fileStream;

  // if startByte is 0 or not set, create a new file, otherwise check the size and append to existing one
  if (!startByte) {
    upload.bytesReceived = 0;
    fileStream = fs.createWriteStream(filePath, {
      flags: 'w'
    });
    debug("New file created: " + filePath);
  } else {
    // we can check on-disk file size as well to be sure
    if (upload.bytesReceived != startByte) {
      res.writeHead(400, "Wrong start byte");
      res.end(upload.bytesReceived);
      return;
    }
    // append to existing file
    fileStream = fs.createWriteStream(filePath, {
      flags: 'a'
    });
    debug("File reopened: " + filePath);
  }


  req.on('data', function(data) {
    debug("bytes received", upload.bytesReceived);
    upload.bytesReceived += data.length;
  });

  // send request body to file
  req.pipe(fileStream);

  // when the request is finished, and all its data is written
  fileStream.on('close', function() {
    if (upload.bytesReceived == req.headers['x-file-size']) {
      debug("Upload finished");
      delete uploads[fileId];

      // can do something else with the uploaded file here

      res.end("Success " + upload.bytesReceived);
    } else {
      // connection lost, we leave the unfinished file around
      debug("File unfinished, stopped at " + upload.bytesReceived);
      res.end();
    }
  });

  // in case of I/O error - finish the request
  fileStream.on('error', function(err) {
    debug("fileStream error");
    res.writeHead(500, "File error");
    res.end();
  });

}

function onStatus(req, res) {
  let fileId = req.headers['x-file-id'];
  let upload = uploads[fileId];
  debug("onStatus fileId:", fileId, " upload:", upload);
  if (!upload) {
    res.end("0")
  } else {
    res.end(String(upload.bytesReceived));
  }
}


function accept(req, res) {
  if (req.url == '/status') {
    onStatus(req, res);
  } else if (req.url == '/upload' && req.method == 'POST') {
    onUpload(req, res);
  } else {
    fileServer.serve(req, res);
  }

}




// -----------------------------------

if (!module.parent) {
  http.createServer(accept).listen(8080);
  console.log('Server listening at port 8080');
} else {
  exports.accept = accept;
}

class Uploader {

  constructor({file, onProgress}) {
    this.file = file;
    this.onProgress = onProgress;

    // create fileId that uniquely identifies the file
    // we could also add user session identifier (if had one), to make it even more unique
    this.fileId = file.name + '-' + file.size + '-' + +file.lastModifiedDate;
  }

  async getUploadedBytes() {
    let response = await fetch('status', {
      headers: {
        'X-File-Id': this.fileId
      }
    });

    if (response.status != 200) {
      throw new Error("Can't get uploaded bytes: " + response.statusText);
    }

    let text = await response.text();

    return +text;
  }

  async upload() {
    this.startByte = await this.getUploadedBytes();

    let xhr = this.xhr = new XMLHttpRequest();
    xhr.open("POST", "upload", true);

    // send file id, so that the server knows which file to resume
    xhr.setRequestHeader('X-File-Id', this.fileId);
    // send the byte we're resuming from, so the server knows we're resuming
    xhr.setRequestHeader('X-Start-Byte', this.startByte);

    xhr.upload.onprogress = (e) => {
      this.onProgress(this.startByte + e.loaded, this.startByte + e.total);
    };

    console.log("send the file, starting from", this.startByte);
    xhr.send(this.file.slice(this.startByte));

    // return
    //   true if upload was successful,
    //   false if aborted
    // throw in case of an error
    return await new Promise((resolve, reject) => {

      xhr.onload = xhr.onerror = () => {
        console.log("upload end status:" + xhr.status + " text:" + xhr.statusText);

        if (xhr.status == 200) {
          resolve(true);
        } else {
          reject(new Error("Upload failed: " + xhr.statusText));
        }
      };

      // onabort triggers only when xhr.abort() is called
      xhr.onabort = () => resolve(false);

    });

  }

  stop() {
    if (this.xhr) {
      this.xhr.abort();
    }
  }

}

<!DOCTYPE HTML>

<script src="uploader.js"></script>

<form name="upload" method="POST" enctype="multipart/form-data" action="/upload">
  <input type="file" name="myfile">
  <input type="submit" name="submit" value="Upload (Resumes automatically)">
</form>

<button onclick="uploader.stop()">Stop upload</button>


<div id="log">Progress indication</div>

<script>
  function log(html) {
    document.getElementById('log').innerHTML = html;
    console.log(html);
  }

  function onProgress(loaded, total) {
    log("progress " + loaded + ' / ' + total);
  }

  let uploader;

  document.forms.upload.onsubmit = async function(e) {
    e.preventDefault();

    let file = this.elements.myfile.files[0];
    if (!file) return;

    uploader = new Uploader({file, onProgress});

    try {
      let uploaded = await uploader.upload();

      if (uploaded) {
        log('success');
      } else {
        log('stopped');
      }

    } catch(err) {
      console.error(err);
      log('error');
    }
  };

</script>

再開可能なファイルアップロード

あまり役に立たない progress イベント

アルゴリズム

チャプター

レッスンナビゲーション