EV Upload Widget

The upload widget allows you to embed an upload control into your site. The uploader can be used by simply copying and pasting the widget code 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 process.

Getting Started

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