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.
   Within the event handler, call the options.callback function when file upload ends. Pass an array of successfully uploaded files as the first argument. As the second argument, you can pass an array of error messages if file upload failed.
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.

Users can click an individual file's Remove button to delete this file or click the Clear button to delete all uploaded files. Handle SurveyModel's onClearFiles event to delete the files from a server storage.

Within an onClearFiles event handler, you can identify the file to delete using the options.fileName parameter. Send a request to your server to delete the specified file. If options.fileName contains null, it means that the user has clicked the Clear button to delete all uploaded files. In this case, you should send a request to delete files listed in the options.value array.

Once you receive a response from the server, call the options.callback method. Pass "success" or "error" to indicate the operation status. As the second argument, you can pass deleted files' data (options.value) if file deletion was successful or an error message if file deletion failed.

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.