Comment on page
File Uploads
You can upload files via the React form using input type of
file. The file component supports multiple file uploads using a drag-and-drop interface.User avatars demonstrate a full working example of uploading files from the client and storing them in an S3 bucket.
<Form inputs={{
avatar: {
label: 'Profile Picture',
type: 'file',
required: false,
max: 1,
},
}}/>
There is a utility API endpoint for uploading files.
/api/utility/upload
When using this endpoint, a temp file will be stored in the
/uploads folder by multer. The controller will then upload this file to S3 to your default bucket.Alternatively, if you want to upload a file to another endpoint, you'll need to use the multer middleware in the same manner as the utility endpoint.
const multer = require('multer');
const upload = multer({ dest: 'uploads' });
api.post('/api/utility/upload', upload.any(), use(utilityController.upload));
Gravity includes a helper for interacting with S3, so you can manage your S3 buckets and files in a few lines of code.
You need to add the following three credentials to your environment to use the S3 helper:
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
S3_REGION=
Import the helper anywhere in your project and call one of the helper methods.
const s3 = require('/helper/s3');
// list the buckets
await s3.bucket();
// list the items in the bucket
await s3.bucket.items(bucketName);
// create a new bucket
await s3.bucket.create(bucketName);
// delete a bucket
await s3.bucket.delete(bucketName);
// upload a file or buffer and return the S3 url
await s3.upload({ bucketName, file, buffer, acl });
// delete a file using a filename or S3 url
await s3.delete({ bucketName, file, url });
// get a signed url for a file
await s3.signedURL({ bucketName, fileName, expires, acl });
Last modified 2mo ago