Skip to main content

FV Decipher Support

All the topics, resources needed for FV Decipher.

FocusVision Knowledge Base

Implementing the Image and Video Upload Question

This article describes adding the Image and Video Upload question via the survey XML. To learn how to add the Image Upload element via the Survey Editor, click here.

Overview

The Image and Video Upload question enables respondents to select files from their device and upload them to your project.

This feature is not supported on all devices. Respondent experience varies depending on device, operating system, external application used (e.g., camera), and other factors.

Upload time is dependent upon file size, which can be large for video, and upload speed, which is slow on most consumer Internet connections.

1: Underlying Question Architecture

This question style uses the <image> tag to create the input necessary for accepting images and videos. By default, this question will accept both images and videos. See below for the base XML required:

<image label="Q1" optional=”0”>
  <title>Upload a file from your device</title>
</image>

The XML code above produces the following result:

With this setup, a respondent may upload any file from their device. As illustrated above, there will be no restrictions set and they will see all files from their device available for uploading.

To limit the types of files that can be uploaded you will need to add a <validate> to your <image> element. For example:

<image label="mediaUpload" optional=”0”>
 <title>Please update your favorite photo/video from your device.</title>
 <validate>
if this.val:
 validExtensions = [ ".jpg", ".png", ".jpeg", ".tif", ".mov", ".mp4", ".flv", ".wmv", ".avi" ]
 if not any([this.val.endswith(extension) for extension in validExtensions]):
       error(res["mediaUpload,upload_extension_error"])
 </validate>
<res label="upload_extension_error">You have uploaded an invalid file format. Please try again.</res>
</image>

1.1: Attributes

In addition to the available question attributes, the <image> element has access to the following attributes:

Attribute

Type

Description

displayInline

boolean

Change the way files are displayed in reports.

If displayInline="0" is specified, then a link to the uploaded file will be shown in the report instead of an image.

If the files you're expecting to be uploaded are images, then the default (displayInline="1") will show the uploaded files as images inline in the report tables.

imagePrefix

string

Set the file name's prefix.

Can be applied to the main <survey> element and controls the naming convention used to name uploaded files.

By default, files will be renamed using the respondent's record number, the question label, and the original name of the file (e.g., 42_q10_my_cute_puppy.jpg ).

You can use the imagePrefix attribute to override the default prefix (e.g. record) to use any variable (e.g. source).

2: Converting to the Image Upload Dynamic Question

You can use the Image Upload dynamic question to limit the types of files allowed to image files and give the upload a more modern look. To change to the dynamic question, add uses="imgupload.1" to your <image> tag.

<image label="Q1" optional="0" uses="imgupload.1">
  <title>Upload a file from your device</title>
</image>

The following image formats are accepted for uploading:

  • JPEG
  • PNG
  • GIF
  • SVG

The maximum file size for any image is 5 MB and only one upload is allowed per question.

The Image Upload dynamic question is incompatible with feature phones.

2.1: Attributes

Name

Description

Default

imgupload:providenoanswer

Provide respondents a (No Answer) option to skip the question if they are having problems adding and/or uploading an image

1

imgupload:noanswertext

Text that will appear next to an option to skip the question

I'm unable or don't want to upload an image

imgupload:invalid_file

Text warning will appear if the file is an invalid type or too large.

Warning: Invalid file selected. Please select an image file sized 5 MB or smaller.

imgupload:text_capture

translatable text

Take

imgupload:text_mediatype

translatable text

Photo

imgupload:text_gallery

translatable text

Select from Gallery

imgupload:text_deviceerror

translatable text

Unable to complete action. Please check the app settings on your device to verify all camera permissions are enabled, and please try again.

3: Converting to the Video Only Upload Question

 Requires Decipher Cloud

This Video Upload question demonstrates restricting an upload to only allow video files on devices that allow this restriction. This setting helps the OS filter the types of files that are offered for upload. Also, the form element used for uploading (the “select from your library” area) is highly stylized for modern smartphones that have better HTML5 and CSS support.

To accept only videos through the file uploader, update the <image> tag as follows:

<image label="Q1" style="video">
  <title>Upload a file from your device</title>
</image>

In addition to adding the style attribute to the <image> tag, you must also include the following code in your nstyles file (e.g. /selfserve/9d3/proj12345/nstyles):

*video/el.image:
@if data
@if this.displayInline
<video src='/survey/${gv.survey.path}/$(localFilename|q)' controls>Your browser doesn't suport HTML5 video.</video>
@endif
<INPUT type="hidden" name="old-$(name)" value="$(data)">
<BR><BR>
@endif
<div class="uploader white">
<INPUT type="file" name="$(name)" size="$(size)" class="upload video" accept="video/*">
</div>

With this setup, a respondent will be allowed to upload a single video file. As illustrated below, the uploader will restrict to uploading video files only:

Maximum video size is 2 GB.

4: Downloading the Files

For any survey that includes an <image> element, an option for downloading "Uploaded Files" is automatically added to the data downloads menu.

Selecting this option will download a ZIP file containing all of the files uploaded with the following naming format: RECORD_QLABEL_FILENAME.

5: Device Support

There is currently a bug on iOS with Chrome browser for selecting items. Only the default Safari browser is supported.

Mobile OS support for file uploads varies, but newer smartphones are beginning to support these features with common file formats. Outlined below are operating systems that have been tested and the level of experience a respondent is expected to have.

  • iOS 6.0+: Excellent support. Default video format is MOV; image format is PNG.
  • Android 2.2+: Excellent support. Newer Android devices use MPG as default video format; 3GP for older versions. Image file format varies (PNG, JPG, BMP).
  • BlackBerry OS 6.0+: Good support and videos are uploaded in 3GP format. Image file format varies (JPG, GIF, BMP). Custom upload form styling is limited.
  • Windows Phone 7.0 - 8.0: Very poor support. Respondents will see the form upload, but nothing will happen and no warnings will display.
  • Feature phones: Older phones have good support for uploading files through a web browser, but the quality of the source image/video file is typically very poor. Some feature phones have proprietary video formats that are only viewable on similar devices, which would make viewing responses very difficult.