Skip to content

Conversation

@osama-rizk
Copy link
Contributor

Description of changes:

This PR adds documentation for the new folder deletion capabilities in the Storage remove API. The documentation covers folder deletion, progress tracking, and cancellation features that are now available for JavaScript web platforms.

Key additions:

  • Add folder deletion capabilities for JavaScript platforms
  • Include progress tracking with onProgress callback
  • Add cancellation support for long-running operations
  • Scope folder features to web JS platforms only (excludes React Native)
  • Update options table with new onProgress parameter

Verification:

  • Ran the documentation site locally and verified all new content renders correctly
  • Tested code examples for syntax highlighting and formatting
  • Confirmed platform filtering works properly (folder deletion only shows for web JS platforms)

Related GitHub issue #, if available:

Related to amplify-js#5841 (Storage folder deletion feature implementation)

Instructions

If this PR should not be merged upon approval for any reason, please submit as a DRAFT

Which product(s) are affected by this PR (if applicable)?

  • amplify-libraries

Which platform(s) are affected by this PR (if applicable)?

  • JS

Please add the product(s)/platform(s) affected to the PR title

Checks

  • Does this PR conform to the styleguide?

  • Does this PR include filetypes other than markdown or images? Please add or update unit tests accordingly.

  • Are any files being deleted with this PR? If so, have the needed redirects been created?

  • Are all links in MDX files using the MDX link syntax rather than HTML link syntax?

    ref: MDX: [link](https://docs.amplify.aws/)
    HTML: <a href="https://docs.amplify.aws/">link</a>

When this PR is ready to merge, please check the box below

  • Ready to merge

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

- Add folder deletion capabilities for JavaScript platforms
- Include progress tracking with onProgress callback
- Add cancellation support for long-running operations
- Scope folder features to web JS platforms only (excludes React Native)
- Update options table with new onProgress parameter
@osama-rizk osama-rizk requested review from a team and harsh62 as code owners January 13, 2026 09:59
@osama-rizk osama-rizk requested a review from a team as a code owner January 13, 2026 10:34
@osama-rizk osama-rizk requested a review from srquinn21 as a code owner January 21, 2026 14:29
<InlineFilter filters={["react", "angular", "javascript", "vue", "nextjs", "react-native"]}>

<InlineFilter filters={["react", "angular", "javascript", "vue", "nextjs", "react-native"]}>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this inlinefilter necessary?

Comment on lines +83 to +98
import { remove } from 'aws-amplify/storage';

try {
const result = await remove({
path: 'album/2024/', // Folder path ending with '/'
options: {
onProgress: (progress) => {
console.log(`Deleted: ${progress.deleted?.length || 0} files`);
console.log(`Failed: ${progress.failed?.length || 0} files`);
}
}
});
console.log('Folder removed:', result.path);
} catch (error) {
console.log('Error ', error);
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to keep the example clean an concise, I think the onProgress is not needed.

as well as the try/catch; or maybe the try/catch for consistency with other code examples.

Suggested change
import { remove } from 'aws-amplify/storage';
try {
const result = await remove({
path: 'album/2024/', // Folder path ending with '/'
options: {
onProgress: (progress) => {
console.log(`Deleted: ${progress.deleted?.length || 0} files`);
console.log(`Failed: ${progress.failed?.length || 0} files`);
}
}
});
console.log('Folder removed:', result.path);
} catch (error) {
console.log('Error ', error);
}
import { remove } from 'aws-amplify/storage'
await remove({
path: 'album/2024/'
})

alternative:

Suggested change
import { remove } from 'aws-amplify/storage';
try {
const result = await remove({
path: 'album/2024/', // Folder path ending with '/'
options: {
onProgress: (progress) => {
console.log(`Deleted: ${progress.deleted?.length || 0} files`);
console.log(`Failed: ${progress.failed?.length || 0} files`);
}
}
});
console.log('Folder removed:', result.path);
} catch (error) {
console.log('Error ', error);
}
import { remove } from 'aws-amplify/storage'
try {
await remove({
path: 'album/2024/'
})
} catch(error) {
console.error(error)
}

}
});

console.log('Folder deletion completed:', result.path);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is the path different, than the path option of the remove?
if not I think the console is unnecessary.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alternatively just write console.log('Success', result)

Comment on lines +112 to +126
onProgress: (progress) => {
// Track successful deletions
if (progress.deleted) {
progress.deleted.forEach(item => {
console.log(`Successfully deleted: ${item.path}`);
});
}

// Handle failed deletions
if (progress.failed) {
progress.failed.forEach(item => {
console.log(`Failed to delete: ${item.path} - ${item.message}`);
});
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think generally it makes more sense to just say here:

Suggested change
onProgress: (progress) => {
// Track successful deletions
if (progress.deleted) {
progress.deleted.forEach(item => {
console.log(`Successfully deleted: ${item.path}`);
});
}
// Handle failed deletions
if (progress.failed) {
progress.failed.forEach(item => {
console.log(`Failed to delete: ${item.path} - ${item.message}`);
});
}
}
onProgress: (fileBatch) => { // or files, processedFiles
console.log(fileBatch)
}

and then describe the argument similar to https://next-release-gen2.d1j0to8e01vtig.amplifyapp.com/react/build-a-backend/storage/list-files/

setTimeout(() => {
deleteOperation.cancel();
console.log('Deletion cancelled');
}, 5000);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please provide a bit more real-world kind of example, when cancellation makes sense.


### Cancellable folder deletion

For long-running folder deletions, you can cancel the operation:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please go here a bit into detail how the thenable-approach works, explaining the difference between await remove() and `remove()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants