Отслеживание процесса загрузки файлов в Amazon S3 из браузера

Вы когда-нибудь задумывались, как отслеживать точный ход загрузки файла при загрузке на стороне клиента в Amazon S3? На самом деле это относительно простая задача. Это хорошо работает с любым типом загрузки файлов. Если вы еще не настроили загрузку файлов на S3, ознакомьтесь с этой статьей — Загрузка файлов из браузера на Amazon S3 с помощью Node.js.

При отправке запроса PUT в Amazon S3 для загрузки нашего файла мы будем использовать класс XMLHttpRequest.

var s3SignedUploadUrl = "...";
var file = document.getElementById("file-input").files[0];
var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log("UPLOAD SUCCESSFUL");
    }
    else {
      console.log("UPLOAD FAILED");
    }
  }
};

xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      var percentComplete = (e.loaded / file.size) * 100;
    }
};

xhr.open("PUT", s3SignedUploadUrl);
xhr.send(file);

Использование промисов

Выполнение этого обычным способом довольно болезненно в коде приложения. Таким образом, лучше всего обернуть все это обещанием следующим образом.

function uploadS3(url, file, progressCallback) {
  return new Promise(function (resolve, reject) {

    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr)
        }
        else {
          reject(xhr)
        }
      }
    };

    if (progressCallback) {
      xhr.upload.onprogress = (e) => {
        if (e.lengthComputable) {
          var percentComplete = (e.loaded / file.size) * 100;
          progressCallback(percentComplete);
        }
      };
    }

    xhr.open("PUT", url);
    xhr.send(file);
  });
}

Теперь вы можете использовать его намного проще, и даже лучше, если вы используете асинхронность и ожидание.

var s3SignedUploadUrl = "...";
var file = document.getElementById("file-input").files[0];

// USE PROMISE
uploadS3(s3SignedUploadUrl, file, function(percent) { console.log(percent); })
  .then(function() {})
  .catch(function() {})

// USE ASYNC / AWAIT
(async () => {
  await uploadS3(s3SignedUploadUrl, file, function(percent) { 
    console.log(percent); 
  })
})();

Предоставлено вам Uploadbtn. Самый простой способ загрузить файлы на Amazon S3 без сервера. Начните загружать файлы всего за 5 минут

Первоначально опубликовано на www.uploadbtn.com.