# File uploads

Sheet Monkey allows you to upload files using native form fields. This can be great for certain use cases when you need more than text from your form.

### Getting Started <a href="#headerlink-0" id="headerlink-0"></a>

First, in the [Sheet Monkey dashboard](https://dashboard.sheetmonkey.io), you need to enable file uploads for the forms that you want to accept files on. Do this by toggling File Upload to on.

![](https://506014553-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDC2UBVsxTCFgqgM3sK%2F-MihMlsHmy9k38a03TPs%2F-MihOiyTZYVBrze7-b-s%2FCleanShot%202021-09-03%20at%2016.43.11.png?alt=media\&token=48bc9f4e-9df2-47d3-aa25-b4a7247f807f)

In the form tag, you must add an `enctype=multipart/form-data` attribute. Then add an `<input type='file' name='My File'/>` tag to your form. There's a number of options you can add to this tag to customize it. For example, if you only want to accept PNG and JPEG images, we can add `accept="image/png, image/jpeg"`. You can [learn more about all the available options for the file input tag here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file).

### Downloading your files

When a user uploads a file using one of your form's file input fields, it behaves like any other Sheet Monkey field, except the files are converted into download links:

![An example of how a file upload appears in a Google Sheet](https://506014553-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDC2UBVsxTCFgqgM3sK%2F-MihMlsHmy9k38a03TPs%2F-MihPcSPIVnxDU_i_57q%2Fimage.png?alt=media\&token=dced4111-1a56-4d6c-9c98-8a0511ac92da)

### Uploading Large Files with Files.js

File uploads are limited to 6MB. If you need to upload larger files you need to use the **Sheet Monkey Files.js** library.

Simply, insert this JS code in the page with your form.

```html
<script src="https://sheetmonkey.io/lib/files.min.js" type="text/javascript"></script>
```

This code will automatically intercept submission events on any form with an `api.sheetmonkey.io` action, upload the files and then submit the form when the uploads are complete.\
\
This code will also disable form submit buttons while uploads are processing to prevent double submit events.

**Example form**

```html
<form action="https://api.sheetmonkey.io/form/..." enctype="multipart/form-data" method="post">
  <label>Example Field: <input type="text" name="Example Header" required /></label>
  <label>Example File: <input type="file" name="Example File" required /></label>
  <input type="hidden" name="Created" value="x-sheetmonkey-current-date-time" />
  <input type="submit" value="Submit" />
</form>
<script src="https://sheetmonkey.io/lib/files.min.js" type="text/javascript"></script>
```

#### Files.js events

If you want to track the progress and state of uploads you can listen to upload events emitted from the file.js library like so:

```
<script type="text/javascript">
  window.addEventListener('message', (event) => {
    const {name, file, percent, errorCode} = event.data;
    if(name === 'sheetmonkey-upload-start') {
       console.log('upload file started', file);
    }
    if(name === 'sheetmonkey-upload-progress') {
       console.log('upload file progress', percent, file);
    };
    if(name === 'sheetmonkey-upload-error') {
       console.log('upload file failed with code', file, errorCode);
    };
    if(name === 'sheetmonkey-upload-complete') {
       console.log('upload file comeplete', file);
    };
  });
</script>
```

Events have the following json properties:

* **name:  string.** The name of the event. The event names are:&#x20;
  * `sheetmonkey-upload-start`
  * `sheetmonkey-upload-progress`
  * `sheetmonkey-upload-error`
  * `sheetmonkey-upload-complete`
* **file: string.** The name of the file being uploaded.
* **percent. number.** The progress of the file upload. Only sent on `sheetmonkey-upload-progress` events.
* **errorCode. number.** The error code if the file upload filed. Only sent on `sheetmonkey-upload-error` events.

### Showing upload progress

If your form needs to upload larger files, it might be a good idea to show upload progress.\
\
If you're using the files.js library, you can add the following element anywhere into your HTML and Sheet Monkey will update the progress.

```html
<progress id="sheetmonkey-upload-progress" max="100"></progress>
```

You can style this element however you'd like and you can place it anywhere on the page.

### Limitations

* File Uploads requires an unlimited account.
* Uploads are limited to 100MB.
* Users may have issues with larger files on slower connections.

Please contact support with any issues you encounter.