2012-11-08 11 views
7

Bu çok ilgili soruda (Upload directly to Amazon S3 using Plupload HTML5 runtime), amazon artık CORS'in HTML5 kullanarak yüklemelerine izin veriyor, ancak herkes 'html5' çalışma zamanını kullanarak dosyaları s3'e göndermek için plupload'u başarıyla yapılandırdı mı? İlgili soruya verilen cevaplar, herhangi bir uygulama detayı sunmamaktadır.'html5' çalışma zamanı ile plugin doğrudan s3'e nasıl uygulanır?

İşte benim şimdiki plupload yapılandırması: Yukarıdaki kod 'flaş' çalışma zamanı için çalıştığını

$("#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', 
}); 

, bu nedenle politika oluşturulur ve doğru imzalanır.

Ben multipart_params yapılandırma nesnesinde herhangi bir argüman eksik miyim? Ayrıca

, benim s3 kova aşağıdaki CORS yapılandırmayı kullanıyorum:

<?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> 

Ben 'HTML5' plupload çalışma zamanı gelen CORS yüklemelere izin vermek için s3 kovaya diğer yapılandırma değişiklikleri yapmak gerekir mi?

cevap

9

İşte

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); 
           } 
          } 
         }); 

        }); 
       } 
      } 
     }); 

Ben bir ajax arama var FilesAdded olay dinleyicisi fark edeceğiniz ... Bu işe almak için kullanılan tam kod. Bu, eklenen her dosya için sunucumdan ilke ve imzayı alır. İşte

... idi bu işi yaparken

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); 
    } 

Çok yararlı linkler politikası ve imza geri gönderir arkasında kod

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/

+1

CORS kullandığınız yapılandırma da iyi görünüyor. Benimki tam olarak böyle görünüyor. – sunnymtn

+0

Anladım. Yardımınız için teşekkürler. – njebert

+0

@sunnymtn bana tam kodu gösterebilir misin? Njebert'in gösterdiği koda sağladığınız kodu nasıl uygulayacağınızı anlamıyorum. – SReca

İlgili konular