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. Read more...
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.
Store Files as Base64 URLs vs Upload Files to a Server
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.
Store Files as Base64 URLs
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.
Upload 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:
- Disable the
storeDataAsText
property for the File Upload question. - Use
SurveyModel
'sonUploadFiles
event to upload files and save file URLs in survey results. - 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.
Limit the File Size
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.
Upload Multiple Files
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
.