You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
'Storage Manager is a connected component that facilitates operations such as uploading, downloading, listing, and deleting files from an Amazon S3 bucket.',
802
+
'File Uploader is a connected component that facilitates operations such as uploading, downloading, listing, and deleting files from an Amazon S3 bucket.',
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.
34
+
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.
35
35
36
-
## Storage Manager React UI Component
36
+
## File Uploader React UI Component
37
37
38
-
Upload files from your app in minutes by using the cloud-connected Storage Manager UI Component.
38
+
Upload files from your app in minutes by using the cloud-connected File Uploader UI Component.
39
39
40
40
```bash title="Terminal" showLineNumbers={false}
41
41
npm add @aws-amplify/ui-react-storage aws-amplify
@@ -44,12 +44,12 @@ Then, use the component in your app.
44
44
{/* Let's add explanations for the props - which are mandatory now? I know before it was maxFileCount and accessLevel */}
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).
64
+
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).
Copy file name to clipboardExpand all lines: src/pages/[platform]/build-ui/formbuilder/special-inputs/index.mdx
+16-16Lines changed: 16 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,38 +25,38 @@ export function getStaticProps(context) {
25
25
26
26
27
27
28
-
## Storage Manager
28
+
## File Uploader
29
29
30
30
31
-
[**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/).
31
+
[**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/).
32
32
33
33
34
34
### Prerequisites
35
35
36
-
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.
36
+
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.
37
37
38
38
39
39
### How it works
40
40
41
-
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.
41
+
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.
42
42
43
-
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`.
43
+
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`.
44
44
45
45
46
46
### Adding it to your form
47
47
48
-
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.
48
+
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.
49
49
50
-
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:
50
+
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:
// import the processFile helper function which will create unique filenames based on the file contents
56
56
import { processFile } from"./utils";
57
57
58
58
//...
59
-
<StorageManager
59
+
<FileUploader
60
60
accessLevel="public"
61
61
maxFileCount={10}
62
62
acceptedFileTypes={['image/*']}
@@ -72,17 +72,17 @@ import { processFile } from "./utils";
72
72
```
73
73
74
74
75
-
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:
75
+
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:
// import the processFile helper function which will create unique filenames based on the file contents
82
82
import { processFile } from"./utils";
83
83
84
84
//...
85
-
<StorageManager
85
+
<FileUploader
86
86
accessLevel="public"
87
87
maxFileCount={1}
88
88
acceptedFileTypes={['image/*']}
@@ -97,18 +97,18 @@ import { processFile } from "./utils";
97
97
/>
98
98
```
99
99
100
-
See the documentation for the [StorageManager](https://ui.docs.amplify.aws/react/connected-components/storage/storagemanager) for all configuration options.
100
+
See the documentation for the [FileUploader](https://ui.docs.amplify.aws/react/connected-components/storage/fileuploader) for all configuration options.
101
101
102
102
103
103
### Unique S3 keys
104
104
105
-
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.
105
+
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.
106
106
107
-
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.
107
+
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.
108
108
109
109
<Calloutwarning>
110
110
111
-
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.
111
+
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.
112
112
113
113
<br />
114
114
If your **File level access** is set to `public`, identical files will overwrite
Copy file name to clipboardExpand all lines: src/pages/gen1/[platform]/build-ui/formbuilder/customize/index.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -52,7 +52,7 @@ Add form inputs to personalize the form to your use case. To add a form element:
52
52
53
53
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.
54
54
55
-
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/).
55
+
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/).
0 commit comments