Как да се справим с грешка при качване на 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

РЕДАКТИРАНЕ: Първоначалният ми отговор използва iframes, но най-накрая накарах XMLHttpRequest да работи, което според мен е по-чист подход.

Имах същия проблем. Моите изисквания бяха:

  • Не исках да използвам светкавица
  • Не исках потребителят да вижда XML за грешка на AWS

Има много решения, разпръснати из целия интернет. Накарах го да работи в две версии:

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

  2. Използване на XMLHttpRequest за извършване на заявката и обработка на напредък, завършване и преждевременен отказ: https://gist.github.com/joaoffcosta/5729398 (Най-доброто решение IMO)

И в двете решения вашата S3 Bucket трябва да позволява на „Всички“ да „Качват/Изтриват“. Освен това решението 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