File Upload

File Upload questions enable respondents to easily upload images, documents, multimedia, and other file types without relying on external file sharing services. Users can simply drag and drop or select a single or multiple files directly within the survey interface to upload relevant information. Files can be uploaded to a server or stored directly in the survey results JSON object. This demo shows how to upload files to a server but describes both storage methods.

In this demo, files are uploaded to SurveyJS servers from where they are then deleted after a predefined period of time. We strongly encourage you to use your own servers for file uploads when you use SurveyJS to collect sensitive respondent data in your application.

A File Upload question can manage files in two different ways:

• Store files as Base64 URLs
  Files are encoded to Base64 strings that are stored directly within a JSON object with survey results.

• Upload files to a server
  Files are stored on a server, while the JSON object with survey results contains only unique file identifiers (file names or URLs).

The following sections describe both approaches and help you decide which approach meets your needs best.

The Base64 format represents binary data as printable text. A File Upload question encodes uploaded files to Base64 strings and stores them in SurveyModel's data object. When users complete a survey, the data object is saved along with the Base64-encoded files to your database.

This approach allows you to easily retrieve files when you retrieve survey data, but it significantly increases the size of a JSON object with survey results. If you want to store uploaded files separately from survey results, set a File Upload question's storeDataAsText property to false and follow the instructions from the next section to implement an event handler that uploads files to a server.

To decrease the size of a JSON object with survey results, upload files to a server. In this case, the survey results will contain only unique identifiers (file names or URLs) associated with the uploaded files. To implement this functionality, follow the steps below:

1. Disable the storeDataAsText property for the File Upload question.
2. Use SurveyModel's onUploadFiles event to upload files and save file URLs in survey results.
3. Enable the File Upload question's waitForUpload property to ensure that users won't complete the survey until files are uploaded.

If you save file URLs on step 2, a File Upload question automatically displays a preview of uploaded files because they can be accessed by a URL. If you use a different file identifier (for example, a file name), file previews won't be available. In this case, you can handle SurveyModel's onDownloadFile event to fetch the uploaded files and display their previews. Refer to the Retrieve Uploaded Files for Preview Using File Names demo for more information.

Respondents can upload files of any size unless you set a File Upload question's maxSize property. This property accepts a number that specifies maximum allowed file size in bytes. If this size is exceeded, the File Upload question displays an error message. You can handle the onErrorCustomText event to customize the error message text. In this demo, the maximum file size is set to 100 KB.

A File Upload question allows respondents to upload more than one file simultaneously. To enable this feature, set the question's allowMultiple property to true.