Upload files
uploadData
The uploadData
method uploads files into Amazon S3.
1import { uploadData } from 'aws-amplify/storage';2
3try {4 const result = await uploadData({5 path: 'public/album/2024/1.jpg', 6 // Alternatively, path: ({identityId}) => `protected/${identityId}/album/2024/1.jpg`7 data: file,8 options: {9 onProgress // Optional progress callback.10 }11 }).result;12 console.log('Succeeded: ', result);13} catch (error) {14 console.log('Error : ', error);15}
1import { uploadData } from 'aws-amplify/storage';2
3try {4 const result = await uploadData({5 key: 'album/2024/1.jpg',6 data: file,7 options: {8 accessLevel: 'guest', // defaults to `guest` but can be 'private' | 'protected' | 'guest'9 onProgress // Optional progress callback.10 }11 }).result;12 console.log('Succeeded: ', result);13} catch (error) {14 console.log('Error : ', error);15}
Monitor progress of upload
To track the progress of your upload, you can use the onProgress
option:
1import { uploadData } from 'aws-amplify/storage';2
3try {4 const result = uploadData({5 path: 'public/album/2024/1.jpg', 6 // Alternatively, path: ({identityId}) => `protected/${identityId}/album/2024/1.jpg`7 data: file,8 options: {9 onProgress: ({ transferredBytes, totalBytes }) => {10 if (totalBytes) {11 console.log(12 `Upload progress ${13 Math.round((transferredBytes / totalBytes) * 100)14 } %`15 );16 }17 }18 }19 }).result;20 console.log('Path from Response: ', result.path);21} catch (error) {22 console.log('Error : ', error);23}
1import { uploadData } from 'aws-amplify/storage';2
3try {4 const result = uploadData({5 key: 'album/2024/1.jpg',6 data: file,7 options: {8 onProgress: ({ transferredBytes, totalBytes }) => {9 if (totalBytes) {10 console.log(11 `Upload progress ${12 Math.round((transferredBytes / totalBytes) * 100)13 } %`14 );15 }16 }17 }18 }).result;19 console.log('Key from Response: ', result.key);20} catch (error) {21 console.log('Error : ', error);22}
Pause and resume upload
We have callback functions that support resuming, pausing, and cancelling uploadData
requests.
1import { uploadData } from 'aws-amplify/storage';2
3// Pause and resume a task4const uploadTask = uploadData({ path, data: file });5//...6uploadTask.pause();7//...8uploadTask.resume();9//...10await uploadTask.result;
1import { uploadData } from 'aws-amplify/storage';2
3// Pause and resume a task4const uploadTask = uploadData({ key, data: file });5//...6uploadTask.pause();7//...8uploadTask.resume();9//...10await uploadTask.result;
Cancel upload
1import { uploadData, isCancelError } from 'aws-amplify/storage';2
3const uploadTask = uploadData({ path, data: file });4//...5uploadTask.cancel();6try {7 await uploadTask.result;8} catch (error) {9 if (isCancelError(error)) {10 // Handle error thrown by task cancellation11 }12}
1import { uploadData, isCancelError } from 'aws-amplify/storage';2
3const uploadTask = uploadData({ key, data: file });4//...5uploadTask.cancel();6try {7 await uploadTask.result;8} catch (error) {9 if (isCancelError(error)) {10 // Handle error thrown by task cancellation11 }12}
Other options available are:
1import { uploadData } from 'aws-amplify/storage';2
3uploadData({4 path: 'public/album/2024/1.jpg', 5 // Alternatively, path: ({identityId}) => `protected/${identityId}/album/2024/1.jpg`6 data: file,7 options: {8 contentType?: 'text/html', // (String) The default content-type header value of the file when downloading it.9 contentEncoding?: 'compress' // (String) The default content-encoding header value of the file when downloading it.10 contentDisposition?: 'attachment', // (String) Specifies presentational information for the object11 metadata?: {key: 'value'}, // (map<String>) A map of metadata to store with the object in S3.12 useAccelerateEndpoint?: boolean; // Whether to use accelerate endpoint.13 }14});
When a page refresh occurs during the upload, re-initializing the upload with the same file will continue from previous break point.
Browser uploads
Upload a file in the browser:
1import { uploadData } from 'aws-amplify/storage';2
3const uploadDataInBrowser = async (event) => {4 if (event?.target?.files) {5 const file = event.target.files[0];6 uploadData({7 path: file.name,8 data: file9 });10 }11};
1import { uploadData } from 'aws-amplify/storage';2
3const uploadDataInBrowser = async (event) => {4 if (event?.target?.files) {5 const file = event.target.files[0];6 uploadData({7 key: file.name,8 data: file9 });10 }11};