aws - Subiendo imagen a Amazon s3 con HTML, javascript y jQuery con solicitud de Ajax(sin PHP)

aws sdk upload image

Question

Estoy desarrollando un sitio web en HTML, javascript y jQuery. Quiero subir imágenes al servidor amazon s3 en una solicitud ajax. No existe tal SDK para integrar s3 en Javascript. Un SDK PHP está disponible, pero no es útil para mí. ¿Alguien puede proporcionar una solución a esto en javascript?

Answer 1

Amazon solo permitió el Intercambio de recursos de origen cruzado, en teoría, permite a tus usuarios subir a S3 directamente, sin usar tu servidor (y PHP) como proxy.

Aquí está la documentación -> http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html

Hacen un gran trabajo al indicarle cómo habilitarlo en un depósito de S3, pero iv no encontró ejemplos reales de javascript sobre cómo obtener datos del cliente en el depósito.

La primera persona en publicar CORS.js es una leyenda xD

Answer 2

Aquí hay un ejemplo de cargas de archivos reanudables en Amazon S3 usando CORS y javascript http://cotag.github.com/Condominios/

Answer 3

Consiguió Amazon S3 y CORS trabajando en js y html5 usando XMLHTTPObject basado en este artículo del article .

1: CORS solo funciona desde una URL adecuada " http: // localhost ". (El archivo /// xyz te volverá loco)

2: Asegúrate de que hayas compilado correctamente la POLICÍA y el Secreto: esta es mi política y este es el enlace del proyecto para que comiences con la Firma y la Política . ¡No publiques este JS con tu secreto NUNCA!

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

Aquí está el código 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);
  }

Funciones de ayuda

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

Entonces el formulario 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>

¡CORS-ing feliz!

Answer 4

Para la parte de autenticación,

Sin código php, sin servidor, sin código JS grande, excepto a continuación;

puede usar AWS Cognito IdentityPoolId como credencial, menos código, pero debe crear AWS Cognito IdetityPool y adjuntar política, simplemente acceso de escritura s3.

var IdentityPoolId = ''us-east-1:1...........''; AWS.config.update({ credentials: new AWS.CognitoIdentityCredentials({ IdentityPoolId: IdentityPoolId }) });

Answer 5

Puede hacerlo por AWS S3 Cognito intente este enlace aquí:

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

Pruebe también este código

Simplemente cambie Region, IdentityPoolId y su nombre de cubo

<!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 es necesario, puede usar github Link

Espero que ayude a los demás :)