Page updated Feb 15, 2024

Upload files

uploadData

The uploadData method uploads files into Amazon S3.

import { uploadData } from 'aws-amplify/storage'; try { const result = await uploadData({ key: filename, data: file, options: { accessLevel: 'guest', // defaults to `guest` but can be 'private' | 'protected' | 'guest' onProgress // Optional progress callback. } }).result; console.log('Succeeded: ', result); } catch (error) { console.log('Error : ', error); }
1import { uploadData } from 'aws-amplify/storage';
2
3try {
4 const result = await uploadData({
5 key: filename,
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}

Public level

The accessLevel defaults to guest

import { uploadData } from 'aws-amplify/storage'; try { const result = await uploadData({ key: filename, data: file }).result; console.log('Succeeded: ', result); } catch (error) { console.log('Error : ', error); }
1import { uploadData } from 'aws-amplify/storage';
2
3try {
4 const result = await uploadData({
5 key: filename,
6 data: file
7 }).result;
8 console.log('Succeeded: ', result);
9} catch (error) {
10 console.log('Error : ', error);
11}

Protected level

import { uploadData } from 'aws-amplify/storage'; try { const result = await uploadData({ key: filename, data: file, options: { accessLevel: 'protected' } }).result; console.log('Succeeded: ', result); } catch (error) { console.log('Error : ', error); }
1import { uploadData } from 'aws-amplify/storage';
2
3try {
4 const result = await uploadData({
5 key: filename,
6 data: file,
7 options: {
8 accessLevel: 'protected'
9 }
10 }).result;
11 console.log('Succeeded: ', result);
12} catch (error) {
13 console.log('Error : ', error);
14}

Private level

import { uploadData } from 'aws-amplify/storage'; try { const result = await uploadData({ key: filename, data: file, options: { accessLevel: 'private' } }).result; console.log('Succeeded: ', result); } catch (error) { console.log('Error : ', error); }
1import { uploadData } from 'aws-amplify/storage';
2
3try {
4 const result = await uploadData({
5 key: filename,
6 data: file,
7 options: {
8 accessLevel: 'private'
9 }
10 }).result;
11 console.log('Succeeded: ', result);
12} catch (error) {
13 console.log('Error : ', error);
14}

Monitor progress of upload

To track the progress of your upload, you can use the onProgress in options:

import { uploadData } from 'aws-amplify/storage'; try { const result = uploadData({ key: filename, data: file, options: { onProgress: ({ transferredBytes, totalBytes }) => { if (totalBytes) { console.log( `Upload progress ${ Math.round((transferredBytes / totalBytes) * 100) } %` ); } } } }).result; console.log('Key from Response: ', result.key); } catch (error) { console.log('Error : ', error); }
1import { uploadData } from 'aws-amplify/storage';
2
3try {
4 const result = uploadData({
5 key: filename,
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.

import { uploadData } from 'aws-amplify/storage'; // Pause and resume a task const uploadTask = uploadData({ key, data: file }); //... uploadTask.pause(); //... uploadTask.resume(); //... await uploadTask.result;
1import { uploadData } from 'aws-amplify/storage';
2
3// Pause and resume a task
4const uploadTask = uploadData({ key, data: file });
5//...
6uploadTask.pause();
7//...
8uploadTask.resume();
9//...
10await uploadTask.result;

Cancel upload

import { uploadData, isCancelError } from 'aws-amplify/storage'; const uploadTask = uploadData({ key, data: file }); //... uploadTask.cancel(); try { await uploadTask.result; } catch (error) { if (isCancelError(error)) { // Handle error thrown by task cancellation } }
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 cancellation
11 }
12}

Other options available are:

import { uploadData } from 'aws-amplify/storage'; uploadData({ key, data: file, options: { contentType?: "text/html", // (String) The default content-type header value of the file when downloading it. contentEncoding?: "compress" // (String) The default content-encoding header value of the file when downloading it. contentDisposition?: "attachment", // (String) Specifies presentational information for the object metadata?: {key: "value"}, // (map<String>) A map of metadata to store with the object in S3. useAccelerateEndpoint?: boolean; // Whether to use accelerate endpoint. } });
1import { uploadData } from 'aws-amplify/storage';
2
3uploadData({
4 key,
5 data: file,
6 options: {
7 contentType?: "text/html", // (String) The default content-type header value of the file when downloading it.
8 contentEncoding?: "compress" // (String) The default content-encoding header value of the file when downloading it.
9 contentDisposition?: "attachment", // (String) Specifies presentational information for the object
10 metadata?: {key: "value"}, // (map<String>) A map of metadata to store with the object in S3.
11 useAccelerateEndpoint?: boolean; // Whether to use accelerate endpoint.
12 }
13});

When a page refresh occurs during the upload, re-initializing the upload with the same file will continue from previous break point.

Uploads that were initiated over one hour ago will be cancelled automatically. There are instances (e.g device went offline, user logs out) where the incomplete file remains in your S3 account. It is recommended to setup a s3 lifecycle rule to automatically cleanup incomplete upload requests.

Browser uploads

Upload a file in the browser:

import { uploadData } from 'aws-amplify/storage'; const uploadDataInBrowser = async (event) => { if (event?.target?.files) { const file = event.target.files[0]; uploadData({ key: file.name, data: file }); } };
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: file
9 });
10 }
11};