ExaVault Uploader Widget

Our uploader widget allows you to embed an upload control directly into your site. Visitors to your site can deposit files directly into your ExaVault account, and you control the look, feel, and processing of the form.

The integration is simple with a small widget you 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.

Widget Setup

To setup the widget, follow these simple steps:

  1. Create a new receive folder in SWFT
  2. In the File manager, bring up the receive folder options
  3. Under the "Uploader Widget" section, copy the HTML code.
  4. 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://swft.exavault.com/ev-uploader/"></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 uploadFiles 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,

Widget Functions

The ExaVault Upload Widget exposes functions that you can use to control the behavior of the widget.


This function is used to control when the user's file(s) are uploaded. For example, if you need to integrate the Uploader Widget into a form, you will need to call this function to begin uploading when your form is submitted. 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 this as the folderName so that
                    each user's uploads will be organized by email address. 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. If null, the uploader 
                    will reset after files have been uploaded.

Custom CSS

Using your own CSS file you can make EV Upload Widget look like your website. We recommend that you use your browser's developer tools to check tag classes and set your own styles for them.

What You Can Change Using a Custom CSS File

Custom CSS can be used to modify:

  1. Fonts
  2. Colors
  3. Backgrounds

What You Shouldn't Change With CSS File

You shouldn't change the layout of EV Upload Widget. Making these kinds of changes can potentially break the widget.