Attach File Button API

The attach API is a button that can be added to your HTML form to trigger specific Forms inMotion file attachment behaviors.  This can be used when the Forms inMotion application is hidden such as in an anonymous form environment or when you require specific file type/file name or callback behaviors after attachments.

Default buttons will break

When using the <button> directive in HTML the default behavior type is "submit". You MUST use the phrase 'type="button"' or your button will attempt to submit the entire form to the application. This will cause an error.  An example would be <button type="button" id="mybutton">SAMPLE</button>

  • You can trigger the application level file attachment API using the following syntax.  This will popup the file attach dialog in Forms inMotion.

    Button API Default
    <button type="button" data-attach="[attachment name]" id="[something]">Upload</button>


    Example attachment dialog showing package configured for ID Card and Insurance Card attachment types:

  • If you would like to trigger a callback after the file has been loaded, you can add an additional data property. You only need to include the function name and Forms InMotion will add the (filename) parameter.  Note that if the file type specified in the data-attach attribute does not match one already assigned to this package type then that will be shown on the attach dialog as an additional file attach option.

    Button API with Callback
    <button type="button" data-attach="Employee Receipt" data-attach-callback="ReceiptAttachCallback" id="receiptUploadButton">Upload</button>

    In this sample button the callback might look like this

    Button API Callback Sample
    //receive uploaded file name, write that to the screen and disable the upload button
    function attach_receipt_callback(filename) {
    	$("#receipt_results").html("Receipt attached successfully. File name was: " + filename);
    	$("#receipt").prop('disabled','disabled');
    }