File uploads

How to upload files Notion with Notion Monkey

Notion 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

First, you need to enable file uploads for the forms that you want to accept files on. Do this by toggling File Upload to on.

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.

Downloading your files

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

Uploading Large Files with Files.js

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

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

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

This code will automatically intercept submission events on any form with an api.notionmonkey.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

<form action="https://api.notionmonkey.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://notionmonkey.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:

  • 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.

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