Upload Signatures to a Server

A Signature Pad input field enables respondents to sign a form with a finger or mouse pointer by simply drawing a signature within a dedicated signature pad area. Resulting signature files can be uploaded to a server separately from survey results or stored directly in the survey results JSON object in Base64 format. If you choose to upload the signature images to a server, the survey results JSON object contains only unique image identifiers (file names or URLs). Such an approach significantly reduces the size of this object. This demo shows how to upload a signature file to a server-side storage.

Follow the steps below to implement image upload:

1. Disable the storeDataAsText property for the Signature question.

2. Handle SurveyModel's onUploadFiles event to upload signature images and save the uploaded image URLs in survey results. The event handler will be called when a user moves focus out of the signature area (clicks outside the area, navigates to another page, completes the survey). Within the onUploadFiles event handler, call the options.callback function upon server response. Pass the successfully uploaded signature image as the first argument. As the second argument, pass an array of error messages if the upload failed.

3. Enable Signature's waitForUpload property to ensure that users do not submit a form until the signature is uploaded.

Users can click the Clear button to delete their signature. Handle SurveyModel's onClearFiles event to remove the signature image from the server. Within an onClearFiles event handler, use the options.value parameter to identify the signature image you need to delete. Send a DELETE request to your server. Upon receiving a response, call the options.callback method and pass "success" or "error" to indicate the operation status.