Lo scenario Attività prerequisite Configurazione di CORS La pagina Web Configurazione dell'SDK Elenco di album nel bucket.Creazione di un album nel bucket Visualizzazione di un album Aggiunta di foto a un album Eliminazione di una foto Eliminazione di un album

Caricamento di foto su Amazon S3 da un browser

JavaScript code example that applies to browser execution

Questo esempio di codice dello script di browser illustra:

Come creare un'applicazione browser che consenta agli utenti di creare album fotografici in un bucket Amazon S3 e caricare foto negli album.

Lo scenario

In questo esempio, una semplice pagina HTML fornisce un'applicazione basata su browser per la creazione di album fotografici in un bucket Amazon S3 in cui caricare foto. L'applicazione consente di eliminare le foto e gli album aggiunti.

JavaScript in uno script del browser che utilizza i bucket Amazon S3 per album fotografici.

Lo script del browser utilizza l'SDK JavaScript per interagire con un bucket Amazon S3. Utilizza i seguenti metodi della classe client Amazon S3 per abilitare l'applicazione per album fotografici:

Attività prerequisite

Per configurare ed eseguire questo esempio, è necessario completare queste attività:

Nella console Amazon S3, crea un bucket Amazon S3 che utilizzerai per archiviare le foto nell'album. Per ulteriori informazioni sulla creazione di un bucket nella console, consulta Creating a Bucket nella Amazon Simple Storage Service User Guide. Verifica di disporre di entrambe le autorizzazioni Read (Leggi) e Write (Scrivi) su Objects (Oggetti). Per ulteriori informazioni sull'impostazione delle autorizzazioni per i bucket, consulta Impostazione delle autorizzazioni per l'accesso al sito Web.
Nella console Amazon Cognito, crea un pool di identità Amazon Cognito utilizzando Federated Identities con accesso abilitato per gli utenti non autenticati nella stessa regione del bucket Amazon S3. È necessario includere l'ID del pool di identità nel codice per ottenere le credenziali per lo script di browser. Per ulteriori informazioni sulle identità federate di Amazon Cognito, consulta Amazon Cognito Identity Pools (Federated Identites) nella Amazon Cognito Developer Guide.
Nella console IAM, trova il ruolo IAM creato da Amazon Cognito per gli utenti non autenticati. Aggiungi la seguente policy per concedere autorizzazioni di lettura e scrittura a un bucket Amazon S3. Per ulteriori informazioni sulla creazione di un ruolo IAM, consulta Creating a Role to Delegate Permissions to an AWS Service nella IAM User Guide.

Utilizza questa politica di ruolo per il ruolo IAM creato da Amazon Cognito per utenti non autenticati.

avvertimento
Se si abilita l'accesso per gli utenti non autenticati, sarà possibile concedere l'accesso in scrittura al bucket, e a tutti gli oggetti nel bucket, a chiunque nel mondo. Questa sicurezza è utile in questo esempio per rimanere focalizzati sugli obiettivi principali dell'esempio. In molte situazioni in tempo reale, tuttavia, aumentare i livelli di sicurezza, ad esempio utilizzando gli utenti autenticati e proprietà dell'oggetto, è altamente consigliabile.
```
{
   "Version": "2012-10-17",
   "Statement": [
      {
         "Effect": "Allow",
         "Action": [
            "s3:DeleteObject",
            "s3:GetObject",
            "s3:ListBucket",
            "s3:PutObject",
            "s3:PutObjectAcl"
         ],
         "Resource": [            
            "arn:aws:s3:::BUCKET_NAME",
            "arn:aws:s3:::BUCKET_NAME/*"
         ]
      }
   ]
}
```

Configurazione di CORS

Prima che lo script del browser possa accedere al bucket Amazon S3, devi prima configurarne la configurazione CORS come segue.

Importante

Nella nuova console S3, la configurazione CORS deve essere JSON.

La pagina Web

L'HTML per l'applicazione del caricamento delle foto è costituito da un elemento <div> all'interno dello script di browser che crea l'interfaccia utente per il caricamento. Il primo elemento <script> aggiunge l'SDK allo script di browser. Il secondo <script>elemento aggiunge il JavaScript file esterno che contiene il codice dello script del browser.


<!DOCTYPE html>
<html>
  <head>
     <!-- **DO THIS**: -->
    <!--   Replace SDK_VERSION_NUMBER with the current SDK version number -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.js"></script>
    <script src="./s3_photoExample.js"></script>
    <script>
       function getHtml(template) {
          return template.join('\n');
       }
       listAlbums();
    </script>
  </head>
  <body>
    <h1>My Photo Albums App</h1>
    <div id="app"></div>
  </body>
</html>

Configurazione dell'SDK

Ottieni le credenziali necessarie per configurare l'SDK chiamando il CognitoIdentityCredentials metodo, fornendo l'ID del pool di identità di Amazon Cognito. Successivamente, crea un oggetto di servizioAWS.S3.


var albumBucketName = "BUCKET_NAME";
var bucketRegion = "REGION";
var IdentityPoolId = "IDENTITY_POOL_ID";

AWS.config.update({
  region: bucketRegion,
  credentials: new AWS.CognitoIdentityCredentials({
    IdentityPoolId: IdentityPoolId,
  }),
});

var s3 = new AWS.S3({
  apiVersion: "2006-03-01",
  params: { Bucket: albumBucketName },
});

Quasi tutto il resto del codice in questo esempio è organizzato in una serie di funzioni in grado di raccogliere e presentare le informazioni relative agli album nel bucket, caricare e visualizzare le foto caricate negli album ed eliminare foto e album. Queste funzioni sono:

listAlbums
createAlbum
viewAlbum
addPhoto
deleteAlbum
deletePhoto

Elenco di album nel bucket.

L'applicazione crea album nel bucket Amazon S3 come oggetti le cui chiavi iniziano con una barra, che indica che l'oggetto funziona come una cartella. Per elencare tutti gli album esistenti nel bucket, la funzione dell'applicazione listAlbums richiama il metodo listObjects dell'oggetto di servizio AWS.S3 durante l'utilizzo di commonPrefix in modo che la chiamata restituirà solo gli oggetti utilizzati come album.

Il resto della funzione prende l'elenco degli album dal bucket Amazon S3 e genera il codice HTML necessario per visualizzare l'elenco degli album nella pagina Web. Consente inoltre l'eliminazione e l'apertura di singoli album.


function listAlbums() {
  s3.listObjects({ Delimiter: "/" }, function (err, data) {
    if (err) {
      return alert("There was an error listing your albums: " + err.message);
    } else {
      var albums = data.CommonPrefixes.map(function (commonPrefix) {
        var prefix = commonPrefix.Prefix;
        var albumName = decodeURIComponent(prefix.replace("/", ""));
        return getHtml([
          "<li>",
          "<span onclick=\"deleteAlbum('" + albumName + "')\">X</span>",
          "<span onclick=\"viewAlbum('" + albumName + "')\">",
          albumName,
          "</span>",
          "</li>",
        ]);
      });
      var message = albums.length
        ? getHtml([
            "<p>Click on an album name to view it.</p>",
            "<p>Click on the X to delete the album.</p>",
          ])
        : "<p>You do not have any albums. Please Create album.";
      var htmlTemplate = [
        "<h2>Albums</h2>",
        message,
        "<ul>",
        getHtml(albums),
        "</ul>",
        "<button onclick=\"createAlbum(prompt('Enter Album Name:'))\">",
        "Create New Album",
        "</button>",
      ];
      document.getElementById("app").innerHTML = getHtml(htmlTemplate);
    }
  });
}

Creazione di un album nel bucket

Per creare un album nel bucket Amazon S3, la createAlbum funzione dell'applicazione convalida innanzitutto il nome dato al nuovo album per assicurarsi che contenga caratteri adatti. La funzione forma quindi una chiave oggetto Amazon S3, passandola al headObject metodo dell'oggetto di servizio Amazon S3. Questo metodo restituisce i metadati per la chiave specificata, perciò se restituisce i dati, allora un oggetto con quella chiave già esiste.

Se l'album non esiste, la funzione richiama il metodo putObject dell'oggetto di servizio AWS.S3 per creare l'album. È quindi richiama la funzione viewAlbum per visualizzare il nuovo album vuoto.


function createAlbum(albumName) {
  albumName = albumName.trim();
  if (!albumName) {
    return alert("Album names must contain at least one non-space character.");
  }
  if (albumName.indexOf("/") !== -1) {
    return alert("Album names cannot contain slashes.");
  }
  var albumKey = encodeURIComponent(albumName);
  s3.headObject({ Key: albumKey }, function (err, data) {
    if (!err) {
      return alert("Album already exists.");
    }
    if (err.code !== "NotFound") {
      return alert("There was an error creating your album: " + err.message);
    }
    s3.putObject({ Key: albumKey }, function (err, data) {
      if (err) {
        return alert("There was an error creating your album: " + err.message);
      }
      alert("Successfully created album.");
      viewAlbum(albumName);
    });
  });
}

Visualizzazione di un album

Per visualizzare il contenuto di un album nel bucket Amazon S3, la viewAlbum funzione dell'applicazione prende il nome di un album e crea la chiave Amazon S3 per quell'album. La funzione chiama quindi il metodo listObjects dell'oggetto di servizio AWS.S3 per ottenere un elenco di tutti gli oggetti (foto) nell'album.

Il resto della funzione acquisisce l'elenco degli oggetti (foto) dall'album e genera il codice HTML necessario per visualizzare le foto nella pagina Web. Consente inoltre l'eliminazione di singole foto e la navigazione nell'elenco dell'album.


function viewAlbum(albumName) {
  var albumPhotosKey = encodeURIComponent(albumName) + "/";
  s3.listObjects({ Prefix: albumPhotosKey }, function (err, data) {
    if (err) {
      return alert("There was an error viewing your album: " + err.message);
    }
    // 'this' references the AWS.Response instance that represents the response
    var href = this.request.httpRequest.endpoint.href;
    var bucketUrl = href + albumBucketName + "/";

    var photos = data.Contents.map(function (photo) {
      var photoKey = photo.Key;
      var photoUrl = bucketUrl + encodeURIComponent(photoKey);
      return getHtml([
        "<span>",
        "<div>",
        '<img style="width:128px;height:128px;" src="' + photoUrl + '"/>',
        "</div>",
        "<div>",
        "<span onclick=\"deletePhoto('" +
          albumName +
          "','" +
          photoKey +
          "')\">",
        "X",
        "</span>",
        "<span>",
        photoKey.replace(albumPhotosKey, ""),
        "</span>",
        "</div>",
        "</span>",
      ]);
    });
    var message = photos.length
      ? "<p>Click on the X to delete the photo</p>"
      : "<p>You do not have any photos in this album. Please add photos.</p>";
    var htmlTemplate = [
      "<h2>",
      "Album: " + albumName,
      "</h2>",
      message,
      "<div>",
      getHtml(photos),
      "</div>",
      '<input id="photoupload" type="file" accept="image/*">',
      '<button id="addphoto" onclick="addPhoto(\'' + albumName + "')\">",
      "Add Photo",
      "</button>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
    ];
    document.getElementById("app").innerHTML = getHtml(htmlTemplate);
  });
}

Aggiunta di foto a un album

Per caricare una foto in un album nel bucket Amazon S3, la addPhoto funzione dell'applicazione utilizza un elemento di selezione dei file nella pagina Web per identificare un file da caricare. È quindi forma una chiave per le foto da caricare dall'attuale nome dell'album e nome del file.

La funzione richiama il upload metodo dell'oggetto del servizio Amazon S3 per caricare la foto. Dopo aver caricato la foto, la funzione visualizza nuovamente l'album in modo che vengano visualizzate le foto caricate.


function addPhoto(albumName) {
  var files = document.getElementById("photoupload").files;
  if (!files.length) {
    return alert("Please choose a file to upload first.");
  }
  var file = files[0];
  var fileName = file.name;
  var albumPhotosKey = encodeURIComponent(albumName) + "/";

  var photoKey = albumPhotosKey + fileName;

  // Use S3 ManagedUpload class as it supports multipart uploads
  var upload = new AWS.S3.ManagedUpload({
    params: {
      Bucket: albumBucketName,
      Key: photoKey,
      Body: file,
    },
  });

  var promise = upload.promise();

  promise.then(
    function (data) {
      alert("Successfully uploaded photo.");
      viewAlbum(albumName);
    },
    function (err) {
      return alert("There was an error uploading your photo: ", err.message);
    }
  );
}

Eliminazione di una foto

Per eliminare una foto da un album nel bucket Amazon S3, la deletePhoto funzione dell'applicazione richiama il deleteObject metodo dell'oggetto di servizio Amazon S3. Ciò elimina la foto specificata dal valore photoKey passato alla funzione.


function deletePhoto(albumName, photoKey) {
  s3.deleteObject({ Key: photoKey }, function (err, data) {
    if (err) {
      return alert("There was an error deleting your photo: ", err.message);
    }
    alert("Successfully deleted photo.");
    viewAlbum(albumName);
  });
}

Eliminazione di un album

Per eliminare un album nel bucket Amazon S3, la deleteAlbum funzione dell'applicazione richiama il deleteObjects metodo dell'oggetto di servizio Amazon S3.


function deleteAlbum(albumName) {
  var albumKey = encodeURIComponent(albumName) + "/";
  s3.listObjects({ Prefix: albumKey }, function (err, data) {
    if (err) {
      return alert("There was an error deleting your album: ", err.message);
    }
    var objects = data.Contents.map(function (object) {
      return { Key: object.Key };
    });
    s3.deleteObjects(
      {
        Delete: { Objects: objects, Quiet: true },
      },
      function (err, data) {
        if (err) {
          return alert("There was an error deleting your album: ", err.message);
        }
        alert("Successfully deleted album.");
        listAlbums();
      }
    );
  });
}

Avvertimento JavaScript è disabilitato o non è disponibile nel tuo browser.

Per usare la documentazione AWS, JavaScript deve essere abilitato. Consulta le pagine della guida del browser per le istruzioni.

Convenzioni dei documenti

Visualizzazione di foto in un bucket Amazon S3: codice completo

Caricamento di foto su Amazon S3: codice completo