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,
 },
}}/>

Uploads are handled on the server using multer and stored in the /uploads directory.

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));

Uploading Files to Amazon S3

Gravity includes a helper for interacting with S3, so you can manage your S3 buckets and files in a few lines of code.

1. Add AWS Credentials to .env

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=

2. Import The Helper

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 });