dropzone.js direktes Hochladen nach S3 mit Inhaltstyp

Question

Ich verwende dropzone.js, um Bilder mit einer vordefinierten URL in S3 hochzuladen. Alles funktioniert, außer dass ich den Inhaltstyp der hochgeladenen Datei nicht festlegen kann. Standardmäßig werden sie alle mit binary/octet-stream hochgeladen und ich kann sie nicht direkt im Browser anzeigen.

Meine S3 presigned Politik sieht wie folgt aus:

const policy = s3PolicyV4.generate({ 
    key: key, 
    bucket: process.env.S3_BUCKET, 
    contentType: 'multipart/form-data', 
    region: process.env.REGION, 
    accessKey: process.env.ACCESS_KEY_ID, 
    secretKey: process.env.SECRET_ACCESS_KEY, 
}); 

Ich habe versucht, die contentType Schlüssel hier ohne Glück zu ändern und ich habe auch versucht, dies zuzugeben, nachdem einige der Forschung zu tun.

conditions: [ 
    ["starts-with", "$Content-Type", ""] 
] 

Dies ist die Front-End-Code, wo ich die Werte der presigned URL-Optionen auf die dropzone.js hinzuzufügen.

$.ajax({ 
    type: "POST", 
    contentType: "application/json", 
    dataType: "json", 
    url: api_endpoint, 
    cache: false, 
    success: function(data) { 
     s3_filename_key = data.key; 
     $this.options.params = { 
      key: data.key, 
      acl: data.acl, 
      success_action_status: data.success_action_status, 
      "X-Amz-Credential": data['X-Amz-Credential'], 
      "X-Amz-Algorithm": data['X-Amz-Algorithm'], 
      "X-Amz-Date": data['X-Amz-Date'], 
      "Policy": data.Policy, 
      "X-Amz-Signature": data['X-Amz-Signature'] 
     } 
     done(); 
    }, 
    error: function(data) {} 
}); 

Als ich hinzufügen Content-Type die Dropzone Optionen, die ich dieses Ergebnis zurück - Invalid according to Policy: Extra input fields: content-type

Hier ist mein CORS Config für den Eimer. Statt

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

Answer 1

Versuchen richtig content Hinzufügen definiert Sie enctype. Zum Beispiel:

const policy = s3PolicyV4.generate({ 
key: key, 
bucket: process.env.S3_BUCKET, 
contentType: 'application/json', 
region: process.env.REGION, 
accessKey: process.env.ACCESS_KEY_ID, 
secretKey: process.env.SECRET_ACCESS_KEY, 
}); 

Multypart/Formulardaten ist das Attribut enctype of form.

Answer 2

wir verwenden unten Lösung in nodejs.

const mimeobj = FileType(buffer); 

const s3Options = { 
    ACL: 'public-read', 
    Body: buffer, 
    ContentType: mimeobj.mime, 
    Key: UUID + '.' + mimeobj.ext, 
    Bucket: 'your-bucket-name' 
}; 

S3.upload(s3Options).send((err, data) => { 

    if (err) { 
     return reply(Boom.badImplementation('Internal Server Error')); 
    } 

    const responseObj = { 
     orgFileName: decodedFileName, 
     name:uuId + '.' + mimeobj.ext, 
     url: data.Location 
    }; 

    responseArray.push(responseObj); 

    count++; 
    if (count === fileCount) { 
     return reply({ files: responseArray }); 
    } 
});