# File Uploads

You can upload files via the [React form](https://docs.usegravity.app/gravity-web/components/form) using input type of `file`**.** The file component supports multiple file uploads using a drag-and-drop interface.

{% hint style="info" %}
[User avatars](https://docs.usegravity.app/gravity-web/components/user) demonstrate a full working example of uploading files from the client and storing them in an S3 bucket. 
{% endhint %}

<pre class="language-javascript"><code class="lang-javascript">&#x3C;Form inputs={{ 
  avatar: {
<strong>    label: 'Profile Picture',
</strong>    type: 'file', 
    required: false, 
    max: 1,
 },
}}/>
</code></pre>

Uploads are handled on the server using [multer](https://www.npmjs.com/package/multer) and stored in the `/uploads` directory.

There is a utility API endpoint for uploading files.

```javascript
/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.

```javascript
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.

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