La AWS SDK pour JavaScript v2 est arrivée end-of-support. Nous vous recommandons de migrer vers la [AWS SDK pour JavaScript version 3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/). Pour plus de détails et d'informations sur la façon de migrer, veuillez consulter cette [annonce](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/).

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Téléchargement de photos vers Amazon S3 depuis un navigateur
<a name="s3-example-photo-album"></a>

![JavaScript code example that applies to browser execution](http://docs.aws.amazon.com/fr_fr/sdk-for-javascript/v2/developer-guide/images/browsericon.png)

**Cet exemple de code de script de navigateur illustre :**
+ Comment créer une application de navigateur qui permet aux utilisateurs de créer des albums photos dans un compartiment Amazon S3 et de télécharger des photos dans les albums.

## Scénario
<a name="s3-example-photo-album-scenario"></a>

Dans cet exemple, une simple page HTML fournit une application basée sur un navigateur pour créer des albums photos dans un compartiment Amazon S3 dans lequel vous pouvez télécharger des photos. L'application vous permet de supprimer les photos et les albums que vous ajoutez.

![JavaScript dans un script de navigateur utilisant des compartiments Amazon S3 pour les albums photos.](http://docs.aws.amazon.com/fr_fr/sdk-for-javascript/v2/developer-guide/images/s3-photo-album-example.png)


Le script de navigateur utilise le SDK JavaScript pour interagir avec un compartiment Amazon S3. Utilisez les méthodes suivantes de la classe client Amazon S3 pour activer l'application d'album photo : 
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property)
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#headObject-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#headObject-property)
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#putObject-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#putObject-property)
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#upload-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#upload-property)
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#deleteObject-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#deleteObject-property)
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#deleteObjects-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#deleteObjects-property)

## Tâches prérequises
<a name="s3-example-photo-album-scenario-prerequisites"></a>

Pour configurer et exécuter cet exemple, vous devez d'abord :
+ Dans la [console Amazon S3](https://console.aws.amazon.com/s3/), créez un compartiment Amazon S3 que vous utiliserez pour stocker les photos de l'album. Pour plus d'informations sur la création d'un bucket dans la console, consultez [Creating a Bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket.html) dans le *guide de l'utilisateur d'Amazon Simple Storage Service*. Veillez à disposer des autorisations **Read (Lecture)** et **Write (Écriture)** sur **Objets**. Pour plus d'informations sur la définition des autorisations de bucket, consultez la section [Configuration des autorisations pour l'accès au site Web](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html).
+ Dans la [console Amazon Cognito](https://console.aws.amazon.com/cognito/), créez un pool d'identités Amazon Cognito à l'aide d'identités fédérées avec un accès activé pour les utilisateurs non authentifiés de la même région que le compartiment Amazon S3. Vous devez inclure l'ID du groupe d'identités dans le code afin d'obtenir les informations d'identification relatives au script du navigateur. *Pour plus d'informations sur les identités fédérées Amazon Cognito, consultez les [groupes d'identités Amazon Cognito (identités fédérées) dans le guide du développeur Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-identity.html).*
+ Dans la [console IAM, recherchez](https://console.aws.amazon.com/iam/) le rôle IAM créé par Amazon Cognito pour les utilisateurs non authentifiés. Ajoutez la politique suivante pour accorder des autorisations de lecture et d'écriture à un compartiment Amazon S3. Pour plus d'informations sur la création d'un rôle IAM, consultez la section [Création d'un rôle pour déléguer des autorisations à un AWS service](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) dans le Guide de l'*utilisateur IAM*.

  Utilisez cette politique de rôle pour le rôle IAM créé par Amazon Cognito pour les utilisateurs non authentifiés.
**Avertissement**  
Si vous activez l'accès pour des utilisateurs non authentifiés, vous accordez un accès total en écriture sur le compartiment et tous les objets du compartiment. Dans cet exemple, cette démarche liée à la sécurité est utile pour mettre l’accent sur les principaux objectifs. Cependant, dans de nombreuses situations réelles, une sécurité plus stricte, comme l'utilisation d'utilisateurs authentifiés et la propriété d'objet, est fortement recommandée.

------
#### [ JSON ]

****  

  ```
  {
     "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}}/*"
           ]
        }
     ]
  }
  ```

------

## Configuration de CORS
<a name="s3-example-photo-album-cors-configuration"></a>

Avant que le script du navigateur puisse accéder au compartiment Amazon S3, vous devez d'abord configurer sa [configuration CORS](cors.md#configuring-cors-s3-bucket) comme suit.

**Important**  
Dans la nouvelle console S3, la configuration CORS doit être de type JSON.

------
#### [ JSON ]

```
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]
```

------
#### [ XML ]

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

------

## La page web
<a name="s3-example-photo-album-html"></a>

Le code HTML pour l'application de chargement de photos se compose d'un élément <div> dans lequel le script de navigateur crée l'interface utilisateur de chargement. Le premier élément <script> ajoute le kit SDK au script de navigateur. Le deuxième <script>élément ajoute le JavaScript fichier externe qui contient le code du script du navigateur.

```
<!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>
```

## Configuration du kit SDK
<a name="s3-example-photo-album-configure-sdk"></a>

Obtenez les informations d'identification nécessaires pour configurer le SDK en appelant la `CognitoIdentityCredentials` méthode, en fournissant l'ID du pool d'identités Amazon Cognito. Ensuite, créez un objet de service `AWS.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 },
});
```

Dans cet exemple, presque tout le code restant est organisé en une série de fonctions qui rassemblent et présentent des informations sur les albums dans le compartiment, chargent et affichent les photos téléchargées dans les albums, et suppriment les photos et les albums. Ces fonctions sont :
+ `listAlbums`
+ `createAlbum`
+ `viewAlbum`
+ `addPhoto`
+ `deleteAlbum`
+ `deletePhoto`

## Liste des albums dans le compartiment
<a name="s3-example-photo-album-list-albums"></a>

L'application crée des albums dans le compartiment Amazon S3 sous forme d'objets dont les touches commencent par une barre oblique, indiquant que l'objet fonctionne comme un dossier. Pour répertorier tous les albums existants, la fonction `listAlbums` de l'application appelle la méthode `listObjects` de l'objet de service `AWS.S3` tout en utilisant `commonPrefix`, afin que l'appel retourne uniquement les objets utilisés en tant qu'albums.

Le reste de la fonction prend la liste des albums du compartiment Amazon S3 et génère le code HTML nécessaire pour afficher la liste des albums sur la page Web. Cela permet également de supprimer et d'ouvrir des albums individuels.

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

## Création d'un album dans le compartiment
<a name="s3-example-photo-album-create-album"></a>

Pour créer un album dans le compartiment Amazon S3, la `createAlbum` fonction de l'application valide d'abord le nom donné au nouvel album afin de s'assurer qu'il contient les caractères appropriés. La fonction forme ensuite une clé d'objet Amazon S3, qu'elle transmet à la `headObject` méthode de l'objet de service Amazon S3. Cette méthode retourne les métadonnées pour la clé spécifiée, si bien que si elle retourne des données, cela signifie qu'un objet avec cette clé existe déjà.

Si l'album n'existe pas déjà, la fonction appelle la méthode `putObject` de l'objet de service `AWS.S3` pour créer l'album. Ensuite, elle appelle la fonction `viewAlbum` pour afficher le nouvel album vide.

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

## Affichage d'un album
<a name="s3-example-photo-album-viewing-album"></a>

Pour afficher le contenu d'un album dans le compartiment Amazon S3, la `viewAlbum` fonction de l'application prend un nom d'album et crée la clé Amazon S3 pour cet album. Ensuite, la fonction appelle la méthode `listObjects` de l'objet de service `AWS.S3` pour obtenir une liste de tous les objets (photos) de l'album.

Le reste de la fonction prend la liste des objets (photos) de l'album et génère le code HTML nécessaire à l'affichage des photos dans la page web. Cela permet également de supprimer des photos individuelles et de revenir à la liste de l'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);
  });
}
```

## Ajout de photos à un album
<a name="s3-example-photo-album-adding-photos"></a>

Pour télécharger une photo dans un album du compartiment Amazon S3, la `addPhoto` fonction de l'application utilise un élément de sélection de fichiers dans la page Web pour identifier le fichier à télécharger. Ensuite, elle forme une clé pour la photo à charger à partir du nom de l'album et du nom du fichier actuels.

La fonction appelle la `upload` méthode de l'objet de service Amazon S3 pour télécharger la photo. Après avoir chargé la photo, la fonction affiche de nouveau l'album afin que la photo chargée apparaisse.

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

## Suppression d'une photo
<a name="s3-example-photo-album-delete-photo"></a>

Pour supprimer une photo d'un album du compartiment Amazon S3, la `deletePhoto` fonction de l'application appelle la `deleteObject` méthode de l'objet de service Amazon S3. Cela supprime la photo spécifiée par la valeur `photoKey` transmise à la fonction.

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

## Suppression d'un album
<a name="s3-example-photo-album-delete-album"></a>

Pour supprimer un album dans le compartiment Amazon S3, la `deleteAlbum` fonction de l'application appelle la `deleteObjects` méthode de l'objet de service 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();
      }
    );
  });
}
```