Как справиться с ошибкой при загрузке браузера S3 через POST

Я новичок в S3. Попытка поймать ошибки в S3 http://docs.aws.amazon.com/AmazonS3/2006-03-01/API/ErrorResponses.html

Мой пример кода:

{"expiration": "2007-12-01T12:00:00.000Z",
  "conditions": [
    {"bucket": "johnsmith"},
    ["starts-with", "$key", ""],
    {"acl": "private"},
    {"success_action_redirect": "http://johnsmith.s3.amazonaws.com/successful_upload.html"},
    ["eq", "$Content-Type", "application/msword,application/pdf"],
    ["content-length-range", 2048, 20971520 ]
  ]
}'; 



<form action="http://johnsmith.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
<input type="hidden" name="key" value="${filename}" /><br />
<input type="hidden" name="acl" value="private" />
<input type="hidden" name="success_action_redirect" value="http://johnsmith.s3.amazonaws.com/successful_upload.html" >
<input type="hidden" name="AWSAccessKeyId " value="15B4D3461F177624206A" />
<input type="hidden" name="Policy" value="eyAiZXhwaXJhdGlvbiI6ICIyMDA3LTEyLTAxVDEyOjAwOjAwLjAwMFoiLAogICJjb25kaXRpb25zIjogWwogICAgeyJidWNrZXQiOiAiam9obnNtaXRoIiB9LAogICAgWyJzdGFydHMtd2l0aCIsICIka2V5IiwgInVzZXIvZXJpYy8iXSwKICAgIHsiYWNsIjogInB1YmxpYy1yZWFkIiB9LAogICAgeyJyZWRpcmVjdCI6ICJodHRwOi8vam9obnNtaXRoLnMzLmFtYXpvbmF3cy5jb20vc3VjY2Vzc2Z1bF91cGxvYWQuaHRtbCIgfSwKICAgIFsic3RhcnRzLXdpdGgiLCAiJENvbnRlbnQtVHlwZSIsICJpbWFnZS8iXSwKICAgIHsieC1hbXotbWV0YS11dWlkIjogIjE0MzY1MTIzNjUxMjc0In0sCiAgICBbInN0YXJ0cy13aXRoIiwgIiR4LWFtei1tZXRhLXRhZyIsICIiXSwKICBdCn0K" />
<input type="hidden" name="Signature" value="2qCp0odXe7A9IYyUVqn0w2adtCA=" />
File: <input type="file" name="file" /> <br />
<input type="submit" name="submit" value="Upload to Amazon S3" />
</form>

Хотите поймать ошибку, если файл не удалось загрузить или срок его действия истек. Чтобы проверить тип контента, диапазон длины контента.

Получение правильной переменной обратного вызова, такой как ведро, ключ, etag.

Спасибо


browser error-handling amazon-s3 post upload
person rock    schedule 06.06.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

EDIT: в моем первоначальном ответе использовались iframes, но я, наконец, заставил XMLHttpRequest работать, и я думаю, что это более чистый подход.

У меня была такая же проблема. Моими требованиями были:

  • Я не хотел использовать вспышку
  • Я не хотел, чтобы пользователь видел XML-код ошибки AWS.

На просторах интернета разбросано множество решений. У меня получилось работать в двух версиях:

  1. Использование iFrame для рендеринга результата POST и попытка доступа к загруженному файлу (в моем случае к изображению), чтобы проверить, сработала ли загрузка: https://gist.github.com/joaoffcosta/5728483

  2. Использование XMLHttpRequest для выполнения запроса и обработки хода выполнения, завершения и преждевременного сбоя: https://gist.github.com/joaoffcosta/5729398 (Лучшее решение, IMO)

В обоих решениях ваша корзина S3 должна позволять «Всем» выполнять «Загрузку/удаление». Кроме того, решение XMLHttpRequest требует, чтобы вы настроили CORS в своей корзине. Для этого вам нужно перейти в раздел «Разрешения», нажать «Добавить конфигурацию CORS» и добавить что-то вроде этого:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://your_website_or_localhost_server/</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
        <ExposeHeader>x-amz-request-id</ExposeHeader>
        <ExposeHeader>x-amz-id-2</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
person João Costa    schedule 07.06.2013

arrow_upward
1
arrow_downward

используя простую форму сообщения ajax...

<script>
  function uploadFile() {
    var file_name = $('#form1 :input[name="file"]').val().split('\\').pop();
    if(!file_name || file_name.length === 0) {
      alert('please choose file')
      return false;
    }

    $.ajax({
      url: "/getS3FormData.php",
      cache: false,
      type: 'GET',
      data: {file_name : file_name} ,
      async: false,
      success: function (response) {
        var s3 = JSON.parse(response);
        handleFileUpload(s3);
      },
      error: function (error) {
        alert("Upload FAILED  :-( Retry.");
      }
    });
  }


function handleFileUpload(s3) {
  var fd = new FormData();
  fd.append('key', s3.key);
  fd.append('AWSAccessKeyId', s3.AWSAccessKeyId);
  fd.append('acl', s3.acl);
  fd.append('policy', s3.policy);
  fd.append('signature', s3.signature);
  fd.append('Content-Type', s3.content_type);

  var file = $('#form1').find('input[name=file]')[0].files[0];      
  fd.append("file", file);

  window.onbeforeunload = function () {
    return "Upload in progress";
  }

  $.ajax({
    url: s3.url,
    data: fd,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
      window.onbeforeunload = null;
      window.location.href = s3.success_action_redirect;
    },
    error: function(error) {
      window.onbeforeunload = null;
      alert('Upload Failed, Please try again');
    }
  });
}

HTML-форма

  <form id="form1" method="post" enctype="multipart/form-data">  
    <input type="file" name="file"></input>
    <input type="submit" onclick="uploadFile(); return false;" value="Upload">
  </form>
person ranjeetcao    schedule 25.09.2015