# File Uploads

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

{% hint style="info" %}
[User avatars](/gravity-web/components/user.md) 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 });
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-server/file-uploads.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.