Skip to content

Commit

Permalink
chore: Rename Storage Manager to File Uploader (#7921)
Browse files Browse the repository at this point in the history 
* chore: renaming Storage Manager to File Uploader

* Update src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx
  • Loading branch information
@jordanvn
jordanvn authored Sep 5, 2024
1 parent 073215b commit b6784bb
Show file tree
Hide file tree
Showing 8 changed files with 52 additions and 52 deletions.
2 changes: 1 addition & 1 deletion cspell.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -595,6 +595,7 @@
"Figma",
"Figma's",
"figma",
"fileuploader",
"architected",
"newsfeeds",
"textareas",
Expand Down Expand Up @@ -1244,7 +1245,6 @@
"Storage.put",
"storagebucketname",
"storagedemo",
"storagemanager",
"storageOptions",
"storagepath",
"StoragePath",
Expand Down
0 ...es/console/formbuilder/storagemanager.mp4 → ...ages/console/formbuilder/fileuploader.mp4
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion redirects.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
},
{
"source": "/ui/storage/s3-image-picker/q/framework/<platform>/",
"target": "https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager",
"target": "https://ui.docs.amplify.aws/react/connected-components/storage/fileuploader",
"status": "302"
},
{
Expand Down
6 changes: 3 additions & 3 deletions src/directory/directory.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -796,10 +796,10 @@ export const directory = {
{
isExternal: true,
route:
'https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager',
title: 'Storage Manager',
'https://ui.docs.amplify.aws/react/connected-components/storage/fileuploader',
title: 'File Uploader',
description:
'Storage Manager is a connected component that facilitates operations such as uploading, downloading, listing, and deleting files from an Amazon S3 bucket.',
'File Uploader is a connected component that facilitates operations such as uploading, downloading, listing, and deleting files from an Amazon S3 bucket.',
platforms: ['javascript', 'nextjs', 'react']
},
{
Expand Down
16 changes: 8 additions & 8 deletions src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,11 @@ export function getStaticProps(context) {

<InlineFilter filters={["javascript","nextjs","react"]}>

You can implement upload functionality in your app by either using the Storage Manager UI component or further customizing the upload experience using the upload API.
You can implement upload functionality in your app by either using the File Uploader UI component or further customizing the upload experience using the upload API.

## Storage Manager React UI Component
## File Uploader React UI Component

Upload files from your app in minutes by using the cloud-connected Storage Manager UI Component.
Upload files from your app in minutes by using the cloud-connected File Uploader UI Component.

```bash title="Terminal" showLineNumbers={false}
npm add @aws-amplify/ui-react-storage aws-amplify
Expand All @@ -44,12 +44,12 @@ Then, use the component in your app.
{/* Let's add explanations for the props - which are mandatory now? I know before it was maxFileCount and accessLevel */}

```tsx
import { StorageManager } from '@aws-amplify/ui-react-storage';
import { FileUploader } from '@aws-amplify/ui-react-storage';
import '@aws-amplify/ui-react/styles.css';

export const DefaultStorageManagerExample = () => {
export const DefaultFileUploaderExample = () => {
return (
<StorageManager
<FileUploader
acceptedFileTypes={['image/*']}
path="public/"
maxFileCount={1}
Expand All @@ -59,9 +59,9 @@ export const DefaultStorageManagerExample = () => {
};
```

![Showing Storage Manager UI component](/images/gen2/storage/upload-ui-component.png)
![Showing File Uploader UI component](/images/gen2/storage/upload-ui-component.png)

Learn more about how you can further customize the UI component by referring to the [Storage Manager documentation](https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager).
Learn more about how you can further customize the UI component by referring to the [File Uploader documentation](https://ui.docs.amplify.aws/react/connected-components/storage/fileuploader).

</InlineFilter>

Expand Down
32 changes: 16 additions & 16 deletions src/pages/[platform]/build-ui/formbuilder/special-inputs/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,38 +25,38 @@ export function getStaticProps(context) {



## Storage Manager
## File Uploader


[**Storage Manager**](https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager) fields allow your forms to accept file uploads, which are stored in an Amazon S3 bucket connected to your Amplify app. After uploading, that file's S3 key is stored in your data model, allowing for systematic retrieval using the [Amplify JS library](/[platform]/build-a-backend/storage/download-files/).
[**File Uploader**](https://ui.docs.amplify.aws/react/connected-components/storage/fileuploader) fields allow your forms to accept file uploads, which are stored in an Amazon S3 bucket connected to your Amplify app. After uploading, that file's S3 key is stored in your data model, allowing for systematic retrieval using the [Amplify JS library](/[platform]/build-a-backend/storage/download-files/).


### Prerequisites

In order to use the Storage Manager field, your Amplify app must have an Amplify app with [Authentication](/[platform]/build-a-backend/auth/set-up-auth/) and [Storage](/[platform]/build-a-backend/storage/set-up-storage/) enabled.
In order to use the File Uploader field, your Amplify app must have an Amplify app with [Authentication](/[platform]/build-a-backend/auth/set-up-auth/) and [Storage](/[platform]/build-a-backend/storage/set-up-storage/) enabled.


### How it works

The Storage Manager input will allow users to select from files on their local device and upload them to an S3 bucket. Storage Manager automatically connects to your S3 bucket added as part of Amplify Storage.
The File Uploader input will allow users to select from files on their local device and upload them to an S3 bucket. File Uploader automatically connects to your S3 bucket added as part of Amplify Storage.

Files are uploaded immediately upon selection, and an S3 key is generated. By default, Storage Manager will generate a [unique S3 key](#unique-s3-keys) based on the file uploaded. On form submission, Storage Manager will return the S3 key of the uploaded file as a `String`.
Files are uploaded immediately upon selection, and an S3 key is generated. By default, File Uploader will generate a [unique S3 key](#unique-s3-keys) based on the file uploaded. On form submission, File Uploader will return the S3 key of the uploaded file as a `String`.


### Adding it to your form

To use the StorageManager component with an autogenerated form you will first need a data model that has an attribute that is either a string or an array of strings (`a.string().array()` in **amplify/data/resource.ts**). Then make sure to run `npx ampx generate forms` after you update your data model.
To use the FileUploader component with an autogenerated form you will first need a data model that has an attribute that is either a string or an array of strings (`a.string().array()` in **amplify/data/resource.ts**). Then make sure to run `npx ampx generate forms` after you update your data model.

Then go into the generated form JSX file you want to use the StorageManager, for example: **ui-components/TodoCreateForm.jsx**. If your attribute is an array of strings, look for an `<ArrayField>` with `items={images}` (if your attribute name is "images"). Remove that entire component and replace it with the StorageManager component like this:
Then go into the generated form JSX file you want to use the FileUploader, for example: **ui-components/TodoCreateForm.jsx**. If your attribute is an array of strings, look for an `<ArrayField>` with `items={images}` (if your attribute name is "images"). Remove that entire component and replace it with the FileUploader component like this:

```jsx title="ui-components/TodoCreateForm.jsx"
// imports
import { StorageManager } from "@aws-amplify/ui-react-storage";
import { FileUploader } from "@aws-amplify/ui-react-storage";
// import the processFile helper function which will create unique filenames based on the file contents
import { processFile } from "./utils";

//...
<StorageManager
<FileUploader
accessLevel="public"
maxFileCount={10}
acceptedFileTypes={['image/*']}
Expand All @@ -72,17 +72,17 @@ import { processFile } from "./utils";
```


If you want your data model to have only one image instead of an array of images, look for the `<TextField>` component with `value={image}` and replace it with the StorageManager component like this:
If you want your data model to have only one image instead of an array of images, look for the `<TextField>` component with `value={image}` and replace it with the FileUploader component like this:


```jsx title="ui-components/TodoCreateForm.jsx"
// imports
import { StorageManager } from "@aws-amplify/ui-react-storage";
import { FileUploader } from "@aws-amplify/ui-react-storage";
// import the processFile helper function which will create unique filenames based on the file contents
import { processFile } from "./utils";

//...
<StorageManager
<FileUploader
accessLevel="public"
maxFileCount={1}
acceptedFileTypes={['image/*']}
Expand All @@ -97,18 +97,18 @@ import { processFile } from "./utils";
/>
```

See the documentation for the [StorageManager](https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager) for all configuration options.
See the documentation for the [FileUploader](https://ui.docs.amplify.aws/react/connected-components/storage/fileuploader) for all configuration options.


### Unique S3 keys

If files with identical S3 keys are uploaded to the same path, S3 will overwrite those files. To prevent accidental overwriting of files, Storage Manager generates a unique S3 key by hashing the _file contents_. Uploading different files with the same name will not overwrite the original file.
If files with identical S3 keys are uploaded to the same path, S3 will overwrite those files. To prevent accidental overwriting of files, File Uploader generates a unique S3 key by hashing the _file contents_. Uploading different files with the same name will not overwrite the original file.

However, if a form submitter uploads two identical files to the same path - even with different file names - Storage Manager will prevent file duplication in your S3 bucket.
However, if a form submitter uploads two identical files to the same path - even with different file names - File Uploader will prevent file duplication in your S3 bucket.

<Callout warning>

File overwriting only occurs for identical S3 keys _in the same path_. If the **File level access** for your Storage Manager is set to `private` or `protected`, identical files uploaded by separate users will be saved separately.
File overwriting only occurs for identical S3 keys _in the same path_. If the **File level access** for your File Uploader is set to `private` or `protected`, identical files uploaded by separate users will be saved separately.

<br />
If your **File level access** is set to `public`, identical files will overwrite
Expand Down
2 changes: 1 addition & 1 deletion src/pages/gen1/[platform]/build-ui/formbuilder/customize/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ Add form inputs to personalize the form to your use case. To add a form element:

Every input element in your form can be customized. Select a field in the form to open the configuration menu, where you can customize parts of the input, like its display label and placeholder.

Some form inputs have unique configurations, like **Storage Manager**. [Learn more about configuring special fields in the documentation](/gen1/[platform]/build-ui/formbuilder/special-inputs/).
Some form inputs have unique configurations, like **File Uploader**. [Learn more about configuring special fields in the documentation](/gen1/[platform]/build-ui/formbuilder/special-inputs/).

## Reorder form inputs with drag and drop

Expand Down
Loading

0 comments on commit b6784bb

Please sign in to comment.