Una página web que indica los objetos de Amazon S3 que usan un SDK de AWS
En los siguientes ejemplos de código se muestra cómo obtener una lista de los objetos de Amazon S3 en una página web.
- JavaScript
-
- SDK para JavaScript (v3)
-
El siguiente código es el componente de React relevante que realiza llamadas al SDK de AWS. Hay una versión ejecutable de la aplicación que contiene este componente en el enlace anterior de GitHub.
import { useEffect, useState } from "react";
import {
ListObjectsCommand,
ListObjectsCommandOutput,
S3Client,
} from "@aws-sdk/client-s3";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers";
import "./App.css";
function App() {
const [objects, setObjects] = useState<
Required<ListObjectsCommandOutput>["Contents"]
>([]);
useEffect(() => {
const client = new S3Client({
region: "us-east-1",
// Unless you have a public bucket, you'll need access to a private bucket.
// One way to do this is to create an Amazon Cognito identity pool, attach a role to the pool,
// and grant the role access to the 's3:GetObject' action.
//
// You'll also need to configure the CORS settings on the bucket to allow traffic from
// this example site. Here's an example configuration that allows all origins. Don't
// do this in production.
//[
// {
// "AllowedHeaders": ["*"],
// "AllowedMethods": ["GET"],
// "AllowedOrigins": ["*"],
// "ExposeHeaders": [],
// },
//]
//
credentials: fromCognitoIdentityPool({
clientConfig: { region: "us-east-1" },
identityPoolId: "<YOUR_IDENTITY_POOL_ID>",
}),
});
const command = new ListObjectsCommand({ Bucket: "bucket-name" });
client.send(command).then(({ Contents }) => setObjects(Contents || []));
}, []);
return (
<div className="App">
{objects.map((o) => (
<div key={o.ETag}>{o.Key}</div>
))}
</div>
);
}
export default App;
Para obtener una lista completa de las guías para desarrolladores del AWS SDK y ejemplos de código, consulte Uso de este servicio con un SDK de AWS. En este tema también se incluye información sobre cómo comenzar a utilizar el SDK y detalles sobre sus versiones anteriores.
