Jak zaimplementować plupload bezpośrednio na s3 przy użyciu środowiska wykonawczego "html5"?

Question

Jest to wspomniane w tym bardzo pokrewnym pytaniu (Upload directly to Amazon S3 using Plupload HTML5 runtime), że Amazon zezwala teraz na przesyłanie CORS za pomocą HTML5, ale czy ktoś pomyślnie skonfigurował plupload do przesyłania plików do s3 przy użyciu środowiska wykonawczego "html5"? Odpowiedzi na powiązane pytanie nie oferują żadnych szczegółów dotyczących implementacji.

Oto moja obecna konfiguracja plupload:

$("#uploader").plupload({ 
    // General settings 
    runtimes: 'html5,flash', 
    url: 'http://s3.amazonaws.com/' + $('#Bucket').val(), 
    max_file_size: '20mb', 
    multipart: true, 
    multipart_params: { 
     'key': '${filename}', // use filename as a key 
     'Filename': '${filename}', // adding this to keep consistency across the runtimes 
     'acl': $('#Acl').val(), 
     'Content-Type': 'binary/octet-stream', 
     'success_action_status': '201', 
     'AWSAccessKeyId': $('#AWSAccessKeyId').val(), 
     'policy': $('#Policy').val(), 
     'signature': $('#Signature').val() 
    }, 
    file_data_name: 'file', 
    multiple_queues: true, 
    filters: [ 
     { title: "Image files", extensions: "jpg,png,gif,jpeg" } 
    ], 
    flash_swf_url: '/Scripts/plupload/plupload.flash.swf', 
}); 

Powyższy kod działa dla „Flash” wykonywania, więc polityka jest generowany i podpisany prawidłowo.

Czy brakuje mi jakichkolwiek argumentów w obiekcie konfiguracyjnym multipart_params?

Również używam następującą konfigurację CORS na moim s3 wiadra:

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>PUT</AllowedMethod> 
     <AllowedMethod>POST</AllowedMethod> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedMethod>HEAD</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

Czy muszę dokonywać żadnych innych zmian konfiguracyjnych do wiadra s3, aby umożliwić przesyłanie Cors z plupload starcie z „HTML5”?

Answer 1

Oto dokładny kod użyłem, aby uzyskać to do pracy ...

var params = {}; 

     $('#uploader').pluploadQueue({ 
      runtimes: 'html5,flash', 
      flash_swf_url: '/js/plupload/1.5.4/plupload.flash.swf', // Have to load locally 
      url: 'https://s3.amazonaws.com/my-bucket-name', 
      multiple_queues: true, 
      preinit: { 
       UploadFile: function (up, file) { 
        up.settings.multipart_params = { 
         key: file.name, 
         filename: file.name, 
         AWSAccessKeyId: 'my-aws-access-key', 
         acl: 'private', 
         policy: params[file.name]["policy"], 
         signature: params[file.name]["signature"], 
         success_action_status: '201' 
        } 
       } 
      }, 
      init: { 
       FilesAdded: function (up, files) { 
        plupload.each(files, function (file) { 

         $.ajax({ 
          url: '/r/prepare_raw_upload', 
          type: 'post', 
          data: { 
           acl: 'private', 
           bucket: 'my-bucket-name', 
           file: file.name 
          }, 
          success: function (data) { 
           if (data.success) { 
            params[data.file] = { policy: data.policy, signature: data.signature }; 
           } 
           else if (data.message) { 
            alert(data.message); 
           } 
          } 
         }); 

        }); 
       } 
      } 
     }); 

Zauważysz w przypadku słuchacza FilesAdded Mam wywołanie ajax. Spowoduje to pobranie zasad i podpisu z mojego serwera dla każdego dodanego pliku.

Oto kod na plecach, które wysyła z powrotem polityki i podpis

public static Dictionary<string, object> prepareUpload(DateTime now, string acl, string bucket, string key, string file) 
    { 
     Dictionary<string, object> result = new Dictionary<string, object>(); 
     ASCIIEncoding encoding = new ASCIIEncoding(); 

     string policy = createUploadPolicy(now, acl, bucket, key); 
     result.Add("policy", Convert.ToBase64String(encoding.GetBytes(policy))); 
     result.Add("signature", createUploadSignature(policy)); 
     result.Add("file", file); 

     return result; 
    } 

    public static string createUploadPolicy(DateTime now, string acl, string bucket, string key) 
    { 
     ASCIIEncoding encoding = new ASCIIEncoding(); 
     JavaScriptSerializer jss = new JavaScriptSerializer(); 

     Hashtable policy = new Hashtable(); 
     policy.Add("expiration", now.AddDays(1).ToString("yyyy'-'MM'-'dd'T'HH':'mm':'ss.fff'Z'")); 
     ArrayList conditions = new ArrayList(); 
     conditions.Add(new Hashtable { { "acl", acl } }); 
     conditions.Add(new Hashtable { { "bucket", bucket } }); 
     conditions.Add(new Hashtable { { "key", key } }); 
     conditions.Add(new ArrayList { "starts-with", "$name", "" }); 
     conditions.Add(new ArrayList { "starts-with", "$filename", "" }); 
     conditions.Add(new ArrayList { "starts-with", "$success_action_status", "" }); 
     policy.Add("conditions", conditions); 

     return jss.Serialize(policy); 
    } 

    public static string createUploadSignature(string policy) 
    { 
     ASCIIEncoding encoding = new ASCIIEncoding(); 
     byte[] policyBytes = encoding.GetBytes(policy); 
     string policyBase64 = Convert.ToBase64String(policyBytes); 

     byte[] secretKeyBytes = encoding.GetBytes(ConfigurationManager.AppSettings["AWSSecretKey"]); 
     HMACSHA1 hmacsha1 = new HMACSHA1(secretKeyBytes); 

     byte[] policyBase64Bytes = encoding.GetBytes(policyBase64); 
     byte[] signatureBytes = hmacsha1.ComputeHash(policyBase64Bytes); 

     return Convert.ToBase64String(signatureBytes); 
    } 

bardzo pomocne linki w tworzeniu tej pracy były ...

How do I make Plupload upload directly to Amazon S3?

http://codeonaboat.wordpress.com/2011/04/22/uploading-a-file-to-amazon-s3-using-an-asp-net-mvc-application-directly-from-the-users-browser/