Es ist nicht möglich, benutzerdefinierte Metadaten auf Amazon S3-Upload zu senden/zu empfangen (mit ng-Datei-Upload)

Question

Ich verwende ng-Datei-Upload, um eine JPG-Datei in meinen S3-Bucket hochzuladen.

file.upload = Upload.upload({ 
    url: "https://<my-bucket-name>.s3.amazonaws.com/", 
    method: "POST", 
    data: { 
     key: "custom-filename.jpg", 
     AWSAccessKeyId: "<AWSAccessKeyId>", 
     acl: "public-read", 
     policy: <policy>, 
     signature: <signature>, 
     "Content-Type": "image/jpeg", 
     filename: file.name, 
     file: file, 
     Metadata: { 
      "x-amz-meta-hello": "Custom Metadata Value" 
     } 
    } 
}); 

Ich habe auch versucht die folgenden (in dem obigen Code)

Metadata: { 
    hello: "Custom Metadata Value" 
} 

& einfach

"x-amz-meta-hello": "Custom Metadata Value" 

Ich habe die benutzerdefinierten Metadaten in meiner Richtliniendatei als

["starts-with", "x-amz-meta-hello", ""] 

enthalten

Auch die CORS-Konfiguration unter Bucket Berechtigungen für S3

<CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <AllowedMethod>POST</AllowedMethod> 
    <AllowedMethod>HEAD</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <ExposeHeader>x-amz-meta-hello</ExposeHeader> 
    <AllowedHeader>*</AllowedHeader> 
</CORSRule> 

Der obige Code und Einstellungen arbeiten, wird die JPG-Datei erfolgreich hochgeladen, aber irgendwie der Wert benutzerdefinierte Metadaten nicht gesetzt werden.

Bei erfolgreichem Upload rufe ich eine Lambda-Funktion auf, um die JPG-Größe zu ändern und sie in einem separaten Bucket zu speichern. Auch dieser Teil funktioniert, aber ich bin nicht in der Lage, den Wert Benutzerdefinierte Metadaten (x-amz-meta-hallo) in meiner Lambda-Funktion zu lesen. Ich brauche diesen Wert, um der hochgeladenen Datei einen eigenen Ordner zuzuordnen.

Um die benutzerdefinierten Metadaten in meiner Lambda-Funktion

var s3 = new AWS.S3(); 
s3.headObject({ 
    Bucket: <BucketName>, 
    Key: <S3ObjectKey> 
}, function(err, data) { 
    if (err) { 
     console.log(err); 
    } 
    else 
    { 
     console.log(data); 
    }  
}); 

Nicht sicher zu lesen, was bin ich hier fehlt ... Bitte beraten.

Danke. (AngularJS Version 1.5.0 ng-Datei-Upload-Version 12.2.9, Google Chrome Version 53.0.2785.113 auf OSX 10.10.5)

Answer 1

Entfernen Sie die Metadata: { ... } Konstrukt, weil Sie ein HTML-Formular sind Gebäude, das hat ein flacher Schlüsselraum. Anderswo können Sie sehen, dass Metadaten eine spezielle Behandlung erhalten, wobei etwas wie Metadata: { "hello": "world" } magisch zu x-amz-meta-hello: world wird, aber das ist hier nicht anwendbar. Stattdessen müssen Metadaten start with x-amz-meta- sein, und da wir making a POST request sind, werden sie in den Formulardaten bereitgestellt und nicht als Überschrift.

Da die Dateidaten der letzten Formularelement sein muss, legen Sie den Metadaten-Schlüssel über die Datei-Info, zB:

... 
"Content-Type": "image/jpeg", 
"x-amz-meta-hello": "Custom Metadata Value", 
filename: file.name, 
... 

Ihre policy condition müssen die Metadaten-Namen mit einem $ um Referenz zu arbeiten (["starts-with", "$x-amz-meta-hello", ""]). Beachten Sie, dass die Richtlinie erforderlich ist, damit das Feld akzeptiert wird, aber diese spezifische Bedingung nicht einschränkt, dass das Feld einen bestimmten Wert enthält.

Beachten Sie auch, dass <ExposeHeader>x-amz-meta-hello</ExposeHeader> nicht erforderlich ist, um den Upload zu ermöglichen. <ExposeHeader> ermöglicht es dem Browser, diesen Antwort-Header an den aufrufenden Code einer AJAX-Anforderung zurückzugeben. Header, die nicht aufgelistet sind (andere als die "einfachen" Standardtypen, wie Content-Type), sind ansonsten vor dem aufrufenden Code verborgen. CORS ist anfänglich kontraintuitiv, bis Sie verstehen, dass es auf der Idee basiert, dass der Webbrowser selbst als gut gemeint, aber naiv angesehen wird. CORS gibt dem Browser die Erlaubnis, Dinge zu tun, die er sonst nicht tun würde, wie zum Beispiel bestimmte Header an einen Aufrufer zurückgeben.