web-dev-qa-db-fra.com

Chargement d'image sur Amazon s3 avec HTML, javascript et jQuery avec demande Ajax (pas de PHP)

Je développe un site web en HTML, javascript et jQuery. Je souhaite télécharger des images sur le serveur Amazon s3 dans une requête ajax. Il n’existe pas de tel SDK pour intégrer s3 en Javascript. Un SDK PHP est disponible, mais il ne m’est pas utile. Quelqu'un peut-il fournir une solution à cela en JavaScript?

javascripthtml5jqueryamazon-s3
60
Swapnil Godambe

Nous avons obtenu Amazon S3 & CORS travaillant sur js et html5 à l'aide de XMLHTTPObject basé sur cet article article . 

1: CORS ne fonctionne qu'à partir de l'URL appropriée " http: // localhost ". (fichier /// xyz va vous rendre fou)

2: Assurez-vous que la politique et le secret ont été correctement compilés - voici ma politique et voici le lien permettant de démarrer le projet avec Signature et politique - ne publiez pas ce JS avec votre secret !

POLICY_JSON = { "expiration": "2020-12-01T12:00:00.000Z",
            "conditions": [
            {"bucket": this.get('bucket')},
            ["starts-with", "$key", ""],
            {"acl": this.get('acl')},                           
            ["starts-with", "$Content-Type", ""],
            ["content-length-range", 0, 524288000]
            ]
          };


    var secret = this.get('AWSSecretKeyId');
    var policyBase64 = Base64.encode(JSON.stringify(POLICY_JSON));
    console.log ( policyBase64 )

    var signature = b64_hmac_sha1(secret, policyBase64);
    b64_hmac_sha1(secret, policyBase64);
    console.log( signature);

Voici le code JS

function uploadFile() {

    var file = document.getElementById('file').files[0];
    var fd = new FormData();

    var key = "events/" + (new Date).getTime() + '-' + file.name;

    fd.append('key', key);
    fd.append('acl', 'public-read'); 
    fd.append('Content-Type', file.type);      
    fd.append('AWSAccessKeyId', 'YOUR ACCESS KEY');
    fd.append('policy', 'YOUR POLICY')
    fd.append('signature','YOUR SIGNATURE');

    fd.append("file",file);

    var xhr = getXMLHTTPObject();

    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);

    xhr.open('POST', 'https://<yourbucket>.s3.amazonaws.com/', true); //MUST BE LAST LINE BEFORE YOU SEND 

    xhr.send(fd);
  }

Fonctions d'assistance

function uploadProgress(evt) {
    if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded * 100 / evt.total);
      document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
    }
    else {
      document.getElementById('progressNumber').innerHTML = 'unable to compute';
    }
  }

  function uploadComplete(evt) {
    /* This event is raised when the server send back a response */
    alert("Done - " + evt.target.responseText );
  }

  function uploadFailed(evt) {
    alert("There was an error attempting to upload the file." + evt);
  }

  function uploadCanceled(evt) {
    alert("The upload has been canceled by the user or the browser dropped the connection.");
  }

Puis le formulaire HTML 

 <form id="form1" enctype="multipart/form-data" method="post">
<div class="row">
  <label for="file">Select a File to Upload</label><br />
  <input type="file" name="file" id="file" onchange="fileSelected()"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
  <input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>

Heureux CORS-ing!

117
fino

Amazon vient d’autoriser le partage de ressources inter-origines. En théorie, il permet à vos utilisateurs de télécharger directement sur S3, sans utiliser votre serveur (ni PHP) comme proxy.

Heres the docs -> http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html

Ils font un excellent travail pour vous dire comment l'activer sur un compartiment S3, mais iv n'a trouvé aucun exemple en javascript permettant d'obtenir des données d'un client à un autre.

La première personne à publier CORS.js est une légende xD 

7
lukejacksonn

Voici un exemple d'envoi de fichiers pouvant être repris sur Amazon S3 à l'aide de CORS et javascript http://cotag.github.com/Condominios/

5
PaddlePoP

Vous pouvez le faire par AWS S3 Cognito, essayez ce lien ici:

http://docs.aws.Amazon.com/AWSJavaScriptSDK/guide/browser-examples.html#Amazon_S3

Essayez aussi ce code 

Il suffit de changer de région, IdentityPoolId et votre nom de compartiment

<!DOCTYPE html>
<html>

<head>
    <title>AWS S3 File Upload</title>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
</head>

<body>
    <input type="file" id="file-chooser" />
    <button id="upload-button">Upload to S3</button>
    <div id="results"></div>
    <script type="text/javascript">
    AWS.config.region = 'your-region'; // 1. Enter your region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'your-IdentityPoolId' // 2. Enter your identity pool
    });
    AWS.config.credentials.get(function(err) {
        if (err) alert(err);
        console.log(AWS.config.credentials);
    });
    var bucketName = 'your-bucket'; // Enter your bucket name
    var bucket = new AWS.S3({
        params: {
            Bucket: bucketName
        }
    });
    var fileChooser = document.getElementById('file-chooser');
    var button = document.getElementById('upload-button');
    var results = document.getElementById('results');
    button.addEventListener('click', function() {
        var file = fileChooser.files[0];
        if (file) {
            results.innerHTML = '';
            var objKey = 'testing/' + file.name;
            var params = {
                Key: objKey,
                ContentType: file.type,
                Body: file,
                ACL: 'public-read'
            };
            bucket.putObject(params, function(err, data) {
                if (err) {
                    results.innerHTML = 'ERROR: ' + err;
                } else {
                    listObjs(); // this function will list all the files which has been uploaded
                    //here you can also add your code to update your database(MySQL, firebase whatever you are using)
                }
            });
        } else {
            results.innerHTML = 'Nothing to upload.';
        }
    }, false);
    function listObjs() {
        var prefix = 'testing';
        bucket.listObjects({
            Prefix: prefix
        }, function(err, data) {
            if (err) {
                results.innerHTML = 'ERROR: ' + err;
            } else {
                var objKeys = "";
                data.Contents.forEach(function(obj) {
                    objKeys += obj.Key + "<br>";
                });
                results.innerHTML = objKeys;
            }
        });
    }
    </script>
</body>

</html>

Si nécessaire, vous pouvez utiliser github Link

J'espère que ça va aider les autres :)

3
Joomler

Pour la partie authentification,

Pas de code php, pas de serveur, pas de gros code JS sauf ci-dessous;

vous pouvez utiliser AWS Cognito IdentityPoolId comme identifiant, moins de code .__, mais vous devez créer AWS Cognito IdetityPool et attacher une stratégie, simplement un accès en écriture s3.

 var IdentityPoolId = 'us-east-1: 1 ...........'; 


 AWS.config.update ({
 Informations d'identification: nouvelle AWS.CognitoIdentityCredentials ({
 IdentityPoolId: IdentityPoolId 
}) .__)}. ;__.
0
Mustafa Kahraman