Page updated Jan 16, 2024

Working with files / attachments

The Storage and GraphQL API categories can be used together to associate a file, such as an image or video, with a particular record. For example, you might create a User model with a profile picture, or a Post model with an associated image. With Amplify's GraphQL API and Storage categories, you can reference the file within the model itself to create an association.

To get started, run the following commands in an existing Amplify project:

# For Authenticator component: npm i @aws-amplify/ui-react # Select default configuration: amplify add auth # Select "Content", "Auth users only", full CRUD access, # and default configuration: amplify add storage # Select default configuration amplify add api
1# For Authenticator component:
2npm i @aws-amplify/ui-react
3
4# Select default configuration:
5amplify add auth
6
7# Select "Content", "Auth users only", full CRUD access,
8# and default configuration:
9amplify add storage
10
11# Select default configuration
12amplify add api

When prompted, use the following schema, which can also be found under amplify/backend/api/[name of project]/schema.graphql:

type Song @model @auth(rules: [{ allow: public }]) { id: ID! name: String! coverArtKey: String # Set as optional to allow adding file after initial create }
1type Song @model @auth(rules: [{ allow: public }]) {
2 id: ID!
3 name: String!
4 coverArtKey: String # Set as optional to allow adding file after initial create
5}

Save the schema and run amplify push to deploy the changes.

Next, at the root of your project, set all access to private by configuring the Storage object globally. This will restrict file access to only the signed-in user.

Storage.configure({ level: 'private' });
1Storage.configure({ level: 'private' });

For the complete working example, including required imports, obtaining the file from the user, and React component state management, see the Complete Example below.

Configuring authorization

Your application needs authorization credentials for reading and writing to both Storage and the GraphQL API, except in the case where all data and files are intended to be publicly accessible.

The Storage and API categories govern data access based on their own authorization patterns, meaning that it's necessary to configure appropriate auth roles for each individual category. Although both categories share the same access credentials set up through the Auth category, they work independently from one another. For instance, adding an @auth directive to the API schema does not guard against file access in the Storage category. Likewise, adding authorization rules to the Storage category does not guard against data access in the API category.

When you run amplify add storage, the CLI will configure appropriate IAM policies on the bucket using a Cognito Identity Pool role. You will then have the option of adding CRUD (Create, Update, Read and Delete) based permissions as well, so that Authenticated and Guest users will be granted limited permissions within these levels. Even after adding this configuration via the CLI, all Storage access is still public by default. To guard against accidental public access, the Storage access levels must either be configured on the Storage object globally, or set within individual function calls. This guide uses the former approach, setting all Storage access to private globally.

The ability to independently configure authorization rules for each category allows for more granular control over data access, and adds greater flexibility. For scenarios where authorization patterns must be mixed and matched, configure the access level on individual Storage function calls. For example, you may want to use private CRUD access on an individual Storage function call for files that should only be accessible by the owner (such as personal files), protected read access to allow all logged in users to view common files (such as images in a shared photo album), and public read access to allow all users to view a file (such as a public profile picture).

For more details on how to configure Storage authorization levels, see the Storage documentation. For more on configuring GraphQL API authorization, see the API documentation.

Create a record with an associated file

First create a record via the GraphQL API, then upload the file to Storage, and finally add the association between the record and file. Use the following example with the GraphQL API and Storage categories to create a record and associate the file with the record.

The API record's id is prepended to the Storage file name to ensure uniqueness. If this is excluded, multiple API records could then be associated with the same file key unintentionally.

const createSongDetails: CreateSongInput = { name: `My first song` }; // Create the API record: const response = await API.graphql<GraphQLQuery<CreateSongMutation>>({ query: mutations.createSong, variables: { input: createSongDetails } }); const song = response?.data?.createSong; if (!song) return; // Upload the Storage file: const result = await Storage.put(`${song.id}-${file.name}`, file, { contentType: 'image/png' // contentType is optional }); const updateSongDetails: UpdateSongInput = { id: song.id, coverArtKey: result?.key }; // Add the file association to the record: const updateResponse = await API.graphql<GraphQLQuery<UpdateSongMutation>>({ query: mutations.updateSong, variables: { input: updateSongDetails } }); const updatedSong = updateResponse?.data?.updateSong; // If the record has no associated file, we can return early. if (!updatedSong?.coverArtKey) return; // Retrieve the signed URL: const signedURL = await Storage.get(updatedSong.coverArtKey);
1const createSongDetails: CreateSongInput = {
2 name: `My first song`
3};
4
5// Create the API record:
6const response = await API.graphql<GraphQLQuery<CreateSongMutation>>({
7 query: mutations.createSong,
8 variables: { input: createSongDetails }
9});
10
11const song = response?.data?.createSong;
12
13if (!song) return;
14
15// Upload the Storage file:
16const result = await Storage.put(`${song.id}-${file.name}`, file, {
17 contentType: 'image/png' // contentType is optional
18});
19
20const updateSongDetails: UpdateSongInput = {
21 id: song.id,
22 coverArtKey: result?.key
23};
24
25// Add the file association to the record:
26const updateResponse = await API.graphql<GraphQLQuery<UpdateSongMutation>>({
27 query: mutations.updateSong,
28 variables: { input: updateSongDetails }
29});
30
31const updatedSong = updateResponse?.data?.updateSong;
32
33// If the record has no associated file, we can return early.
34if (!updatedSong?.coverArtKey) return;
35
36// Retrieve the signed URL:
37const signedURL = await Storage.get(updatedSong.coverArtKey);
const createSongDetails: CreateSongInput = { name: `My first song`, }; // Create the API record: const response = await API.graphql({ query: mutations.createSong, variables: { input: createSongDetails }, }); const song = response?.data?.createSong; if (!song) return; // Upload the Storage file: const result = await Storage.put(`${song.id}-${file.name}`, file, { contentType: "image/png", // contentType is optional }); const updateSongDetails = { id: song.id, coverArtKey: result?.key, }; // Add the file association to the record: const updateResponse = await API.graphql< GraphQLQuery<UpdateSongMutation> >({ query: mutations.updateSong, variables: { input: updateSongDetails }, }); const updatedSong = updateResponse?.data?.updateSong; // If the record has no associated file, we can return early. if (!updatedSong?.coverArtKey) return; // Retrieve the signed URL: const signedURL = await Storage.get(updatedSong.coverArtKey);
1const createSongDetails: CreateSongInput = {
2 name: `My first song`,
3};
4
5// Create the API record:
6const response = await API.graphql({
7 query: mutations.createSong,
8 variables: { input: createSongDetails },
9});
10
11const song = response?.data?.createSong;
12
13if (!song) return;
14
15// Upload the Storage file:
16const result = await Storage.put(`${song.id}-${file.name}`, file, {
17 contentType: "image/png", // contentType is optional
18});
19
20const updateSongDetails = {
21 id: song.id,
22 coverArtKey: result?.key,
23};
24
25// Add the file association to the record:
26const updateResponse = await API.graphql<
27 GraphQLQuery<UpdateSongMutation>
28>({
29 query: mutations.updateSong,
30 variables: { input: updateSongDetails },
31});
32
33const updatedSong = updateResponse?.data?.updateSong;
34
35// If the record has no associated file, we can return early.
36if (!updatedSong?.coverArtKey) return;
37
38// Retrieve the signed URL:
39const signedURL = await Storage.get(updatedSong.coverArtKey);

Add or update a file for an associated record

To associate a file with a record, update the record with the key returned by the Storage upload. The following example uploads the file using Storage, updates the record with the file's key, then retrieves the signed URL to download the image. If an image is already associated with the record, this will update the record with the new image.

// Upload the Storage file: const result = await Storage.put(`${currentSong.id}-${file.name}`, file, { contentType: 'image/png' // contentType is optional }); const updateSongDetails: UpdateSongInput = { id: currentSong.id, coverArtKey: result?.key }; // Add the file association to the record: const response = await API.graphql<GraphQLQuery<UpdateSongMutation>>({ query: mutations.updateSong, variables: { input: updateSongDetails } }); const updatedSong = response?.data?.updateSong; // If the record has no associated file, we can return early. if (!updatedSong?.coverArtKey) return; // Retrieve the file's signed URL: const signedURL = await Storage.get(updatedSong.coverArtKey);
1// Upload the Storage file:
2const result = await Storage.put(`${currentSong.id}-${file.name}`, file, {
3 contentType: 'image/png' // contentType is optional
4});
5
6const updateSongDetails: UpdateSongInput = {
7 id: currentSong.id,
8 coverArtKey: result?.key
9};
10
11// Add the file association to the record:
12const response = await API.graphql<GraphQLQuery<UpdateSongMutation>>({
13 query: mutations.updateSong,
14 variables: { input: updateSongDetails }
15});
16
17const updatedSong = response?.data?.updateSong;
18
19// If the record has no associated file, we can return early.
20if (!updatedSong?.coverArtKey) return;
21
22// Retrieve the file's signed URL:
23const signedURL = await Storage.get(updatedSong.coverArtKey);
// Upload the Storage file: const result = await Storage.put(`${currentSong.id}-${file.name}`, file, { contentType: 'image/png' // contentType is optional }); const updateSongDetails = { id: currentSong.id, coverArtKey: result?.key }; // Add the file association to the record: const response = await API.graphql({ query: mutations.updateSong, variables: { input: updateSongDetails } }); const updatedSong = response?.data?.updateSong; // If the record has no associated file, we can return early. if (!updatedSong?.coverArtKey) return; // Retrieve the file's signed URL: const signedURL = await Storage.get(updatedSong.coverArtKey);
1// Upload the Storage file:
2const result = await Storage.put(`${currentSong.id}-${file.name}`, file, {
3 contentType: 'image/png' // contentType is optional
4});
5
6const updateSongDetails = {
7 id: currentSong.id,
8 coverArtKey: result?.key
9};
10
11// Add the file association to the record:
12const response = await API.graphql({
13 query: mutations.updateSong,
14 variables: { input: updateSongDetails }
15});
16
17const updatedSong = response?.data?.updateSong;
18
19// If the record has no associated file, we can return early.
20if (!updatedSong?.coverArtKey) return;
21
22// Retrieve the file's signed URL:
23const signedURL = await Storage.get(updatedSong.coverArtKey);

Query a record and retrieve the associated file

To retrieve the file associated with a record, first query the record, then use Storage to get the signed URL. The signed URL can then be used to download the file, display an image, etc:

// Query the record to get the file key: const response = await API.graphql<GraphQLQuery<GetSongQuery>>({ query: queries.getSong, variables: { id: currentSong.id } }); const song = response.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; // Retrieve the signed URL: const signedURL = await Storage.get(song.coverArtKey);
1// Query the record to get the file key:
2const response = await API.graphql<GraphQLQuery<GetSongQuery>>({
3 query: queries.getSong,
4 variables: { id: currentSong.id }
5});
6const song = response.data?.getSong;
7
8// If the record has no associated file, we can return early.
9if (!song?.coverArtKey) return;
10
11// Retrieve the signed URL:
12const signedURL = await Storage.get(song.coverArtKey);
// Query the record to get the file key: const response = await API.graphql({ query: queries.getSong, variables: { id: currentSong.id } }); const song = response.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; // Retrieve the signed URL: const signedURL = await Storage.get(song.coverArtKey);
1// Query the record to get the file key:
2const response = await API.graphql({
3 query: queries.getSong,
4 variables: { id: currentSong.id }
5});
6const song = response.data?.getSong;
7
8// If the record has no associated file, we can return early.
9if (!song?.coverArtKey) return;
10
11// Retrieve the signed URL:
12const signedURL = await Storage.get(song.coverArtKey);

Delete and remove files associated with API records

There are three common deletion workflows when working with Storage files and the GraphQL API:

  1. Remove the file association, continue to persist both file and record.
  2. Remove the record association and delete the file.
  3. Delete both file and record.

Remove the file association, continue to persist both file and record

The following example removes the file association from the record, but does not delete the file from S3, nor the record from the database.

const response = await API.graphql<GraphQLQuery<GetSongQuery>>({ query: queries.getSong, variables: { id: currentSong.id } }); const song = response?.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; const songDetails: UpdateSongInput = { id: song.id, coverArtKey: null }; const updatedSong = await API.graphql<GraphQLQuery<UpdateSongMutation>>({ query: mutations.updateSong, variables: { input: songDetails } });
1const response = await API.graphql<GraphQLQuery<GetSongQuery>>({
2 query: queries.getSong,
3 variables: { id: currentSong.id }
4});
5
6const song = response?.data?.getSong;
7
8// If the record has no associated file, we can return early.
9if (!song?.coverArtKey) return;
10
11const songDetails: UpdateSongInput = {
12 id: song.id,
13 coverArtKey: null
14};
15
16const updatedSong = await API.graphql<GraphQLQuery<UpdateSongMutation>>({
17 query: mutations.updateSong,
18 variables: { input: songDetails }
19});
const response = await API.graphql({ query: queries.getSong, variables: { id: currentSong.id } }); const song = response?.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; const songDetails = { id: song.id, coverArtKey: null }; const updatedSong = await API.graphql({ query: mutations.updateSong, variables: { input: songDetails } });
1const response = await API.graphql({
2 query: queries.getSong,
3 variables: { id: currentSong.id }
4});
5
6const song = response?.data?.getSong;
7
8// If the record has no associated file, we can return early.
9if (!song?.coverArtKey) return;
10
11const songDetails = {
12 id: song.id,
13 coverArtKey: null
14};
15
16const updatedSong = await API.graphql({
17 query: mutations.updateSong,
18 variables: { input: songDetails }
19});

Remove the record association and delete the file

The following example removes the file from the record, then deletes the file from S3:

const response = await API.graphql<GraphQLQuery<GetSongQuery>>({ query: queries.getSong, variables: { id: currentSong.id } }); const song = response?.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; const songDetails: UpdateSongInput = { id: song.id, coverArtKey: null // Set the file association to `null` }; // Remove associated file from record const updatedSong = await API.graphql<GraphQLQuery<UpdateSongMutation>>({ query: mutations.updateSong, variables: { input: songDetails } }); // Delete the file from S3: await Storage.remove(song.coverArtKey);
1const response = await API.graphql<GraphQLQuery<GetSongQuery>>({
2 query: queries.getSong,
3 variables: { id: currentSong.id }
4});
5
6const song = response?.data?.getSong;
7
8// If the record has no associated file, we can return early.
9if (!song?.coverArtKey) return;
10
11const songDetails: UpdateSongInput = {
12 id: song.id,
13 coverArtKey: null // Set the file association to `null`
14};
15
16// Remove associated file from record
17const updatedSong = await API.graphql<GraphQLQuery<UpdateSongMutation>>({
18 query: mutations.updateSong,
19 variables: { input: songDetails }
20});
21
22// Delete the file from S3:
23await Storage.remove(song.coverArtKey);
const response = await API.graphql({ query: queries.getSong, variables: { id: currentSong.id }, }); const song = response?.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; const songDetails: UpdateSongInput = { id: song.id, coverArtKey: null, // Set the file association to `null` }; // Remove associated file from record const updatedSong = await API.graphql({ query: mutations.updateSong, variables: { input: songDetails }, }); // Delete the file from S3: await Storage.remove(song.coverArtKey);
1const response = await API.graphql({
2 query: queries.getSong,
3 variables: { id: currentSong.id },
4});
5
6const song = response?.data?.getSong;
7
8// If the record has no associated file, we can return early.
9if (!song?.coverArtKey) return;
10
11const songDetails: UpdateSongInput = {
12 id: song.id,
13 coverArtKey: null, // Set the file association to `null`
14};
15
16// Remove associated file from record
17const updatedSong = await API.graphql({
18 query: mutations.updateSong,
19 variables: { input: songDetails },
20});
21
22// Delete the file from S3:
23await Storage.remove(song.coverArtKey);

Delete both file and record

const response = await API.graphql<GraphQLQuery<GetSongQuery>>({ query: queries.getSong, variables: { id: currentSong.id } }); const song = response?.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; await Storage.remove(song.coverArtKey); const songDetails: DeleteSongInput = { id: song.id }; const deletedSong = await API.graphql<GraphQLQuery<DeleteSongMutation>>({ query: mutations.deleteSong, variables: { input: songDetails } });
1const response = await API.graphql<GraphQLQuery<GetSongQuery>>({
2 query: queries.getSong,
3 variables: { id: currentSong.id }
4});
5
6const song = response?.data?.getSong;
7
8// If the record has no associated file, we can return early.
9if (!song?.coverArtKey) return;
10
11await Storage.remove(song.coverArtKey);
12
13const songDetails: DeleteSongInput = {
14 id: song.id
15};
16
17const deletedSong = await API.graphql<GraphQLQuery<DeleteSongMutation>>({
18 query: mutations.deleteSong,
19 variables: { input: songDetails }
20});
const response = await API.graphql({ query: queries.getSong, variables: { id: currentSong.id } }); const song = response?.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; await Storage.remove(song.coverArtKey); const songDetails = { id: song.id }; const deletedSong = await API.graphql({ query: mutations.deleteSong, variables: { input: songDetails } });
1const response = await API.graphql({
2 query: queries.getSong,
3 variables: { id: currentSong.id }
4});
5
6const song = response?.data?.getSong;
7
8// If the record has no associated file, we can return early.
9if (!song?.coverArtKey) return;
10
11await Storage.remove(song.coverArtKey);
12
13const songDetails = {
14 id: song.id
15};
16
17const deletedSong = await API.graphql({
18 query: mutations.deleteSong,
19 variables: { input: songDetails }
20});

Working with multiple files

You may want to add multiple files to a single record, such as a user profile with multiple images. To do this, you can add a list of file keys to the record. The following example adds a list of file keys to a record:

GraphQL schema to associate a data model with multiple files

When prompted after running amplify add api use the following schema, which can also be found under amplify/backend/api/[name of project]/schema.graphql:

type PhotoAlbum @model @auth(rules: [{ allow: public }]) { id: ID! name: String! imageKeys: [String] #Set as optional to allow adding file(s) after initial create }
1type PhotoAlbum @model @auth(rules: [{ allow: public }]) {
2 id: ID!
3 name: String!
4 imageKeys: [String] #Set as optional to allow adding file(s) after initial create
5}

CRUD operations when working with multiple files is the same as when working with a single file, with the exception that we are now working with a list of image keys, as opposed to a single image key.

Create a record with multiple associated files

First create a record via the GraphQL API, then upload the files to Storage, and finally add the associations between the record and files.

const photoAlbumDetails: CreatePhotoAlbumInput = { name: `My first photoAlbum` }; // Create the API record: const response = await API.graphql<GraphQLQuery<CreatePhotoAlbumMutation>>({ query: mutations.createPhotoAlbum, variables: { input: photoAlbumDetails } }); const photoAlbum = response?.data?.createPhotoAlbum; if (!photoAlbum) return; // Upload all files to Storage: const imageKeys = await Promise.all( Array.from(e.target.files).map(async (file) => { const result = await Storage.put(`${photoAlbum.id}-${file.name}`, file, { contentType: 'image/png' // contentType is optional }); return result?.key; }) ); const updatePhotoAlbumDetails: UpdatePhotoAlbumInput = { id: photoAlbum.id, imageKeys: imageKeys }; // Add the file association to the record: const updateResponse = await API.graphql< GraphQLQuery<UpdatePhotoAlbumMutation> >({ query: mutations.updatePhotoAlbum, variables: { input: updatePhotoAlbumDetails } }); const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum; // If the record has no associated file, we can return early. if (!updatedPhotoAlbum?.imageKeys?.length) return; // Retrieve signed urls for all files: const signedUrls = await Promise.all( updatedPhotoAlbum.imageKeys.map(async (key) => await Storage.get(key!)) );
1const photoAlbumDetails: CreatePhotoAlbumInput = {
2 name: `My first photoAlbum`
3};
4
5// Create the API record:
6const response = await API.graphql<GraphQLQuery<CreatePhotoAlbumMutation>>({
7 query: mutations.createPhotoAlbum,
8 variables: { input: photoAlbumDetails }
9});
10
11const photoAlbum = response?.data?.createPhotoAlbum;
12
13if (!photoAlbum) return;
14
15// Upload all files to Storage:
16const imageKeys = await Promise.all(
17 Array.from(e.target.files).map(async (file) => {
18 const result = await Storage.put(`${photoAlbum.id}-${file.name}`, file, {
19 contentType: 'image/png' // contentType is optional
20 });
21
22 return result?.key;
23 })
24);
25
26const updatePhotoAlbumDetails: UpdatePhotoAlbumInput = {
27 id: photoAlbum.id,
28 imageKeys: imageKeys
29};
30
31// Add the file association to the record:
32const updateResponse = await API.graphql<
33 GraphQLQuery<UpdatePhotoAlbumMutation>
34>({
35 query: mutations.updatePhotoAlbum,
36 variables: { input: updatePhotoAlbumDetails }
37});
38
39const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum;
40
41// If the record has no associated file, we can return early.
42if (!updatedPhotoAlbum?.imageKeys?.length) return;
43
44// Retrieve signed urls for all files:
45const signedUrls = await Promise.all(
46 updatedPhotoAlbum.imageKeys.map(async (key) => await Storage.get(key!))
47);
const photoAlbumDetails = { name: `My first photoAlbum` }; // Create the API record: const response = await API.graphql({ query: mutations.createPhotoAlbum, variables: { input: photoAlbumDetails } }); const photoAlbum = response?.data?.createPhotoAlbum; if (!photoAlbum) return; // Upload all files to Storage: const imageKeys = await Promise.all( Array.from(e.target.files).map(async (file) => { const result = await Storage.put(`${photoAlbum.id}-${file.name}`, file, { contentType: 'image/png' // contentType is optional }); return result?.key; }) ); const updatePhotoAlbumDetails = { id: photoAlbum.id, imageKeys: imageKeys }; // Add the file association to the record: const updateResponse = await API.graphql({ query: mutations.updatePhotoAlbum, variables: { input: updatePhotoAlbumDetails } }); const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum; // If the record has no associated file, we can return early. if (!updatedPhotoAlbum?.imageKeys?.length) return; // Retrieve signed urls for all files: const signedUrls = await Promise.all( updatedPhotoAlbum.imageKeys.map(async (key) => await Storage.get(key)) );
1const photoAlbumDetails = {
2 name: `My first photoAlbum`
3};
4
5// Create the API record:
6const response = await API.graphql({
7 query: mutations.createPhotoAlbum,
8 variables: { input: photoAlbumDetails }
9});
10
11const photoAlbum = response?.data?.createPhotoAlbum;
12
13if (!photoAlbum) return;
14
15// Upload all files to Storage:
16const imageKeys = await Promise.all(
17 Array.from(e.target.files).map(async (file) => {
18 const result = await Storage.put(`${photoAlbum.id}-${file.name}`, file, {
19 contentType: 'image/png' // contentType is optional
20 });
21
22 return result?.key;
23 })
24);
25
26const updatePhotoAlbumDetails = {
27 id: photoAlbum.id,
28 imageKeys: imageKeys
29};
30
31// Add the file association to the record:
32const updateResponse = await API.graphql({
33 query: mutations.updatePhotoAlbum,
34 variables: { input: updatePhotoAlbumDetails }
35});
36
37const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum;
38
39// If the record has no associated file, we can return early.
40if (!updatedPhotoAlbum?.imageKeys?.length) return;
41
42// Retrieve signed urls for all files:
43const signedUrls = await Promise.all(
44 updatedPhotoAlbum.imageKeys.map(async (key) => await Storage.get(key))
45);

Create a record with a single associated file

When a schema allows for multiple associated images, you can still create a record with a single associated file.

const photoAlbumDetails: CreatePhotoAlbumInput = { name: `My first photoAlbum` }; // Create the API record: const response = await API.graphql<GraphQLQuery<CreatePhotoAlbumMutation>>({ query: mutations.createPhotoAlbum, variables: { input: photoAlbumDetails } }); const photoAlbum = response?.data?.createPhotoAlbum; if (!photoAlbum) return; // Upload the Storage file: const result = await Storage.put(`${photoAlbum.id}-${file.name}`, file, { contentType: 'image/png' // contentType is optional }); const updatePhotoAlbumDetails: UpdatePhotoAlbumInput = { id: photoAlbum.id, imageKeys: [result?.key] }; // Add the file association to the record: const updateResponse = await API.graphql< GraphQLQuery<UpdatePhotoAlbumMutation> >({ query: mutations.updatePhotoAlbum, variables: { input: updatePhotoAlbumDetails } }); const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum; // If the record has no associated file, we can return early. if (!updatedPhotoAlbum?.imageKeys?.length) return; // Retrieve the file's signed URL: const signedURL = await Storage.get(updatedPhotoAlbum.imageKeys[0]!);
1const photoAlbumDetails: CreatePhotoAlbumInput = {
2 name: `My first photoAlbum`
3};
4
5// Create the API record:
6const response = await API.graphql<GraphQLQuery<CreatePhotoAlbumMutation>>({
7 query: mutations.createPhotoAlbum,
8 variables: { input: photoAlbumDetails }
9});
10
11const photoAlbum = response?.data?.createPhotoAlbum;
12
13if (!photoAlbum) return;
14
15// Upload the Storage file:
16const result = await Storage.put(`${photoAlbum.id}-${file.name}`, file, {
17 contentType: 'image/png' // contentType is optional
18});
19
20const updatePhotoAlbumDetails: UpdatePhotoAlbumInput = {
21 id: photoAlbum.id,
22 imageKeys: [result?.key]
23};
24
25// Add the file association to the record:
26const updateResponse = await API.graphql<
27 GraphQLQuery<UpdatePhotoAlbumMutation>
28>({
29 query: mutations.updatePhotoAlbum,
30 variables: { input: updatePhotoAlbumDetails }
31});
32
33const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum;
34
35// If the record has no associated file, we can return early.
36if (!updatedPhotoAlbum?.imageKeys?.length) return;
37
38// Retrieve the file's signed URL:
39const signedURL = await Storage.get(updatedPhotoAlbum.imageKeys[0]!);
const photoAlbumDetails = { name: `My first photoAlbum` }; // Create the API record: const response = await API.graphql({ query: mutations.createPhotoAlbum, variables: { input: photoAlbumDetails } }); const photoAlbum = response?.data?.createPhotoAlbum; if (!photoAlbum) return; // Upload the Storage file: const result = await Storage.put(`${photoAlbum.id}-${file.name}`, file, { contentType: 'image/png' // contentType is optional }); const updatePhotoAlbumDetails = { id: photoAlbum.id, imageKeys: [result?.key] }; // Add the file association to the record: const updateResponse = await API.graphql({ query: mutations.updatePhotoAlbum, variables: { input: updatePhotoAlbumDetails } }); const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum; // If the record has no associated file, we can return early. if (!updatedPhotoAlbum?.imageKeys?.length) return; // Retrieve the file's signed URL: const signedURL = await Storage.get(updatedPhotoAlbum.imageKeys[0]);
1const photoAlbumDetails = {
2 name: `My first photoAlbum`
3};
4
5// Create the API record:
6const response = await API.graphql({
7 query: mutations.createPhotoAlbum,
8 variables: { input: photoAlbumDetails }
9});
10
11const photoAlbum = response?.data?.createPhotoAlbum;
12
13if (!photoAlbum) return;
14
15// Upload the Storage file:
16const result = await Storage.put(`${photoAlbum.id}-${file.name}`, file, {
17 contentType: 'image/png' // contentType is optional
18});
19
20const updatePhotoAlbumDetails = {
21 id: photoAlbum.id,
22 imageKeys: [result?.key]
23};
24
25// Add the file association to the record:
26const updateResponse = await API.graphql({
27 query: mutations.updatePhotoAlbum,
28 variables: { input: updatePhotoAlbumDetails }
29});
30
31const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum;
32
33// If the record has no associated file, we can return early.
34if (!updatedPhotoAlbum?.imageKeys?.length) return;
35
36// Retrieve the file's signed URL:
37const signedURL = await Storage.get(updatedPhotoAlbum.imageKeys[0]);

Add new files to an associated record

To associate additional files with a record, update the record with the keys returned by the Storage uploads.

// Upload all files to Storage: const newImageKeys = await Promise.all( Array.from(e.target.files).map(async (file) => { const result = await Storage.put( `${currentPhotoAlbum.id}-${file.name}`, file, { contentType: 'image/png' // contentType is optional } ); return result?.key; }) ); // Query existing record to retrieve currently associated files: const queriedResponse = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id } }); const photoAlbum = queriedResponse.data?.getPhotoAlbum; if (!photoAlbum?.imageKeys) return; // Merge existing and new file keys: const updatedImageKeys = [...newImageKeys, ...photoAlbum.imageKeys]; const photoAlbumDetails: UpdatePhotoAlbumInput = { id: currentPhotoAlbum.id, imageKeys: updatedImageKeys }; // Update record with merged file associations: const response = await API.graphql<GraphQLQuery<UpdatePhotoAlbumMutation>>({ query: mutations.updatePhotoAlbum, variables: { input: photoAlbumDetails } }); const updatedPhotoAlbum = response?.data?.updatePhotoAlbum; // If the record has no associated file, we can return early. if (!updatedPhotoAlbum?.imageKeys) return; // Retrieve signed urls for merged image keys: const signedUrls = await Promise.all( updatedPhotoAlbum?.imageKeys.map(async (key) => await Storage.get(key!)) );
1// Upload all files to Storage:
2const newImageKeys = await Promise.all(
3 Array.from(e.target.files).map(async (file) => {
4 const result = await Storage.put(
5 `${currentPhotoAlbum.id}-${file.name}`,
6 file,
7 {
8 contentType: 'image/png' // contentType is optional
9 }
10 );
11
12 return result?.key;
13 })
14);
15
16// Query existing record to retrieve currently associated files:
17const queriedResponse = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({
18 query: queries.getPhotoAlbum,
19 variables: { id: currentPhotoAlbum.id }
20});
21
22const photoAlbum = queriedResponse.data?.getPhotoAlbum;
23
24if (!photoAlbum?.imageKeys) return;
25
26// Merge existing and new file keys:
27const updatedImageKeys = [...newImageKeys, ...photoAlbum.imageKeys];
28
29const photoAlbumDetails: UpdatePhotoAlbumInput = {
30 id: currentPhotoAlbum.id,
31 imageKeys: updatedImageKeys
32};
33
34// Update record with merged file associations:
35const response = await API.graphql<GraphQLQuery<UpdatePhotoAlbumMutation>>({
36 query: mutations.updatePhotoAlbum,
37 variables: { input: photoAlbumDetails }
38});
39
40const updatedPhotoAlbum = response?.data?.updatePhotoAlbum;
41
42// If the record has no associated file, we can return early.
43if (!updatedPhotoAlbum?.imageKeys) return;
44
45// Retrieve signed urls for merged image keys:
46const signedUrls = await Promise.all(
47 updatedPhotoAlbum?.imageKeys.map(async (key) => await Storage.get(key!))
48);
// Upload all files to Storage: const newImageKeys = await Promise.all( Array.from(e.target.files).map(async (file) => { const result = await Storage.put( `${currentPhotoAlbum.id}-${file.name}`, file, { contentType: 'image/png' // contentType is optional } ); return result?.key; }) ); // Query existing record to retrieve currently associated files: const queriedResponse = await API.graphql({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id } }); const photoAlbum = queriedResponse.data?.getPhotoAlbum; if (!photoAlbum?.imageKeys) return; // Merge existing and new file keys: const updatedImageKeys = [...newImageKeys, ...photoAlbum.imageKeys]; const photoAlbumDetails = { id: currentPhotoAlbum.id, imageKeys: updatedImageKeys }; // Update record with merged file associations: const response = await API.graphql({ query: mutations.updatePhotoAlbum, variables: { input: photoAlbumDetails } }); const updatedPhotoAlbum = response?.data?.updatePhotoAlbum; // If the record has no associated file, we can return early. if (!updatedPhotoAlbum?.imageKeys) return; // Retrieve signed urls for merged image keys: const signedUrls = await Promise.all( updatedPhotoAlbum?.imageKeys.map(async (key) => await Storage.get(key)) );
1// Upload all files to Storage:
2const newImageKeys = await Promise.all(
3 Array.from(e.target.files).map(async (file) => {
4 const result = await Storage.put(
5 `${currentPhotoAlbum.id}-${file.name}`,
6 file,
7 {
8 contentType: 'image/png' // contentType is optional
9 }
10 );
11
12 return result?.key;
13 })
14);
15
16// Query existing record to retrieve currently associated files:
17const queriedResponse = await API.graphql({
18 query: queries.getPhotoAlbum,
19 variables: { id: currentPhotoAlbum.id }
20});
21
22const photoAlbum = queriedResponse.data?.getPhotoAlbum;
23
24if (!photoAlbum?.imageKeys) return;
25
26// Merge existing and new file keys:
27const updatedImageKeys = [...newImageKeys, ...photoAlbum.imageKeys];
28
29const photoAlbumDetails = {
30 id: currentPhotoAlbum.id,
31 imageKeys: updatedImageKeys
32};
33
34// Update record with merged file associations:
35const response = await API.graphql({
36 query: mutations.updatePhotoAlbum,
37 variables: { input: photoAlbumDetails }
38});
39
40const updatedPhotoAlbum = response?.data?.updatePhotoAlbum;
41
42// If the record has no associated file, we can return early.
43if (!updatedPhotoAlbum?.imageKeys) return;
44
45// Retrieve signed urls for merged image keys:
46const signedUrls = await Promise.all(
47 updatedPhotoAlbum?.imageKeys.map(async (key) => await Storage.get(key))
48);

Update the file for an associated record

Updating a file for an associated record is the same as updating a file for a single file record, with the exception that you will need to update the list of file keys.

// Upload new file to Storage: const result = await Storage.put(`${currentPhotoAlbum.id}-${file.name}`, file, { contentType: 'image/png' // contentType is optional }); const newFileKey = result?.key; // Query existing record to retrieve currently associated files: const queriedResponse = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id } }); const photoAlbum = queriedResponse.data?.getPhotoAlbum; if (!photoAlbum?.imageKeys?.length) return; // Retrieve last image key: const [lastImageKey] = photoAlbum.imageKeys.slice(-1); // Remove last file association by key const updatedImageKeys = [ ...photoAlbum.imageKeys.filter((key) => key !== lastImageKey), newFileKey ]; const photoAlbumDetails: UpdatePhotoAlbumInput = { id: currentPhotoAlbum.id, // @ts-ignore imageKeys: updatedImageKeys }; // Update record with updated file associations: const response = await API.graphql<GraphQLQuery<UpdatePhotoAlbumMutation>>({ query: mutations.updatePhotoAlbum, variables: { input: photoAlbumDetails } }); const updatedPhotoAlbum = response?.data?.updatePhotoAlbum; // If the record has no associated file, we can return early. if (!updatedPhotoAlbum?.imageKeys) return; // Retrieve signed urls for merged image keys: const signedUrls = await Promise.all( updatedPhotoAlbum?.imageKeys.map(async (key) => await Storage.get(key!)) );
1// Upload new file to Storage:
2const result = await Storage.put(`${currentPhotoAlbum.id}-${file.name}`, file, {
3 contentType: 'image/png' // contentType is optional
4});
5
6const newFileKey = result?.key;
7
8// Query existing record to retrieve currently associated files:
9const queriedResponse = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({
10 query: queries.getPhotoAlbum,
11 variables: { id: currentPhotoAlbum.id }
12});
13
14const photoAlbum = queriedResponse.data?.getPhotoAlbum;
15
16if (!photoAlbum?.imageKeys?.length) return;
17
18// Retrieve last image key:
19const [lastImageKey] = photoAlbum.imageKeys.slice(-1);
20
21// Remove last file association by key
22const updatedImageKeys = [
23 ...photoAlbum.imageKeys.filter((key) => key !== lastImageKey),
24 newFileKey
25];
26
27const photoAlbumDetails: UpdatePhotoAlbumInput = {
28 id: currentPhotoAlbum.id,
29 // @ts-ignore
30 imageKeys: updatedImageKeys
31};
32
33// Update record with updated file associations:
34const response = await API.graphql<GraphQLQuery<UpdatePhotoAlbumMutation>>({
35 query: mutations.updatePhotoAlbum,
36 variables: { input: photoAlbumDetails }
37});
38
39const updatedPhotoAlbum = response?.data?.updatePhotoAlbum;
40
41// If the record has no associated file, we can return early.
42if (!updatedPhotoAlbum?.imageKeys) return;
43
44// Retrieve signed urls for merged image keys:
45const signedUrls = await Promise.all(
46 updatedPhotoAlbum?.imageKeys.map(async (key) => await Storage.get(key!))
47);
// Upload new file to Storage: const result = await Storage.put(`${currentPhotoAlbum.id}-${file.name}`, file, { contentType: 'image/png' // contentType is optional }); const newFileKey = result?.key; // Query existing record to retrieve currently associated files: const queriedResponse = await API.graphql({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id } }); const photoAlbum = queriedResponse.data?.getPhotoAlbum; if (!photoAlbum?.imageKeys?.length) return; // Retrieve last image key: const [lastImageKey] = photoAlbum.imageKeys.slice(-1); // Remove last file association by key const updatedImageKeys = [ ...photoAlbum.imageKeys.filter((key) => key !== lastImageKey), newFileKey ]; const photoAlbumDetails = { id: currentPhotoAlbum.id, // @ts-ignore imageKeys: updatedImageKeys }; // Update record with updated file associations: const response = await API.graphql({ query: mutations.updatePhotoAlbum, variables: { input: photoAlbumDetails } }); const updatedPhotoAlbum = response?.data?.updatePhotoAlbum; // If the record has no associated file, we can return early. if (!updatedPhotoAlbum?.imageKeys) return; // Retrieve signed urls for merged image keys: const signedUrls = await Promise.all( updatedPhotoAlbum?.imageKeys.map(async (key) => await Storage.get(key)) );
1// Upload new file to Storage:
2const result = await Storage.put(`${currentPhotoAlbum.id}-${file.name}`, file, {
3 contentType: 'image/png' // contentType is optional
4});
5
6const newFileKey = result?.key;
7
8// Query existing record to retrieve currently associated files:
9const queriedResponse = await API.graphql({
10 query: queries.getPhotoAlbum,
11 variables: { id: currentPhotoAlbum.id }
12});
13
14const photoAlbum = queriedResponse.data?.getPhotoAlbum;
15
16if (!photoAlbum?.imageKeys?.length) return;
17
18// Retrieve last image key:
19const [lastImageKey] = photoAlbum.imageKeys.slice(-1);
20
21// Remove last file association by key
22const updatedImageKeys = [
23 ...photoAlbum.imageKeys.filter((key) => key !== lastImageKey),
24 newFileKey
25];
26
27const photoAlbumDetails = {
28 id: currentPhotoAlbum.id,
29 // @ts-ignore
30 imageKeys: updatedImageKeys
31};
32
33// Update record with updated file associations:
34const response = await API.graphql({
35 query: mutations.updatePhotoAlbum,
36 variables: { input: photoAlbumDetails }
37});
38
39const updatedPhotoAlbum = response?.data?.updatePhotoAlbum;
40
41// If the record has no associated file, we can return early.
42if (!updatedPhotoAlbum?.imageKeys) return;
43
44// Retrieve signed urls for merged image keys:
45const signedUrls = await Promise.all(
46 updatedPhotoAlbum?.imageKeys.map(async (key) => await Storage.get(key))
47);

Query a record and retrieve the associated files

To retrieve the files associated with a record, first query the record, then use Storage to retrieve all of the signed URLs.

// Query the record to get the file keys: const response = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id } }); const photoAlbum = response.data?.getPhotoAlbum; // If the record has no associated files, we can return early. if (!photoAlbum?.imageKeys) return; // Retrieve the signed URLs for the associated images: const signedUrls = await Promise.all( photoAlbum.imageKeys.map(async (imageKey) => { if (!imageKey) return; return await Storage.get(imageKey); }) );
1// Query the record to get the file keys:
2const response = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({
3 query: queries.getPhotoAlbum,
4 variables: { id: currentPhotoAlbum.id }
5});
6const photoAlbum = response.data?.getPhotoAlbum;
7
8// If the record has no associated files, we can return early.
9if (!photoAlbum?.imageKeys) return;
10
11// Retrieve the signed URLs for the associated images:
12const signedUrls = await Promise.all(
13 photoAlbum.imageKeys.map(async (imageKey) => {
14 if (!imageKey) return;
15 return await Storage.get(imageKey);
16 })
17);
// Query the record to get the file keys: const response = await API.graphql({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id } }); const photoAlbum = response.data?.getPhotoAlbum; // If the record has no associated files, we can return early. if (!photoAlbum?.imageKeys) return; // Retrieve the signed URLs for the associated images: const signedUrls = await Promise.all( photoAlbum.imageKeys.map(async (imageKey) => { if (!imageKey) return; return await Storage.get(imageKey); }) );
1// Query the record to get the file keys:
2const response = await API.graphql({
3 query: queries.getPhotoAlbum,
4 variables: { id: currentPhotoAlbum.id }
5});
6const photoAlbum = response.data?.getPhotoAlbum;
7
8// If the record has no associated files, we can return early.
9if (!photoAlbum?.imageKeys) return;
10
11// Retrieve the signed URLs for the associated images:
12const signedUrls = await Promise.all(
13 photoAlbum.imageKeys.map(async (imageKey) => {
14 if (!imageKey) return;
15 return await Storage.get(imageKey);
16 })
17);

Delete and remove files associated with API records

The workflow for deleting and removing files associated with API records is the same as when working with a single file, except that when performing a delete you will need to iterate over the list of files keys and call Storage.remove() for each file.

Remove the file association, continue to persist both files and record

const response = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id } }); const photoAlbum = response?.data?.getPhotoAlbum; // If the record has no associated file, we can return early. if (!photoAlbum?.imageKeys) return; const photoAlbumDetails: UpdatePhotoAlbumInput = { id: photoAlbum.id, imageKeys: null }; const updatedPhotoAlbum = await API.graphql< GraphQLQuery<UpdatePhotoAlbumMutation> >({ query: mutations.updatePhotoAlbum, variables: { input: photoAlbumDetails } });
1const response = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({
2 query: queries.getPhotoAlbum,
3 variables: { id: currentPhotoAlbum.id }
4});
5
6const photoAlbum = response?.data?.getPhotoAlbum;
7
8// If the record has no associated file, we can return early.
9if (!photoAlbum?.imageKeys) return;
10
11const photoAlbumDetails: UpdatePhotoAlbumInput = {
12 id: photoAlbum.id,
13 imageKeys: null
14};
15
16const updatedPhotoAlbum = await API.graphql<
17 GraphQLQuery<UpdatePhotoAlbumMutation>
18>({
19 query: mutations.updatePhotoAlbum,
20 variables: { input: photoAlbumDetails }
21});
const response = await API.graphql({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id } }); const photoAlbum = response?.data?.getPhotoAlbum; // If the record has no associated file, we can return early. if (!photoAlbum?.imageKeys) return; const photoAlbumDetails = { id: photoAlbum.id, imageKeys: null }; const updatedPhotoAlbum = await API.graphql({ query: mutations.updatePhotoAlbum, variables: { input: photoAlbumDetails } });
1const response = await API.graphql({
2 query: queries.getPhotoAlbum,
3 variables: { id: currentPhotoAlbum.id }
4});
5
6const photoAlbum = response?.data?.getPhotoAlbum;
7
8// If the record has no associated file, we can return early.
9if (!photoAlbum?.imageKeys) return;
10
11const photoAlbumDetails = {
12 id: photoAlbum.id,
13 imageKeys: null
14};
15
16const updatedPhotoAlbum = await API.graphql({
17 query: mutations.updatePhotoAlbum,
18 variables: { input: photoAlbumDetails }
19});

Remove the record association and delete the files

const response = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id } }); const photoAlbum = response?.data?.getPhotoAlbum; // If the record has no associated files, we can return early. if (!photoAlbum?.imageKeys) return; const photoAlbumDetails: UpdatePhotoAlbumInput = { id: photoAlbum.id, imageKeys: null // Set the file association to `null` }; // Remove associated files from record const updateResponse = await API.graphql< GraphQLQuery<UpdatePhotoAlbumMutation> >({ query: mutations.updatePhotoAlbum, variables: { input: photoAlbumDetails } }); const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum; // Delete the files from S3: await Promise.all( photoAlbum?.imageKeys.map(async (imageKey) => { if (!imageKey) return; await Storage.remove(imageKey); }) );
1const response = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({
2 query: queries.getPhotoAlbum,
3 variables: { id: currentPhotoAlbum.id }
4});
5
6const photoAlbum = response?.data?.getPhotoAlbum;
7
8// If the record has no associated files, we can return early.
9if (!photoAlbum?.imageKeys) return;
10
11const photoAlbumDetails: UpdatePhotoAlbumInput = {
12 id: photoAlbum.id,
13 imageKeys: null // Set the file association to `null`
14};
15
16// Remove associated files from record
17const updateResponse = await API.graphql<
18 GraphQLQuery<UpdatePhotoAlbumMutation>
19>({
20 query: mutations.updatePhotoAlbum,
21 variables: { input: photoAlbumDetails }
22});
23
24const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum;
25
26// Delete the files from S3:
27await Promise.all(
28 photoAlbum?.imageKeys.map(async (imageKey) => {
29 if (!imageKey) return;
30 await Storage.remove(imageKey);
31 })
32);
const response = await API.graphql({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id } }); const photoAlbum = response?.data?.getPhotoAlbum; // If the record has no associated files, we can return early. if (!photoAlbum?.imageKeys) return; const photoAlbumDetails = { id: photoAlbum.id, imageKeys: null // Set the file association to `null` }; // Remove associated files from record const updateResponse = await API.graphql({ query: mutations.updatePhotoAlbum, variables: { input: photoAlbumDetails } }); const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum; // Delete the files from S3: await Promise.all( photoAlbum?.imageKeys.map(async (imageKey) => { if (!imageKey) return; await Storage.remove(imageKey); }) );
1const response = await API.graphql({
2 query: queries.getPhotoAlbum,
3 variables: { id: currentPhotoAlbum.id }
4});
5
6const photoAlbum = response?.data?.getPhotoAlbum;
7
8// If the record has no associated files, we can return early.
9if (!photoAlbum?.imageKeys) return;
10
11const photoAlbumDetails = {
12 id: photoAlbum.id,
13 imageKeys: null // Set the file association to `null`
14};
15
16// Remove associated files from record
17const updateResponse = await API.graphql({
18 query: mutations.updatePhotoAlbum,
19 variables: { input: photoAlbumDetails }
20});
21
22const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum;
23
24// Delete the files from S3:
25await Promise.all(
26 photoAlbum?.imageKeys.map(async (imageKey) => {
27 if (!imageKey) return;
28 await Storage.remove(imageKey);
29 })
30);

Delete record and all associated files

const response = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id } }); const photoAlbum = response?.data?.getPhotoAlbum; if (!photoAlbum) return; const photoAlbumDetails: DeletePhotoAlbumInput = { id: photoAlbum.id }; await API.graphql<GraphQLQuery<DeletePhotoAlbumMutation>>({ query: mutations.deletePhotoAlbum, variables: { input: photoAlbumDetails } }); // If the record has no associated file, we can return early. if (!photoAlbum?.imageKeys) return; await Promise.all( photoAlbum?.imageKeys.map(async (imageKey) => { if (!imageKey) return; await Storage.remove(imageKey); }) );
1const response = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({
2 query: queries.getPhotoAlbum,
3 variables: { id: currentPhotoAlbum.id }
4});
5
6const photoAlbum = response?.data?.getPhotoAlbum;
7
8if (!photoAlbum) return;
9
10const photoAlbumDetails: DeletePhotoAlbumInput = {
11 id: photoAlbum.id
12};
13
14await API.graphql<GraphQLQuery<DeletePhotoAlbumMutation>>({
15 query: mutations.deletePhotoAlbum,
16 variables: { input: photoAlbumDetails }
17});
18
19// If the record has no associated file, we can return early.
20if (!photoAlbum?.imageKeys) return;
21
22await Promise.all(
23 photoAlbum?.imageKeys.map(async (imageKey) => {
24 if (!imageKey) return;
25 await Storage.remove(imageKey);
26 })
27);
const response = await API.graphql({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id } }); const photoAlbum = response?.data?.getPhotoAlbum; if (!photoAlbum) return; const photoAlbumDetails = { id: photoAlbum.id }; await API.graphql({ query: mutations.deletePhotoAlbum, variables: { input: photoAlbumDetails } }); // If the record has no associated file, we can return early. if (!photoAlbum?.imageKeys) return; await Promise.all( photoAlbum?.imageKeys.map(async (imageKey) => { if (!imageKey) return; await Storage.remove(imageKey); }) );
1const response = await API.graphql({
2 query: queries.getPhotoAlbum,
3 variables: { id: currentPhotoAlbum.id }
4});
5
6const photoAlbum = response?.data?.getPhotoAlbum;
7
8if (!photoAlbum) return;
9
10const photoAlbumDetails = {
11 id: photoAlbum.id
12};
13
14await API.graphql({
15 query: mutations.deletePhotoAlbum,
16 variables: { input: photoAlbumDetails }
17});
18
19// If the record has no associated file, we can return early.
20if (!photoAlbum?.imageKeys) return;
21
22await Promise.all(
23 photoAlbum?.imageKeys.map(async (imageKey) => {
24 if (!imageKey) return;
25 await Storage.remove(imageKey);
26 })
27);

Data consistency when working with records and files

The recommended access patterns in these docs attempt to remove deleted files, but favor leaving orphans over leaving records that point to non-existent files. This optimizes for read latency by ensuring clients rarely attempt to fetch a non-existent file from Storage. However, any app that deletes files can inherently cause records on-device to point to non-existent files.

One example is when we create an API record, associate the Storage file with that record, and then retrieve the file's signed URL. "Device A" calls the GraphQL API to create API_Record_1, and then associates that record with First_Photo. Before "Device A" is about to retrieve the signed URL, "Device B" might query API_Record_1, delete First_Photo, and update the record accordingly. However, "Device A" is still using the old API_Record_1, which is now out-of-date. Even though the shared global state is correctly in sync at every stage, the individual device ("Device A") has an out-of-date record that points to a non-existent file. Similar issues can conceivably occur for updates. Depending on your app, some of these mismatches can be minimized even more with real-time data / GraphQL subscriptions.

It is important to understand when these mismatches can occur and to add meaningful error handling around these cases. This guide does not include exhaustive error handling, real-time subscriptions, re-querying of outdated records, or attempts to retry failed operations. However, these are all important considerations for a production-level application.

Complete examples

import { useState } from "react"; import { API, Storage } from "aws-amplify"; import { Authenticator } from "@aws-amplify/ui-react"; import "@aws-amplify/ui-react/styles.css"; import { GraphQLQuery } from "@aws-amplify/api"; import * as queries from "./graphql/queries"; import * as mutations from "./graphql/mutations"; import { CreateSongInput, CreateSongMutation, DeleteSongInput, DeleteSongMutation, GetSongQuery, UpdateSongInput, UpdateSongMutation, } from "./API"; function App() { const [currentSong, setCurrentSong] = useState<any>(); // Used to display image for current song: const [currentImageUrl, setCurrentImageUrl] = useState< string | null | undefined >(""); // Private access level configuration on the Storage object: Storage.configure({ level: 'private' }); async function createSongWithImage(e: React.ChangeEvent<HTMLInputElement>) { if (!e.target.files) return; const file = e.target.files[0]; try { const createSongDetails: CreateSongInput = { name: `My first song`, }; // Create the API record: const response = await API.graphql<GraphQLQuery<CreateSongMutation>>({ query: mutations.createSong, variables: { input: createSongDetails }, }); const song = response?.data?.createSong; if (!song) return; // Upload the Storage file: const result = await Storage.put(`${song.id}-${file.name}`, file, { contentType: "image/png", // contentType is optional }); const updateSongDetails: UpdateSongInput = { id: song.id, coverArtKey: result?.key, }; // Add the file association to the record: const updateResponse = await API.graphql< GraphQLQuery<UpdateSongMutation> >({ query: mutations.updateSong, variables: { input: updateSongDetails }, }); const updatedSong = updateResponse?.data?.updateSong; setCurrentSong(updatedSong); // If the record has no associated file, we can return early. if (!updatedSong?.coverArtKey) return; // Retrieve the file's signed URL: const signedURL = await Storage.get(updatedSong.coverArtKey); setCurrentImageUrl(signedURL); } catch (error) { console.error("Error create song / file:", error); } } // Upload image, add to song, retrieve signed URL and retrieve the image. // Also updates image if one already exists. async function addNewImageToSong(e: React.ChangeEvent<HTMLInputElement>) { if (!currentSong) return; if (!e.target.files) return; const file = e.target.files[0]; try { // Upload the Storage file: const result = await Storage.put(`${currentSong.id}-${file.name}`, file, { contentType: "image/png", // contentType is optional }); const updateSongDetails: UpdateSongInput = { id: currentSong.id, coverArtKey: result?.key, }; // Add the file association to the record: const response = await API.graphql<GraphQLQuery<UpdateSongMutation>>({ query: mutations.updateSong, variables: { input: updateSongDetails }, }); const updatedSong = response?.data?.updateSong; setCurrentSong(updatedSong); // If the record has no associated file, we can return early. if (!updatedSong?.coverArtKey) return; // Retrieve the file's signed URL: const signedURL = await Storage.get(updatedSong.coverArtKey); setCurrentImageUrl(signedURL); } catch (error) { console.error("Error uploading image / adding image to song: ", error); } } async function getImageForCurrentSong() { try { // Query the record to get the file key: const response = await API.graphql<GraphQLQuery<GetSongQuery>>({ query: queries.getSong, variables: { id: currentSong.id }, }); const song = response.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; // Retrieve the signed URL: const signedURL = await Storage.get(song.coverArtKey); setCurrentImageUrl(signedURL); } catch (error) { console.error("Error getting song / image:", error); } } // Remove the file association, continue to persist both file and record async function removeImageFromSong() { if (!currentSong) return; try { const response = await API.graphql<GraphQLQuery<GetSongQuery>>({ query: queries.getSong, variables: { id: currentSong.id }, }); const song = response?.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; const songDetails: UpdateSongInput = { id: song.id, coverArtKey: null, }; const updatedSong = await API.graphql<GraphQLQuery<UpdateSongMutation>>({ query: mutations.updateSong, variables: { input: songDetails }, }); // If successful, the response here will be `null`: setCurrentSong(updatedSong?.data?.updateSong); setCurrentImageUrl(updatedSong?.data?.updateSong?.coverArtKey); } catch (error) { console.error("Error removing image from song: ", error); } } // Remove the record association and delete the file async function deleteImageForCurrentSong() { if (!currentSong) return; try { const response = await API.graphql<GraphQLQuery<GetSongQuery>>({ query: queries.getSong, variables: { id: currentSong.id }, }); const song = response?.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; const songDetails: UpdateSongInput = { id: song.id, coverArtKey: null, // Set the file association to `null` }; // Remove associated file from record const updatedSong = await API.graphql<GraphQLQuery<UpdateSongMutation>>({ query: mutations.updateSong, variables: { input: songDetails }, }); // Delete the file from S3: await Storage.remove(song.coverArtKey); // If successful, the response here will be `null`: setCurrentSong(updatedSong?.data?.updateSong); setCurrentImageUrl(updatedSong?.data?.updateSong?.coverArtKey); } catch (error) { console.error("Error deleting image: ", error); } } // Delete both file and record async function deleteCurrentSongAndImage() { if (!currentSong) return; try { const response = await API.graphql<GraphQLQuery<GetSongQuery>>({ query: queries.getSong, variables: { id: currentSong.id }, }); const song = response?.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; await Storage.remove(song.coverArtKey); const songDetails: DeleteSongInput = { id: song.id, }; await API.graphql<GraphQLQuery<DeleteSongMutation>>({ query: mutations.deleteSong, variables: { input: songDetails }, }); clearLocalState(); } catch (error) { console.error("Error deleting song: ", error); } } function clearLocalState() { setCurrentSong(null); setCurrentImageUrl(""); } return ( <Authenticator> {({ signOut, user }) => ( <main style={{ alignItems: "center", display: "flex", flexDirection: "column", }} > <h1>Hello {user?.username}!</h1> <h2>{`Current Song: ${currentSong?.id}`}</h2> <label> Create song with file: <input id="name" type="file" onChange={createSongWithImage} /> </label> <label> Add / update song image: <input id="name" type="file" onChange={addNewImageToSong} disabled={!currentSong} /> </label> <button onClick={getImageForCurrentSong} disabled={!currentSong || !currentImageUrl} > Get image for current song </button> <button onClick={removeImageFromSong} disabled={!currentSong || !currentImageUrl} > Remove image from current song (does not delete image) </button> <button onClick={deleteImageForCurrentSong} disabled={!currentSong || !currentImageUrl} > Remove image from current song, then delete image </button> <button onClick={deleteCurrentSongAndImage} disabled={!currentSong}> Delete current song (and image, if it exists) </button> <button onClick={signOut}>Sign out</button> {currentImageUrl && ( <img src={currentImageUrl} alt="Storage file"></img> )} </main> )} </Authenticator> ); } export default App;
1import { useState } from "react";
2import { API, Storage } from "aws-amplify";
3import { Authenticator } from "@aws-amplify/ui-react";
4import "@aws-amplify/ui-react/styles.css";
5import { GraphQLQuery } from "@aws-amplify/api";
6import * as queries from "./graphql/queries";
7import * as mutations from "./graphql/mutations";
8import {
9 CreateSongInput,
10 CreateSongMutation,
11 DeleteSongInput,
12 DeleteSongMutation,
13 GetSongQuery,
14 UpdateSongInput,
15 UpdateSongMutation,
16} from "./API";
17
18function App() {
19 const [currentSong, setCurrentSong] = useState<any>();
20
21 // Used to display image for current song:
22 const [currentImageUrl, setCurrentImageUrl] = useState<
23 string | null | undefined
24 >("");
25
26 // Private access level configuration on the Storage object:
27 Storage.configure({ level: 'private' });
28
29 async function createSongWithImage(e: React.ChangeEvent<HTMLInputElement>) {
30 if (!e.target.files) return;
31
32 const file = e.target.files[0];
33
34 try {
35 const createSongDetails: CreateSongInput = {
36 name: `My first song`,
37 };
38
39 // Create the API record:
40 const response = await API.graphql<GraphQLQuery<CreateSongMutation>>({
41 query: mutations.createSong,
42 variables: { input: createSongDetails },
43 });
44
45 const song = response?.data?.createSong;
46
47 if (!song) return;
48
49 // Upload the Storage file:
50 const result = await Storage.put(`${song.id}-${file.name}`, file, {
51 contentType: "image/png", // contentType is optional
52 });
53
54 const updateSongDetails: UpdateSongInput = {
55 id: song.id,
56 coverArtKey: result?.key,
57 };
58
59 // Add the file association to the record:
60 const updateResponse = await API.graphql<
61 GraphQLQuery<UpdateSongMutation>
62 >({
63 query: mutations.updateSong,
64 variables: { input: updateSongDetails },
65 });
66
67 const updatedSong = updateResponse?.data?.updateSong;
68
69 setCurrentSong(updatedSong);
70
71 // If the record has no associated file, we can return early.
72 if (!updatedSong?.coverArtKey) return;
73
74 // Retrieve the file's signed URL:
75 const signedURL = await Storage.get(updatedSong.coverArtKey);
76 setCurrentImageUrl(signedURL);
77 } catch (error) {
78 console.error("Error create song / file:", error);
79 }
80 }
81
82 // Upload image, add to song, retrieve signed URL and retrieve the image.
83 // Also updates image if one already exists.
84 async function addNewImageToSong(e: React.ChangeEvent<HTMLInputElement>) {
85 if (!currentSong) return;
86
87 if (!e.target.files) return;
88
89 const file = e.target.files[0];
90
91 try {
92 // Upload the Storage file:
93 const result = await Storage.put(`${currentSong.id}-${file.name}`, file, {
94 contentType: "image/png", // contentType is optional
95 });
96
97 const updateSongDetails: UpdateSongInput = {
98 id: currentSong.id,
99 coverArtKey: result?.key,
100 };
101
102 // Add the file association to the record:
103 const response = await API.graphql<GraphQLQuery<UpdateSongMutation>>({
104 query: mutations.updateSong,
105 variables: { input: updateSongDetails },
106 });
107
108 const updatedSong = response?.data?.updateSong;
109
110 setCurrentSong(updatedSong);
111
112 // If the record has no associated file, we can return early.
113 if (!updatedSong?.coverArtKey) return;
114
115 // Retrieve the file's signed URL:
116 const signedURL = await Storage.get(updatedSong.coverArtKey);
117 setCurrentImageUrl(signedURL);
118 } catch (error) {
119 console.error("Error uploading image / adding image to song: ", error);
120 }
121 }
122
123 async function getImageForCurrentSong() {
124 try {
125 // Query the record to get the file key:
126 const response = await API.graphql<GraphQLQuery<GetSongQuery>>({
127 query: queries.getSong,
128 variables: { id: currentSong.id },
129 });
130 const song = response.data?.getSong;
131
132 // If the record has no associated file, we can return early.
133 if (!song?.coverArtKey) return;
134
135 // Retrieve the signed URL:
136 const signedURL = await Storage.get(song.coverArtKey);
137
138 setCurrentImageUrl(signedURL);
139 } catch (error) {
140 console.error("Error getting song / image:", error);
141 }
142 }
143
144 // Remove the file association, continue to persist both file and record
145 async function removeImageFromSong() {
146 if (!currentSong) return;
147
148 try {
149 const response = await API.graphql<GraphQLQuery<GetSongQuery>>({
150 query: queries.getSong,
151 variables: { id: currentSong.id },
152 });
153
154 const song = response?.data?.getSong;
155
156 // If the record has no associated file, we can return early.
157 if (!song?.coverArtKey) return;
158
159 const songDetails: UpdateSongInput = {
160 id: song.id,
161 coverArtKey: null,
162 };
163
164 const updatedSong = await API.graphql<GraphQLQuery<UpdateSongMutation>>({
165 query: mutations.updateSong,
166 variables: { input: songDetails },
167 });
168
169 // If successful, the response here will be `null`:
170 setCurrentSong(updatedSong?.data?.updateSong);
171 setCurrentImageUrl(updatedSong?.data?.updateSong?.coverArtKey);
172 } catch (error) {
173 console.error("Error removing image from song: ", error);
174 }
175 }
176
177 // Remove the record association and delete the file
178 async function deleteImageForCurrentSong() {
179 if (!currentSong) return;
180
181 try {
182 const response = await API.graphql<GraphQLQuery<GetSongQuery>>({
183 query: queries.getSong,
184 variables: { id: currentSong.id },
185 });
186
187 const song = response?.data?.getSong;
188
189 // If the record has no associated file, we can return early.
190 if (!song?.coverArtKey) return;
191
192 const songDetails: UpdateSongInput = {
193 id: song.id,
194 coverArtKey: null, // Set the file association to `null`
195 };
196
197 // Remove associated file from record
198 const updatedSong = await API.graphql<GraphQLQuery<UpdateSongMutation>>({
199 query: mutations.updateSong,
200 variables: { input: songDetails },
201 });
202
203 // Delete the file from S3:
204 await Storage.remove(song.coverArtKey);
205
206 // If successful, the response here will be `null`:
207 setCurrentSong(updatedSong?.data?.updateSong);
208 setCurrentImageUrl(updatedSong?.data?.updateSong?.coverArtKey);
209 } catch (error) {
210 console.error("Error deleting image: ", error);
211 }
212 }
213
214 // Delete both file and record
215 async function deleteCurrentSongAndImage() {
216 if (!currentSong) return;
217
218 try {
219 const response = await API.graphql<GraphQLQuery<GetSongQuery>>({
220 query: queries.getSong,
221 variables: { id: currentSong.id },
222 });
223
224 const song = response?.data?.getSong;
225
226 // If the record has no associated file, we can return early.
227 if (!song?.coverArtKey) return;
228
229 await Storage.remove(song.coverArtKey);
230
231 const songDetails: DeleteSongInput = {
232 id: song.id,
233 };
234
235 await API.graphql<GraphQLQuery<DeleteSongMutation>>({
236 query: mutations.deleteSong,
237 variables: { input: songDetails },
238 });
239
240 clearLocalState();
241 } catch (error) {
242 console.error("Error deleting song: ", error);
243 }
244 }
245
246 function clearLocalState() {
247 setCurrentSong(null);
248 setCurrentImageUrl("");
249 }
250
251 return (
252 <Authenticator>
253 {({ signOut, user }) => (
254 <main
255 style={{
256 alignItems: "center",
257 display: "flex",
258 flexDirection: "column",
259 }}
260 >
261 <h1>Hello {user?.username}!</h1>
262 <h2>{`Current Song: ${currentSong?.id}`}</h2>
263 <label>
264 Create song with file:
265 <input id="name" type="file" onChange={createSongWithImage} />
266 </label>
267 <label>
268 Add / update song image:
269 <input
270 id="name"
271 type="file"
272 onChange={addNewImageToSong}
273 disabled={!currentSong}
274 />
275 </label>
276 <button
277 onClick={getImageForCurrentSong}
278 disabled={!currentSong || !currentImageUrl}
279 >
280 Get image for current song
281 </button>
282 <button
283 onClick={removeImageFromSong}
284 disabled={!currentSong || !currentImageUrl}
285 >
286 Remove image from current song (does not delete image)
287 </button>
288 <button
289 onClick={deleteImageForCurrentSong}
290 disabled={!currentSong || !currentImageUrl}
291 >
292 Remove image from current song, then delete image
293 </button>
294 <button onClick={deleteCurrentSongAndImage} disabled={!currentSong}>
295 Delete current song (and image, if it exists)
296 </button>
297 <button onClick={signOut}>Sign out</button>
298 {currentImageUrl && (
299 <img src={currentImageUrl} alt="Storage file"></img>
300 )}
301 </main>
302 )}
303 </Authenticator>
304 );
305}
306
307export default App;
import { useState } from 'react'; import { API, Storage } from 'aws-amplify'; import { Authenticator } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css'; import * as queries from './graphql/queries'; import * as mutations from './graphql/mutations'; function App() { const [currentSong, setCurrentSong] = useState(); // Used to display image for current song: const [currentImageUrl, setCurrentImageUrl] = useState(''); // Private access level configuration on the Storage object: Storage.configure({ level: 'private' }); async function createSongWithImage(e) { if (!e.target.files) return; const file = e.target.files[0]; try { const createSongDetails = { name: `My first song` }; // Create the API record: const response = await API.graphql({ query: mutations.createSong, variables: { input: createSongDetails } }); const song = response?.data?.createSong; if (!song) return; // Upload the Storage file: const result = await Storage.put(`${song.id}-${file.name}`, file, { contentType: 'image/png' // contentType is optional }); const updateSongDetails = { id: song.id, coverArtKey: result?.key }; // Add the file association to the record: const updateResponse = await API.graphql({ query: mutations.updateSong, variables: { input: updateSongDetails } }); const updatedSong = updateResponse?.data?.updateSong; setCurrentSong(updatedSong); // If the record has no associated file, we can return early. if (!updatedSong?.coverArtKey) return; // Retrieve the file's signed URL: const signedURL = await Storage.get(updatedSong.coverArtKey); setCurrentImageUrl(signedURL); } catch (error) { console.error('Error create song / file:', error); } } // Upload image, add to song, retrieve signed URL and retrieve the image. // Also updates image if one already exists. async function addNewImageToSong(e) { if (!currentSong) return; if (!e.target.files) return; const file = e.target.files[0]; try { // Upload the Storage file: const result = await Storage.put(`${currentSong.id}-${file.name}`, file, { contentType: 'image/png' // contentType is optional }); const updateSongDetails = { id: currentSong.id, coverArtKey: result?.key }; // Add the file association to the record: const response = await API.graphql({ query: mutations.updateSong, variables: { input: updateSongDetails } }); const updatedSong = response?.data?.updateSong; setCurrentSong(updatedSong); // If the record has no associated file, we can return early. if (!updatedSong?.coverArtKey) return; // Retrieve the file's signed URL: const signedURL = await Storage.get(updatedSong.coverArtKey); setCurrentImageUrl(signedURL); } catch (error) { console.error('Error uploading image / adding image to song: ', error); } } async function getImageForCurrentSong() { try { // Query the record to get the file key: const response = await API.graphql({ query: queries.getSong, variables: { id: currentSong.id } }); const song = response.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; // Retrieve the signed URL: const signedURL = await Storage.get(song.coverArtKey); setCurrentImageUrl(signedURL); } catch (error) { console.error('Error getting song / image:', error); } } // Remove the file association, continue to persist both file and record async function removeImageFromSong() { if (!currentSong) return; try { const response = await API.graphql({ query: queries.getSong, variables: { id: currentSong.id } }); const song = response?.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; const songDetails = { id: song.id, coverArtKey: null }; const updatedSong = await API.graphql({ query: mutations.updateSong, variables: { input: songDetails } }); // If successful, the response here will be `null`: setCurrentSong(updatedSong?.data?.updateSong); setCurrentImageUrl(updatedSong?.data?.updateSong?.coverArtKey); } catch (error) { console.error('Error removing image from song: ', error); } } // Remove the record association and delete the file async function deleteImageForCurrentSong() { if (!currentSong) return; try { const response = await API.graphql({ query: queries.getSong, variables: { id: currentSong.id } }); const song = response?.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; const songDetails = { id: song.id, coverArtKey: null // Set the file association to `null` }; // Remove associated file from record const updatedSong = await API.graphql({ query: mutations.updateSong, variables: { input: songDetails } }); // Delete the file from S3: await Storage.remove(song.coverArtKey); // If successful, the response here will be `null`: setCurrentSong(updatedSong?.data?.updateSong); setCurrentImageUrl(updatedSong?.data?.updateSong?.coverArtKey); } catch (error) { console.error('Error deleting image: ', error); } } // Delete both file and record async function deleteCurrentSongAndImage() { if (!currentSong) return; try { const response = await API.graphql({ query: queries.getSong, variables: { id: currentSong.id } }); const song = response?.data?.getSong; // If the record has no associated file, we can return early. if (!song?.coverArtKey) return; await Storage.remove(song.coverArtKey); const songDetails = { id: song.id }; await API.graphql({ query: mutations.deleteSong, variables: { input: songDetails } }); clearLocalState(); } catch (error) { console.error('Error deleting song: ', error); } } function clearLocalState() { setCurrentSong(null); setCurrentImageUrl(''); } return ( <Authenticator> {({ signOut, user }) => ( <main style={{ alignItems: 'center', display: 'flex', flexDirection: 'column' }} > <h1>Hello {user?.username}!</h1> <h2>{`Current Song: ${currentSong?.id}`}</h2> <label> Create song with file: <input id="name" type="file" onChange={createSongWithImage} /> </label> <label> Add / update song image: <input id="name" type="file" onChange={addNewImageToSong} disabled={!currentSong} /> </label> <button onClick={getImageForCurrentSong} disabled={!currentSong || !currentImageUrl} > Get image for current song </button> <button onClick={removeImageFromSong} disabled={!currentSong || !currentImageUrl} > Remove image from current song (does not delete image) </button> <button onClick={deleteImageForCurrentSong} disabled={!currentSong || !currentImageUrl} > Remove image from current song, then delete image </button> <button onClick={deleteCurrentSongAndImage} disabled={!currentSong}> Delete current song (and image, if it exists) </button> <button onClick={signOut}>Sign out</button> {currentImageUrl && ( <img src={currentImageUrl} alt="Storage file"></img> )} </main> )} </Authenticator> ); } export default App;
1import { useState } from 'react';
2import { API, Storage } from 'aws-amplify';
3import { Authenticator } from '@aws-amplify/ui-react';
4import '@aws-amplify/ui-react/styles.css';
5import * as queries from './graphql/queries';
6import * as mutations from './graphql/mutations';
7
8function App() {
9 const [currentSong, setCurrentSong] = useState();
10
11 // Used to display image for current song:
12 const [currentImageUrl, setCurrentImageUrl] = useState('');
13
14 // Private access level configuration on the Storage object:
15 Storage.configure({ level: 'private' });
16
17 async function createSongWithImage(e) {
18 if (!e.target.files) return;
19
20 const file = e.target.files[0];
21
22 try {
23 const createSongDetails = {
24 name: `My first song`
25 };
26
27 // Create the API record:
28 const response = await API.graphql({
29 query: mutations.createSong,
30 variables: { input: createSongDetails }
31 });
32
33 const song = response?.data?.createSong;
34
35 if (!song) return;
36
37 // Upload the Storage file:
38 const result = await Storage.put(`${song.id}-${file.name}`, file, {
39 contentType: 'image/png' // contentType is optional
40 });
41
42 const updateSongDetails = {
43 id: song.id,
44 coverArtKey: result?.key
45 };
46
47 // Add the file association to the record:
48 const updateResponse = await API.graphql({
49 query: mutations.updateSong,
50 variables: { input: updateSongDetails }
51 });
52
53 const updatedSong = updateResponse?.data?.updateSong;
54
55 setCurrentSong(updatedSong);
56
57 // If the record has no associated file, we can return early.
58 if (!updatedSong?.coverArtKey) return;
59
60 // Retrieve the file's signed URL:
61 const signedURL = await Storage.get(updatedSong.coverArtKey);
62 setCurrentImageUrl(signedURL);
63 } catch (error) {
64 console.error('Error create song / file:', error);
65 }
66 }
67
68 // Upload image, add to song, retrieve signed URL and retrieve the image.
69 // Also updates image if one already exists.
70 async function addNewImageToSong(e) {
71 if (!currentSong) return;
72
73 if (!e.target.files) return;
74
75 const file = e.target.files[0];
76
77 try {
78 // Upload the Storage file:
79 const result = await Storage.put(`${currentSong.id}-${file.name}`, file, {
80 contentType: 'image/png' // contentType is optional
81 });
82
83 const updateSongDetails = {
84 id: currentSong.id,
85 coverArtKey: result?.key
86 };
87
88 // Add the file association to the record:
89 const response = await API.graphql({
90 query: mutations.updateSong,
91 variables: { input: updateSongDetails }
92 });
93
94 const updatedSong = response?.data?.updateSong;
95
96 setCurrentSong(updatedSong);
97
98 // If the record has no associated file, we can return early.
99 if (!updatedSong?.coverArtKey) return;
100
101 // Retrieve the file's signed URL:
102 const signedURL = await Storage.get(updatedSong.coverArtKey);
103 setCurrentImageUrl(signedURL);
104 } catch (error) {
105 console.error('Error uploading image / adding image to song: ', error);
106 }
107 }
108
109 async function getImageForCurrentSong() {
110 try {
111 // Query the record to get the file key:
112 const response = await API.graphql({
113 query: queries.getSong,
114 variables: { id: currentSong.id }
115 });
116 const song = response.data?.getSong;
117
118 // If the record has no associated file, we can return early.
119 if (!song?.coverArtKey) return;
120
121 // Retrieve the signed URL:
122 const signedURL = await Storage.get(song.coverArtKey);
123
124 setCurrentImageUrl(signedURL);
125 } catch (error) {
126 console.error('Error getting song / image:', error);
127 }
128 }
129
130 // Remove the file association, continue to persist both file and record
131 async function removeImageFromSong() {
132 if (!currentSong) return;
133
134 try {
135 const response = await API.graphql({
136 query: queries.getSong,
137 variables: { id: currentSong.id }
138 });
139
140 const song = response?.data?.getSong;
141
142 // If the record has no associated file, we can return early.
143 if (!song?.coverArtKey) return;
144
145 const songDetails = {
146 id: song.id,
147 coverArtKey: null
148 };
149
150 const updatedSong = await API.graphql({
151 query: mutations.updateSong,
152 variables: { input: songDetails }
153 });
154
155 // If successful, the response here will be `null`:
156 setCurrentSong(updatedSong?.data?.updateSong);
157 setCurrentImageUrl(updatedSong?.data?.updateSong?.coverArtKey);
158 } catch (error) {
159 console.error('Error removing image from song: ', error);
160 }
161 }
162
163 // Remove the record association and delete the file
164 async function deleteImageForCurrentSong() {
165 if (!currentSong) return;
166
167 try {
168 const response = await API.graphql({
169 query: queries.getSong,
170 variables: { id: currentSong.id }
171 });
172
173 const song = response?.data?.getSong;
174
175 // If the record has no associated file, we can return early.
176 if (!song?.coverArtKey) return;
177
178 const songDetails = {
179 id: song.id,
180 coverArtKey: null // Set the file association to `null`
181 };
182
183 // Remove associated file from record
184 const updatedSong = await API.graphql({
185 query: mutations.updateSong,
186 variables: { input: songDetails }
187 });
188
189 // Delete the file from S3:
190 await Storage.remove(song.coverArtKey);
191
192 // If successful, the response here will be `null`:
193 setCurrentSong(updatedSong?.data?.updateSong);
194 setCurrentImageUrl(updatedSong?.data?.updateSong?.coverArtKey);
195 } catch (error) {
196 console.error('Error deleting image: ', error);
197 }
198 }
199
200 // Delete both file and record
201 async function deleteCurrentSongAndImage() {
202 if (!currentSong) return;
203
204 try {
205 const response = await API.graphql({
206 query: queries.getSong,
207 variables: { id: currentSong.id }
208 });
209
210 const song = response?.data?.getSong;
211
212 // If the record has no associated file, we can return early.
213 if (!song?.coverArtKey) return;
214
215 await Storage.remove(song.coverArtKey);
216
217 const songDetails = {
218 id: song.id
219 };
220
221 await API.graphql({
222 query: mutations.deleteSong,
223 variables: { input: songDetails }
224 });
225
226 clearLocalState();
227 } catch (error) {
228 console.error('Error deleting song: ', error);
229 }
230 }
231
232 function clearLocalState() {
233 setCurrentSong(null);
234 setCurrentImageUrl('');
235 }
236
237 return (
238 <Authenticator>
239 {({ signOut, user }) => (
240 <main
241 style={{
242 alignItems: 'center',
243 display: 'flex',
244 flexDirection: 'column'
245 }}
246 >
247 <h1>Hello {user?.username}!</h1>
248 <h2>{`Current Song: ${currentSong?.id}`}</h2>
249 <label>
250 Create song with file:
251 <input id="name" type="file" onChange={createSongWithImage} />
252 </label>
253 <label>
254 Add / update song image:
255 <input
256 id="name"
257 type="file"
258 onChange={addNewImageToSong}
259 disabled={!currentSong}
260 />
261 </label>
262 <button
263 onClick={getImageForCurrentSong}
264 disabled={!currentSong || !currentImageUrl}
265 >
266 Get image for current song
267 </button>
268 <button
269 onClick={removeImageFromSong}
270 disabled={!currentSong || !currentImageUrl}
271 >
272 Remove image from current song (does not delete image)
273 </button>
274 <button
275 onClick={deleteImageForCurrentSong}
276 disabled={!currentSong || !currentImageUrl}
277 >
278 Remove image from current song, then delete image
279 </button>
280 <button onClick={deleteCurrentSongAndImage} disabled={!currentSong}>
281 Delete current song (and image, if it exists)
282 </button>
283 <button onClick={signOut}>Sign out</button>
284 {currentImageUrl && (
285 <img src={currentImageUrl} alt="Storage file"></img>
286 )}
287 </main>
288 )}
289 </Authenticator>
290 );
291}
292
293export default App;
import { useState } from "react"; import { API, Storage } from "aws-amplify"; import { Authenticator } from "@aws-amplify/ui-react"; import "@aws-amplify/ui-react/styles.css"; import { GraphQLQuery } from "@aws-amplify/api"; import * as queries from "./graphql/queries"; import * as mutations from "./graphql/mutations"; import { CreatePhotoAlbumInput, CreatePhotoAlbumMutation, DeletePhotoAlbumInput, DeletePhotoAlbumMutation, GetPhotoAlbumQuery, ListPhotoAlbumsQuery, UpdatePhotoAlbumInput, UpdatePhotoAlbumMutation, } from "./API"; function App() { const [currentPhotoAlbum, setCurrentPhotoAlbum] = useState<any>(); // Used to display images for current photoAlbum: const [currentImages, setCurrentImages] = useState< (string | null | undefined)[] | null | undefined >([]); // Private access level configuration on the Storage object: Storage.configure({ level: 'private' }); async function createPhotoAlbumWithFirstImage( e: React.ChangeEvent<HTMLInputElement> ) { if (!e.target.files) return; const file = e.target.files[0]; try { const photoAlbumDetails: CreatePhotoAlbumInput = { name: `My first photoAlbum`, }; // Create the API record: const response = await API.graphql< GraphQLQuery<CreatePhotoAlbumMutation> >({ query: mutations.createPhotoAlbum, variables: { input: photoAlbumDetails }, }); const photoAlbum = response?.data?.createPhotoAlbum; if (!photoAlbum) return; // Upload the Storage file: const result = await Storage.put(`${photoAlbum.id}-${file.name}`, file, { contentType: "image/png", // contentType is optional }); const updatePhotoAlbumDetails: UpdatePhotoAlbumInput = { id: photoAlbum.id, imageKeys: [result?.key], }; // Add the file association to the record: const updateResponse = await API.graphql< GraphQLQuery<UpdatePhotoAlbumMutation> >({ query: mutations.updatePhotoAlbum, variables: { input: updatePhotoAlbumDetails }, }); const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum; setCurrentPhotoAlbum(updatedPhotoAlbum); // If the record has no associated file, we can return early. if (!updatedPhotoAlbum?.imageKeys?.length) return; // Retrieve the file's signed URL: const signedURL = await Storage.get(updatedPhotoAlbum.imageKeys[0]!); setCurrentImages([signedURL]); } catch (error) { console.error("Error create photoAlbum / file:", error); } } async function createPhotoAlbumWithMultipleImages( e: React.ChangeEvent<HTMLInputElement> ) { if (!e.target.files) return; try { const photoAlbumDetails: CreatePhotoAlbumInput = { name: `My first photoAlbum`, }; // Create the API record: const response = await API.graphql< GraphQLQuery<CreatePhotoAlbumMutation> >({ query: mutations.createPhotoAlbum, variables: { input: photoAlbumDetails }, }); const photoAlbum = response?.data?.createPhotoAlbum; if (!photoAlbum) return; // Upload all files to Storage: const imageKeys = await Promise.all( Array.from(e.target.files).map(async (file) => { const result = await Storage.put( `${photoAlbum.id}-${file.name}`, file, { contentType: "image/png", // contentType is optional } ); return result?.key; }) ); const updatePhotoAlbumDetails: UpdatePhotoAlbumInput = { id: photoAlbum.id, imageKeys: imageKeys, }; // Add the file association to the record: const updateResponse = await API.graphql< GraphQLQuery<UpdatePhotoAlbumMutation> >({ query: mutations.updatePhotoAlbum, variables: { input: updatePhotoAlbumDetails }, }); const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum; setCurrentPhotoAlbum(updatedPhotoAlbum); // If the record has no associated file, we can return early. if (!updatedPhotoAlbum?.imageKeys?.length) return; // Retrieve signed urls for all files: const signedUrls = await Promise.all( updatedPhotoAlbum.imageKeys.map(async (key) => await Storage.get(key!)) ); if (!signedUrls) return; setCurrentImages(signedUrls); } catch (error) { console.error("Error create photoAlbum / file:", error); } } async function addNewImagesToPhotoAlbum( e: React.ChangeEvent<HTMLInputElement> ) { if (!currentPhotoAlbum) return; if (!e.target.files) return; try { // Upload all files to Storage: const newImageKeys = await Promise.all( Array.from(e.target.files).map(async (file) => { const result = await Storage.put( `${currentPhotoAlbum.id}-${file.name}`, file, { contentType: "image/png", // contentType is optional } ); return result?.key; }) ); // Query existing record to retrieve currently associated files: const queriedResponse = await API.graphql< GraphQLQuery<GetPhotoAlbumQuery> >({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id }, }); const photoAlbum = queriedResponse.data?.getPhotoAlbum; if (!photoAlbum?.imageKeys) return; // Merge existing and new file keys: const updatedImageKeys = [...newImageKeys, ...photoAlbum.imageKeys]; const photoAlbumDetails: UpdatePhotoAlbumInput = { id: currentPhotoAlbum.id, imageKeys: updatedImageKeys, }; // Update record with merged file associations: const response = await API.graphql< GraphQLQuery<UpdatePhotoAlbumMutation> >({ query: mutations.updatePhotoAlbum, variables: { input: photoAlbumDetails }, }); const updatedPhotoAlbum = response?.data?.updatePhotoAlbum; setCurrentPhotoAlbum(updatedPhotoAlbum); // If the record has no associated file, we can return early. if (!updatedPhotoAlbum?.imageKeys) return; // Retrieve signed urls for merged image keys: const signedUrls = await Promise.all( updatedPhotoAlbum?.imageKeys.map(async (key) => await Storage.get(key!)) ); if (!signedUrls) return; setCurrentImages(signedUrls); } catch (error) { console.error( "Error uploading image / adding image to photoAlbum: ", error ); } } // Replace last image associated with current photoAlbum: async function updateLastImage(e: React.ChangeEvent<HTMLInputElement>) { if (!currentPhotoAlbum) return; if (!e.target.files) return; const file = e.target.files[0]; try { // Upload new file to Storage: const result = await Storage.put( `${currentPhotoAlbum.id}-${file.name}`, file, { contentType: "image/png", // contentType is optional } ); const newFileKey = result?.key; // Query existing record to retrieve currently associated files: const queriedResponse = await API.graphql< GraphQLQuery<GetPhotoAlbumQuery> >({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id }, }); const photoAlbum = queriedResponse.data?.getPhotoAlbum; if (!photoAlbum?.imageKeys?.length) return; // Retrieve last image key: const [lastImageKey] = photoAlbum.imageKeys.slice(-1); // Remove last file association by key const updatedImageKeys = [ ...photoAlbum.imageKeys.filter((key) => key !== lastImageKey), newFileKey, ]; const photoAlbumDetails: UpdatePhotoAlbumInput = { id: currentPhotoAlbum.id, // @ts-ignore imageKeys: updatedImageKeys, }; // Update record with updated file associations: const response = await API.graphql< GraphQLQuery<UpdatePhotoAlbumMutation> >({ query: mutations.updatePhotoAlbum, variables: { input: photoAlbumDetails }, }); const updatedPhotoAlbum = response?.data?.updatePhotoAlbum; setCurrentPhotoAlbum(updatedPhotoAlbum); // If the record has no associated file, we can return early. if (!updatedPhotoAlbum?.imageKeys) return; // Retrieve signed urls for merged image keys: const signedUrls = await Promise.all( updatedPhotoAlbum?.imageKeys.map(async (key) => await Storage.get(key!)) ); if (!signedUrls) return; setCurrentImages(signedUrls); } catch (error) { console.error( "Error uploading image / adding image to photoAlbum: ", error ); } } async function getImagesForPhotoAlbum() { try { // Query the record to get the file keys: const response = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id }, }); const photoAlbum = response.data?.getPhotoAlbum; // If the record has no associated files, we can return early. if (!photoAlbum?.imageKeys) return; // Retrieve the signed URLs for the associated images: const signedUrls = await Promise.all( photoAlbum.imageKeys.map(async (imageKey) => { if (!imageKey) return; return await Storage.get(imageKey); }) ); setCurrentImages(signedUrls); } catch (error) { console.error("Error getting photoAlbum / image:", error); } } // Remove the file associations, continue to persist both files and record async function removeImagesFromPhotoAlbum() { if (!currentPhotoAlbum) return; try { const response = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id }, }); const photoAlbum = response?.data?.getPhotoAlbum; // If the record has no associated file, we can return early. if (!photoAlbum?.imageKeys) return; const photoAlbumDetails: UpdatePhotoAlbumInput = { id: photoAlbum.id, imageKeys: null, }; const updatedPhotoAlbum = await API.graphql< GraphQLQuery<UpdatePhotoAlbumMutation> >({ query: mutations.updatePhotoAlbum, variables: { input: photoAlbumDetails }, }); // If successful, the response here will be `null`: setCurrentPhotoAlbum(updatedPhotoAlbum?.data?.updatePhotoAlbum); setCurrentImages(updatedPhotoAlbum?.data?.updatePhotoAlbum?.imageKeys); } catch (error) { console.error("Error removing image from photoAlbum: ", error); } } // Remove the record association and delete the file async function deleteImagesForCurrentPhotoAlbum() { if (!currentPhotoAlbum) return; try { const response = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id }, }); const photoAlbum = response?.data?.getPhotoAlbum; // If the record has no associated files, we can return early. if (!photoAlbum?.imageKeys) return; const photoAlbumDetails: UpdatePhotoAlbumInput = { id: photoAlbum.id, imageKeys: null, // Set the file association to `null` }; // Remove associated files from record const updateResponse = await API.graphql< GraphQLQuery<UpdatePhotoAlbumMutation> >({ query: mutations.updatePhotoAlbum, variables: { input: photoAlbumDetails }, }); const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum; // Delete the files from S3: await Promise.all( photoAlbum?.imageKeys.map(async (imageKey) => { if (!imageKey) return; await Storage.remove(imageKey); }) ); // If successful, the response here will be `null`: setCurrentPhotoAlbum(updatedPhotoAlbum); setCurrentImages(null); } catch (error) { console.error("Error deleting image: ", error); } } // Delete both files and record async function deleteCurrentPhotoAlbumAndImages() { if (!currentPhotoAlbum) return; try { const response = await API.graphql<GraphQLQuery<GetPhotoAlbumQuery>>({ query: queries.getPhotoAlbum, variables: { id: currentPhotoAlbum.id }, }); const photoAlbum = response?.data?.getPhotoAlbum; if (!photoAlbum) return; const photoAlbumDetails: DeletePhotoAlbumInput = { id: photoAlbum.id, }; await API.graphql<GraphQLQuery<DeletePhotoAlbumMutation>>({ query: mutations.deletePhotoAlbum, variables: { input: photoAlbumDetails }, }); setCurrentPhotoAlbum(null); // If the record has no associated file, we can return early. if (!photoAlbum?.imageKeys) return; await Promise.all( photoAlbum?.imageKeys.map(async (imageKey) => { if (!imageKey) return; await Storage.remove(imageKey); }) ); clearLocalState(); } catch (error) { console.error("Error deleting photoAlbum: ", error); } } function clearLocalState() { setCurrentPhotoAlbum(null); setCurrentImages([]); } return ( <Authenticator> {({ signOut, user }) => ( <main style={{ alignItems: "center", display: "flex", flexDirection: "column", }} > <h1>Hello {user?.username}!</h1> <h2>{`Current PhotoAlbum: ${currentPhotoAlbum?.id}`}</h2> <label> Create photoAlbum with one file: <input type="file" accept="image/*" onChange={createPhotoAlbumWithFirstImage} /> </label> <label> Create photoAlbum with multiple files: <input type="file" accept="image/*" onChange={createPhotoAlbumWithMultipleImages} multiple /> </label> <label> Add multiple images to current photoAlbum: <input type="file" accept="image/*" onChange={addNewImagesToPhotoAlbum} disabled={!currentPhotoAlbum} multiple /> </label> <label> Replace last image: <input type="file" accept="image/*" onChange={updateLastImage} disabled={!currentPhotoAlbum || !currentImages} /> </label> <button onClick={getImagesForPhotoAlbum} disabled={!currentPhotoAlbum || !currentImages} > Get Images for Current Photo Album </button> <button onClick={removeImagesFromPhotoAlbum} disabled={!currentPhotoAlbum || !currentImages} > Remove images from current PhotoAlbum (does not delete images) </button> <button onClick={deleteImagesForCurrentPhotoAlbum} disabled={!currentPhotoAlbum || !currentImages} > Remove images from current PhotoAlbum, then delete images </button> <button onClick={deleteCurrentPhotoAlbumAndImages} disabled={!currentPhotoAlbum} > Delete current PhotoAlbum (and images, if they exist) </button> <button onClick={signOut}>Sign out</button> {currentImages && currentImages.map((url, idx) => { if (!url) return undefined; return <img src={url} key={idx} alt="Storage file"></img>; })} </main> )} </Authenticator> ); } export default App;
1import { useState } from "react";
2import { API, Storage } from "aws-amplify";
3import { Authenticator } from "@aws-amplify/ui-react";
4import "@aws-amplify/ui-react/styles.css";
5import { GraphQLQuery } from "@aws-amplify/api";
6import * as queries from "./graphql/queries";
7import * as mutations from "./graphql/mutations";
8import {
9 CreatePhotoAlbumInput,
10 CreatePhotoAlbumMutation,
11 DeletePhotoAlbumInput,
12 DeletePhotoAlbumMutation,
13 GetPhotoAlbumQuery,
14 ListPhotoAlbumsQuery,
15 UpdatePhotoAlbumInput,
16 UpdatePhotoAlbumMutation,
17} from "./API";
18
19function App() {
20 const [currentPhotoAlbum, setCurrentPhotoAlbum] = useState<any>();
21
22 // Used to display images for current photoAlbum:
23 const [currentImages, setCurrentImages] = useState<
24 (string | null | undefined)[] | null | undefined
25 >([]);
26
27 // Private access level configuration on the Storage object:
28 Storage.configure({ level: 'private' });
29
30 async function createPhotoAlbumWithFirstImage(
31 e: React.ChangeEvent<HTMLInputElement>
32 ) {
33 if (!e.target.files) return;
34
35 const file = e.target.files[0];
36
37 try {
38 const photoAlbumDetails: CreatePhotoAlbumInput = {
39 name: `My first photoAlbum`,
40 };
41
42 // Create the API record:
43 const response = await API.graphql<
44 GraphQLQuery<CreatePhotoAlbumMutation>
45 >({
46 query: mutations.createPhotoAlbum,
47 variables: { input: photoAlbumDetails },
48 });
49
50 const photoAlbum = response?.data?.createPhotoAlbum;
51
52 if (!photoAlbum) return;
53
54 // Upload the Storage file:
55 const result = await Storage.put(`${photoAlbum.id}-${file.name}`, file, {
56 contentType: "image/png", // contentType is optional
57 });
58
59 const updatePhotoAlbumDetails: UpdatePhotoAlbumInput = {
60 id: photoAlbum.id,
61 imageKeys: [result?.key],
62 };
63
64 // Add the file association to the record:
65 const updateResponse = await API.graphql<
66 GraphQLQuery<UpdatePhotoAlbumMutation>
67 >({
68 query: mutations.updatePhotoAlbum,
69 variables: { input: updatePhotoAlbumDetails },
70 });
71
72 const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum;
73
74 setCurrentPhotoAlbum(updatedPhotoAlbum);
75
76 // If the record has no associated file, we can return early.
77 if (!updatedPhotoAlbum?.imageKeys?.length) return;
78
79 // Retrieve the file's signed URL:
80 const signedURL = await Storage.get(updatedPhotoAlbum.imageKeys[0]!);
81 setCurrentImages([signedURL]);
82 } catch (error) {
83 console.error("Error create photoAlbum / file:", error);
84 }
85 }
86
87 async function createPhotoAlbumWithMultipleImages(
88 e: React.ChangeEvent<HTMLInputElement>
89 ) {
90 if (!e.target.files) return;
91
92 try {
93 const photoAlbumDetails: CreatePhotoAlbumInput = {
94 name: `My first photoAlbum`,
95 };
96
97 // Create the API record:
98 const response = await API.graphql<
99 GraphQLQuery<CreatePhotoAlbumMutation>
100 >({
101 query: mutations.createPhotoAlbum,
102 variables: { input: photoAlbumDetails },
103 });
104
105 const photoAlbum = response?.data?.createPhotoAlbum;
106
107 if (!photoAlbum) return;
108
109 // Upload all files to Storage:
110 const imageKeys = await Promise.all(
111 Array.from(e.target.files).map(async (file) => {
112 const result = await Storage.put(
113 `${photoAlbum.id}-${file.name}`,
114 file,
115 {
116 contentType: "image/png", // contentType is optional
117 }
118 );
119
120 return result?.key;
121 })
122 );
123
124 const updatePhotoAlbumDetails: UpdatePhotoAlbumInput = {
125 id: photoAlbum.id,
126 imageKeys: imageKeys,
127 };
128
129 // Add the file association to the record:
130 const updateResponse = await API.graphql<
131 GraphQLQuery<UpdatePhotoAlbumMutation>
132 >({
133 query: mutations.updatePhotoAlbum,
134 variables: { input: updatePhotoAlbumDetails },
135 });
136
137 const updatedPhotoAlbum = updateResponse?.data?.updatePhotoAlbum;
138
139 setCurrentPhotoAlbum(updatedPhotoAlbum);
140
141 // If the record has no associated file, we can return early.
142 if (!updatedPhotoAlbum?.imageKeys?.length) return;
143
144 // Retrieve signed urls for all files:
145 const signedUrls = await Promise.all(
146 updatedPhotoAlbum.imageKeys.map(async (key) => await Storage.get(key!))
147 );
148
149 if (!signedUrls) return;
150 setCurrentImages(signedUrls);
151 } catch (error) {
152 console.error("Error create photoAlbum / file:", error);
153 }
154 }
155
156 async function addNewImagesToPhotoAlbum(
157 e: React.ChangeEvent<HTMLInputElement>
158 ) {
159 if (!currentPhotoAlbum) return;
160
161 if (!e.target.files) return;
162
163 try {
164 // Upload all files to Storage:
165 const newImageKeys = await Promise.all(
166 Array.from(e.target.files).map(async (file) => {
167 const result = await Storage.put(
168 `${currentPhotoAlbum.id}-${file.name}`,
169 file,
170 {
171 contentType: "image/png", // contentType is optional
172 }
173 );
174
175 return result?.key;
176 })
177 );
178
179 // Query existing record to retrieve currently associated files:
180 const queriedResponse = await API.graphql<
181 GraphQLQuery<GetPhotoAlbumQuery>
182 >({
183 query: queries.getPhotoAlbum,
184 variables: { id: currentPhotoAlbum.id },
185 });
186
187 const photoAlbum = queriedResponse.data?.getPhotoAlbum;
188
189 if (!photoAlbum?.imageKeys) return;
190
191 // Merge existing and new file keys:
192 const updatedImageKeys = [...newImageKeys, ...photoAlbum.imageKeys];
193