You can include file uploads as a part of a Zingtree decision tree session. Some use cases include:
- Attaching a screenshot.
- Including a photo.
- Uploading a document.
Overview
Using Data Entry Fields, you can pick the File Upload field type. This allows you to include one or more files in the session data gathered by Zingtree. When the end-user uploads a file, here’s what happens:
- The file is copied from the end-user’s computer to a Zingtree file storage server.
- Zingtree assigns a variable to the URL where the new file resides.
Security note: Each file uploaded has a random 7 digit prefix or session ID attached to it, so that files with the same name aren’t overwritten, and the file names cannot easily be discovered by hackers.
How It Works
When the end-user reaches a node with a file upload, they will see something like this:
Clicking Upload Document File allows them to choose a file on their computer. Once a file is chosen, the button changes:
How to Set up File Uploads
When editing a node, do the following:
- Go to Data Collection Form Fields, and select Add Form Field:
- Choose File as the field type, and enter a variable name and label for the upload button:
It’s that simple! This gallery example shows how a simple file upload tree is built.
Secure Authenticated Downloads
After uploading a file, you can opt to create a link to it that is securely accessible via https and requires an agent login. The URL for this file would look like this:
https://zingtree.com/authenticated-download.php?var=file&session_id=50ea4a20ea534fabb467b3652ce14153
The parameters:
- var= is the name of the variable for the uploaded file URL.
- session_id= is the session ID. You would insert #session?# to display this.
Uploading and Displaying Images
If you're uploading an image file, and want to display it on another node, here's a trick. As an example, if the image upload variable is image1, you would add an image placeholder with an id of image1. For this example, you would put this HTML code (using code view) into the node that displays the image:
<img id="image1" class="img-responsive">