Wie kann ich direkt aus dem Browser mit einer vordefinierten URL anstelle von Anmeldeinformationen auf AWS S3 hochladen?

Ruhig die alte Frage, aber es half mir ein bisschen, um es endlich fertig.
Meine Lösung basiert auf PHP und JavaScript mit jQuery.

Habe ich die gesamte Lösung, schön verpackt in https://github.com/JoernBerkefeld/s3SignedUpload aber hier sind das wesentliche:

api.php:

<?php
require_once '/server/path/to/aws-autoloader.php';
use Aws\Common\Aws;

$BUCKET = "my-bucket";
$CONFIG = "path-to-iam-credentials-file-relative-to-root.php"

function getSignedUrl($filename, $mime) {
    $S3 = Aws::factory( $CONFIG )->get('S3');
    if(!$filename) {
        return $this->error('filename missing');
    }
    if(!$mime) {
        return $this->error('mime-type missing');
    }
    $final_filename = $this->get_file_name($filename);
    try {
        $signedUrl = $S3->getCommand('PutObject', array(
            'Bucket' => $BUCKET,
            'Key' => $this->folder . $final_filename,
            'ContentType' => $mime,
            'Body'        => '',
            'ContentMD5'  => false
        ))->createPresignedUrl('+30 minutes');
    } catch (S3Exception $e) {
        echo $e->getMessage() . "\n";
    }
    $signedUrl .= '&Content-Type='.urlencode($mime);
    return $signedUrl;
}


echo getSignedUrl($_GET['filename'],$_GET['mimetype']);

bitte stellen Sie sicher, dass fügen Sie Benutzerauthentifizierung hinzu, zu Ihrem api.php. Sonst keiner kennt den Pfad zu dieser Datei hochladen von Dateien auf den Eimer.

credentials.inc.php:

<?php
return array(
    'includes' => array('_aws'),
    'services' => array(
        'default_settings' => array(
            'params' => array(
                'key'    => 'MY-ACCESS-KEY',
                'secret' => 'MY-SECRECT',
                'region'  => 'eu-west-1' //set to your region
            )
        )
    )
);

client.js:

$("input[type=file]").onchange = function () {
    for (var file, i = 0; i < this.files.length; i++) {
        file = this.files[i];
        $.ajax({
            url : s3presignedApiUri,
            data: 'file='+ file.name + '&mime=' + file.type,
            type : "GET",
            dataType : "json",
            cache : false,
        })
        .done(function(s3presignedUrl) {
            $.ajax({
                url : s3presignedUrl,
                type : "PUT",
                data : file,
                dataType : "text",
                cache : false,
                contentType : file.type,
                processData : false
            })
            .done(function(){
                console.info('YEAH', s3presignedUrl.split('?')[0].substr(6));
            }
            .fail(function(){
                console.error('damn...');
            }
        })
    }
};

s3 cors-Einstellungen (PUT & OPTIONEN tatsächlich benötigt werden, aber nicht aktivieren Sie die OPTIONEN direkt...):

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

InformationsquelleAutor der Antwort Jörn Berkefeld

Wenn du nicht mit jQuery, das ist die minimal-Sie müssen auf dem front-end:

var xhr = new XMLHttpRequest();
xhr.open('PUT', signedUrl, true);
xhr.setRequestHeader('Content-Type', signedUrlContentType);
xhr.onload = () => {
  if (xhr.status === 200) {
    //success!
  }
};
xhr.onerror = () => {
  //error...
};
xhr.send(file); //`file` is a File object here 

Siehe Datei-Objekt docs: https://developer.mozilla.org/en-US/docs/Web/API/File

Dann können Sie fügen Sie Ihre upload-Fortschritt wie gewohnt:

xhr.upload.onprogress = (event) => {
  if (event.lengthComputable) {
    var percent = Math.round((event.loaded / event.total) * 100)
    console.log(percent);
  }
};

InformationsquelleAutor der Antwort Scott Jungwirth

Ziehe ich diese sauberer Ansatz, über github:

Wenn Sie bereits eine presigned erzeugte URL für den browser, können Sie senden Sie einfach eine XHR-Anfrage mit, dass die URL und die Nutzlast, um den upload auf S3. Das SDK wäre nicht erforderlich, dies zu tun. Ein jQuery-Beispiel unten:

$.ajax({
  url: presignedUrl, //the presigned URL
  type: 'PUT',
  data: 'data to upload into URL',
  success: function() { console.log('Uploaded data successfully.'); }
});

InformationsquelleAutor der Antwort user2528332