Working with files / attachments

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

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}

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

1import { generateClient } from 'aws-amplify/api';
2import { uploadData, getUrl } from 'aws-amplify/storage';
3
4const client = generateClient();
5
6const createSongDetails = {
7  name: `My first song`
8};
9
10// Create the API record:
11const response = await client.graphql({
12  query: mutations.createSong,
13  variables: { input: createSongDetails }
14});
15
16const song = response.data.createSong;
17
18if (!song) return;
19
20// Upload the Storage file:
21const result = await uploadData({
22  key: `${song.id}-${file.name}`,
23  data: file,
24  options: {
25    contentType: 'image/png' // contentType is optional
26  }
27}).result;
28
29const updateSongDetails = {
30  id: song.id,
31  coverArtKey: result?.key
32};
33
34// Add the file association to the record:
35const updateResponse = await client.graphql({
36  query: mutations.updateSong,
37  variables: { input: updateSongDetails }
38});
39
40const updatedSong = updateResponse.data.updateSong;
41
42// If the record has no associated file, we can return early.
43if (!updatedSong.coverArtKey) return;
44
45// Retrieve the file's signed URL:
46const signedURL = await getUrl({ key: updatedSong.coverArtKey });

1import { generateClient } from 'aws-amplify/api';
2import { uploadData, getUrl } from 'aws-amplify/storage';
3
4const client = generateClient();
5// Upload the Storage file:
6const result = await uploadData({
7  key: `${currentSong.id}-${file.name}`,
8  data: file,
9  options: {
10    contentType: 'image/png' // contentType is optional
11  }
12}).result;
13
14const updateSongDetails = {
15  id: currentSong.id,
16  coverArtKey: result?.key
17};
18
19// Add the file association to the record:
20const response = await client.graphql({
21  query: mutations.updateSong,
22  variables: { input: updateSongDetails }
23});
24
25const updatedSong = response.data.updateSong;
26
27// If the record has no associated file, we can return early.
28if (!updatedSong?.coverArtKey) return;
29
30// Retrieve the file's signed URL:
31const signedURL = await getUrl({ key: updatedSong.coverArtKey });

1import { generateClient } from 'aws-amplify/api';
2import { getUrl } from 'aws-amplify/storage';
3
4const client = generateClient();
5
6// Query the record to get the file key:
7const response = await client.graphql({
8  query: queries.getSong,
9  variables: { id: currentSong.id }
10});
11const song = response.data.getSong;
12
13// If the record has no associated file, we can return early.
14if (!song?.coverArtKey) return;
15
16// Retrieve the signed URL:
17const signedURL = await getUrl({ key: song.coverArtKey });

1import { generateClient } from 'aws-amplify/api';
2
3const client = generateClient();
4
5// Remove the file association, continue to persist both file and record
6const response = await client.graphql({
7  query: queries.getSong,
8  variables: { id: currentSong.id }
9});
10
11const song = response.data.getSong;
12
13// If the record has no associated file, we can return early.
14if (!song?.coverArtKey) return;
15
16const songDetails = {
17  id: song.id,
18  coverArtKey: null
19};
20
21const updatedSong = await client.graphql({
22  query: mutations.updateSong,
23  variables: { input: songDetails }
24});

1import { generateClient } from 'aws-amplify/api';
2import { remove } from 'aws-amplify/storage';
3
4const client = generateClient();
5
6// Remove the record association and delete the file
7const response = await client.graphql({
8  query: queries.getSong,
9  variables: { id: currentSong.id }
10});
11
12const song = response?.data?.getSong;
13
14// If the record has no associated file, we can return early.
15if (!song?.coverArtKey) return;
16
17const songDetails = {
18  id: song.id,
19  coverArtKey: null // Set the file association to `null`
20};
21
22// Remove associated file from record
23const updatedSong = await client.graphql({
24  query: mutations.updateSong,
25  variables: { input: songDetails }
26});
27
28// Delete the file from S3:
29await remove({ key: song.coverArtKey });

1import { generateClient } from 'aws-amplify/api';
2import { remove } from 'aws-amplify/storage';
3
4const client = generateClient();
5
6// Delete both file and record
7const response = await client.graphql({
8  query: queries.getSong,
9  variables: { id: currentSong.id }
10});
11
12const song = response.data.getSong;
13
14// If the record has no associated file, we can return early.
15if (!song?.coverArtKey) return;
16
17await remove({ key: song.coverArtKey });
18
19const songDetails = {
20  id: song.id
21};
22
23await client.graphql({
24  query: mutations.deleteSong,
25  variables: { input: songDetails }
26});

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}

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

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

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

1import { generateClient } from 'aws-amplify/api';
2import { getUrl } from 'aws-amplify/storage';
3
4const client = generateClient();
5
6// Query the record to get the file keys:
7const response = await client.graphql({
8  query: queries.getPhotoAlbum,
9  variables: { id: currentPhotoAlbum.id }
10});
11const photoAlbum = response.data.getPhotoAlbum;
12
13// If the record has no associated files, we can return early.
14if (!photoAlbum?.imageKeys) return;
15
16// Retrieve the signed URLs for the associated images:
17const signedUrls = await Promise.all(
18  photoAlbum.imageKeys.map(async (imageKey) => {
19    if (!imageKey) return;
20    return await getUrl({ key: imageKey });
21  })
22);

1import { generateClient } from 'aws-amplify/api';
2
3const client = generateClient();
4
5const response = await client.graphql({
6  query: queries.getPhotoAlbum,
7  variables: { id: currentPhotoAlbum.id }
8});
9
10const photoAlbum = response.data.getPhotoAlbum;
11
12// If the record has no associated file, we can return early.
13if (!photoAlbum?.imageKeys) return;
14
15const photoAlbumDetails = {
16  id: photoAlbum.id,
17  imageKeys: null
18};
19
20const updatedPhotoAlbum = await client.graphql({
21  query: mutations.updatePhotoAlbum,
22  variables: { input: photoAlbumDetails }
23});

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

1import { generateClient } from 'aws-amplify/api';
2import { remove } from 'aws-amplify/storage';
3
4const client = generateClient();
5
6const response = await client.graphql({
7  query: queries.getPhotoAlbum,
8  variables: { id: currentPhotoAlbum.id }
9});
10
11const photoAlbum = response.data.getPhotoAlbum;
12
13if (!photoAlbum) return;
14
15const photoAlbumDetails = {
16  id: photoAlbum.id
17};
18
19await client.graphql({
20  query: mutations.deletePhotoAlbum,
21  variables: { input: photoAlbumDetails }
22});
23
24// If the record has no associated file, we can return early.
25if (!photoAlbum?.imageKeys) return;
26
27await Promise.all(
28  photoAlbum?.imageKeys.map(async (imageKey) => {
29    if (!imageKey) return;
30    await remove({ key: imageKey });
31  })
32);