O cenário Tarefas de pré-requisito Configurar CORS A página da web Como configurar o SDK Listar álbuns no bucket Criar um álbum no bucket Visualizar um álbum Adicionar fotos a um álbum Excluir uma foto Excluir um álbum

Fazer upload de fotos para o Amazon S3 partir de um navegador

JavaScript code example that applies to browser execution

Este exemplo de código de script do navegador mostra:

Como criar um aplicativo de navegador que permita que os usuários criem álbuns de fotos em um bucket do Amazon S3 e façam upload de fotos nos álbuns.

O cenário

Neste exemplo, uma página em HTML simples fornece um aplicativo no navegador para criar álbuns de fotos em um bucket do Amazon S3 para o qual você pode enviar fotos. O aplicativo permite que você exclua fotos e álbuns que adicionar.

JavaScript em um script de navegador usando buckets do Amazon S3 para álbuns de fotos.

O script do navegador usa o SDK para JavaScript para interagir com um bucket do Amazon S3. Use os seguintes métodos da classe de cliente Amazon S3 para habilitar o aplicativo do álbum de fotos:

Tarefas de pré-requisito

Para configurar e executar este exemplo, você deve primeiro concluir estas tarefas:

No console do console do Amazon S3, crie um bucket do Amazon S3 para usar ao armazenar as fotos no álbum. Para obter mais informações sobre como criar um bucket, consulte Criar um bucket, no Guia do usuário do Amazon Simple Storage Service. Você deve ter as permissões Read (Leitura) e Write (Gravação) de Objects (Objetos). Para obter mais informações sobre definir permissões de bucket, consulte Definir permissões para acesso ao site.
No console do Amazon Cognito, crie um banco de identidades do usando identidades federadas com acesso habilitado para usuários não autenticados na mesma região que o bucket do Amazon S3. Você precisa incluir o ID do grupo de identidades no código para obter credenciais para o script do navegador. Para obter mais informações sobre as identidades federadas do Amazon Cognito, consulte Bancos de identidade do Amazon Cognito (Identidades federadas (identidades federadas) no Guia do desenvolvedor do Amazon Cognito.
No console do IAM, localize o perfil do IAM criado pelo Amazon Cognito para usuários não autenticados. Adicione a política a seguir para conceder permissões de leitura e gravação a um bucket do Amazon S3. Para obter mais informações sobre como criar um perfil do IAM, consulte Criação de uma função para delegar permissões a um serviço da AWS no Guia do usuário do IAM.

Use essa política de perfil para o perfil do criada pelo para usuários não autenticados.

Atenção
Se habilitar o acesso para usuários não autenticados, você concederá acesso de gravação no bucket, e todos os objetos do bucket, a qualquer pessoa no mundo. Essa postura de segurança é útil neste exemplo para manter o foco nos principais objetivos do exemplo. Em muitas situações em tempo real, porém, é altamente recomendável usar uma segurança mais restrita, como usuários autenticados e propriedade de objetos.
```
{
   "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/*"
         ]
      }
   ]
}
```

Configurar CORS

Antes de o script do navegador acessar o bucket do Amazon S3, primeiro faça a configuração do CORS como a seguir.

Importante

No novo console do S3, a configuração CORS deve ser JSON.

A página da web

O HTML do aplicativo de upload de fotos é formado por um elemento <div> dentro do qual o script do navegador cria a interface do usuário do upload. O primeiro elemento <script> adiciona o SDK ao script do navegador. O segundo elemento <script> adiciona o arquivo JavaScript externo que contém o código de script do navegador.


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

Como configurar o SDK

Obtenha as credenciais necessárias para configurar o SDK chamando o método CognitoIdentityCredentials, fornecendo o ID do grupo de identidades do Amazon Cognito. Em seguida, crie um objeto de serviço do 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 },
});

Quase todo o restante do código neste exemplo é organizado em uma série de funções que coletam e apresentam informações sobre os álbuns do bucket, sobem e exibem as fotos carregadas dentro dos álbuns e excluem fotos e álbuns. Essas funções são:

listAlbums
createAlbum
viewAlbum
addPhoto
deleteAlbum
deletePhoto

Listar álbuns no bucket

O aplicativo cria álbuns no bucket do Amazon S3 como objetos cujas chaves comecem com um caractere de barra, indicando que o objeto funciona como uma pasta. Para listar todos os álbuns existentes no bucket, a função listAlbums do aplicativo chama o método listObjects do objeto de serviço do AWS.S3 ao usar commonPrefix para que a chamada retorne apenas objetos usados como álbuns.

O restante da função utiliza a lista de álbuns do bucket do Amazon S3 e gera o HTML necessário para exibir a lista de álbuns na página da web. Ela também permite excluir e abrir álbuns individuais.


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

Criar um álbum no bucket

Para criar um álbum no bucket do Amazon S3, a função createAlbum do aplicativo primeiro valida o nome para o novo álbum para garantir que ele contém caracteres adequados. Em seguida, forma uma chave de objeto do Amazon S3, passando para o método headObject do objeto de serviço do Amazon S3. Esse método retorna os metadados para a chave especificada, de forma que, se retornar dados, já existe um objeto com essa chave.

Se o álbum ainda não existir, a função chamará o método putObject do objeto de serviço do AWS.S3 para criar o álbum. Em seguida, chama a função viewAlbum para exibir o novo álbum vazio.


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

Visualizar um álbum

Para exibir o conteúdo de um álbum no bucket do Amazon S3, a função viewAlbum do aplicativo assumirá o nome de um álbum e criará a chave do Amazon S3 para esse álbum. A função chama o método listObjects do objeto de serviço do AWS.S3 para obter uma lista com todos os objetos (fotos) no álbum.

O restante da função utiliza a lista de objetos (fotos) do álbum e gera o HTML necessário para exibir as fotos na página da web. Ela também permite a exclusão de fotos individuais e que se volte para a lista de álbuns.


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

Adicionar fotos a um álbum

Para fazer upload de uma foto a um álbum no bucket do Amazon S3, a função addPhoto do aplicativo usa um elemento seletor na página da web para identificar um arquivo para upload. Em seguida, forma uma chave para a foto ser carregada pelo nome do álbum atual e pelo nome do arquivo.

A função chama o método upload do objeto de serviço do Amazon S3 para fazer upload da foto. Depois de carregar a foto, a função reexibe o álbum, para que a foto carregada seja exibida.


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

Excluir uma foto

Para excluir uma foto de um álbum no bucket do Amazon S3, a função deletePhoto do aplicativo chama o método deleteObject do objeto de serviço do Amazon S3. Isso exclui a foto especificada pelo valor photoKey passado à função.


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

Excluir um álbum

Para excluir um álbum no bucket do Amazon S3, a função deleteAlbum do aplicativo chama o método deleteObjects do objeto de serviço do 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();
      }
    );
  });
}

Atenção O Javascript está desativado ou não está disponível no seu navegador.

Para usar a documentação da AWS, o Javascript deve estar ativado. Consulte as páginas de Ajuda do navegador para obter instruções.

Convenções do documento

Visualizar fotos em um bucket do Amazon S3: Código completo

Fazer upload de fotos no Amazon S3: código completo