Advanced Receive Folder Integrations

Use Receive Folders to embed an upload control directly into your site. Visitors to your site can securely deposit files directly into your ExaVault account, while you control the look, feel, and processing of the form.

The lightweight integration requires just a few lines of codes can drop right into your site's HTML. For advanced users and developers, we provide a set of options and callback functions that you can use to directly integrate the uploader into your forms and workflow.

Sample Integrations

Here is a sample list of customers who integrated our solution into their pages. You can click on the image to get closer look.

Form Setup

Each receive folder includes a set of the most commonly used fields when you create a new form. You can customize the form to add new fields, remove any of the default fields, and change the order forms appear on your form. See step-by-step instructions in our Form Builder documentation

Embedding Your Form

To set up your integration, follow these simple steps:

1. Create a new receive folder in the web application.
2. Open the the receive folder options.
3. Check the box next to the label Allow Embedding.
4. Click the get code link.
5. Copy the HTML code from the popup.
6. Open your site's code and paste in the copied code where you want the widget to appear.

The code should look something like this:

  <script src="https://app.exavault.com/ev-receive-widget"></script>
  <div id='widget-container-wrap' data-hash='ab12-abc123' data-filetype='image/jpeg,image/png,image/gif' data-showbuttons='true'></div>
  

Once you paste the code into your site, that's it! You should be able to upload files via your site. For more advanced options, see below.

Example Output

Advanced Widget Options

You may specify the following options on the <div> element. These attributes are not required.

  data-showbuttons    true/false    If true, display the "clear" and "send files" buttons. Set this to false if you
                                    want to control when the files are uploaded via the $EvUploader.upload function. If blank
                                    or not included this will be set to true.
                    
  data-filetype       string        A comma-separated list of MIME file types[*] to support. If blank, all file types will
                                    be supported. For example, to load only image files, set this to 'image/jpg,image/png,
                                    image/gif,image/tif,image/bmp'
        

[*] For a list of valid MIME file types, see this page.

Controlling Upload Behavior

The ExaVault Receive Folder exposes functions that you can use to control the behavior of the embedded folder.

$EvUploader.upload

This function is used to initate the file upload if you have chosen to hide the submit button (see data-showbuttons above). For example, if you need form field types that are not supported by the form builder (such as dropdowns or radio buttons) you can include the form div in your own form and then call $EvUploader.upload to trigger the upload to ExaVault. The function has two options:

  $EvUploader.upload(folderName, callback)

  folderName     string      Used to organize each user's upload into a different folder. For example, if you have
                             a form that has the user's email address, you may pass their email address as the folderName so that
                             each user's uploads will be organized by email address. The folder will be created automatically if it
                             does not exist.
                             If left null, all files will be uploaded to the root of the receive folder.

  callback       function    Callback code to run when the uploader is finished uploading. For example,
                             you could use the ExaVault API to automatically rename or compress
                             the uploaded files.
                             If you leave this option null, the uploader will reset after files have been uploaded.
  

Advanced Styling / CSS Options

Provide your own custom CSS in the form setup to integrate the uploader seamlessly into your website. Edit the form settings to override the default styles.

Custom CSS can be used to modify:

1. Fonts
2. How much horizontal space the embedded form occupies within your site.
3. Field labels (e.g., color, size, positioning)
4. Field inputs
5. Form field descriptions