Survey.StylesManager.applyTheme("modern");
var json = {
"elements": [
{
"type": "file",
"title": "Please upload your files",
"name": "files",
"storeDataAsText": false,
"allowMultiple": true,
"showPreview": false,
"maxSize": 102400
}
]
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(sender) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
function updatePreview(newValue, container) {
container.innerHTML = "";
(newValue || []).forEach(function(fileItem) {
var button = document.createElement("div");
button.className = "btn sv-btn sv-file__choose-btn sd-btn sd-btn--action";
button.innerText = "Download " + fileItem.name;
button.onclick = function() {
alert(JSON.stringify(fileItem));
}
container.appendChild(button);
});
}
survey
.onAfterRenderQuestion
.add(function (sender, options) {
if(options.question.getType() === "file") {
var container = document.createElement("div");
container.className = "my-preview-container";
var fileElement = options.htmlElement.getElementsByClassName("sv_q_file")[0];
if(!fileElement) {
fileElement = options.htmlElement.getElementsByClassName("sv-file__decorator")[0];
}
if (!fileElement) {
fileElement = options.htmlElement.getElementsByClassName("sd-file__decorator")[0];
}
fileElement.appendChild(container);
options.question.onPropertyChanged.add(function(question, options) {
if(options.name === "value") {
updatePreview(options.newValue, container);
}
});
updatePreview(options.question.value, container);
}
});
survey
.onUploadFiles
.add(function(survey, options) {
var formData = new FormData();
options
.files
.forEach(function (file) {
formData.append(file.name, file);
});
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://surveyjs.io/api/MySurveys/uploadFiles?accessKey=<your_access_key>");
xhr.onload = function () {
var data = JSON.parse(xhr.responseText);
options.callback("success", options.files.map(function(file) {
return {
file: file,
content: data[file.name]
};
}));
};
xhr.send(formData);
});
function detectIEOrEdge() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
var trident = ua.indexOf("Trident/");
var edge = ua.indexOf("Edge/");
return edge > 0 || trident > 0 || msie > 0;
}
survey
.onDownloadFile
.add(function(survey, options) {
alert("Download called");
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://surveyjs.io/api/MySurveys/files?name=" + options.content);
xhr.onloadstart = function(ev) {
xhr.responseType = "blob";
}
xhr.onload = function () {
var file;
if (detectIEOrEdge()){
file = new Blob([xhr.response], options.fileValue.name, { type: options.fileValue.type });
}
else {
file = new File([xhr.response], options.fileValue.name, { type: options.fileValue.type });
}
var reader = new FileReader();
reader.onload = function(e) {
options.callback("success", e.target.result);
};
reader.readAsDataURL(file);
};
xhr.send();
});
survey.data = {"files":[{"name":"TestTemplate.rtf","type":"","content":"00000000-0000-0000-0000-000000000000"},{"name":"pic_e1f5e6f901fe2fb17f78b7cfed600950.jpg","type":"image/jpeg","content":"00000000-0000-0000-0000-000000000000"}]};
var app = new Vue({
el: '#surveyElement',
data:
{
survey: survey
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>File question - custom preview, Vue Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="/DevBuilds/survey-core/survey.core.min.js"></script>
<script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
<script src="/DevBuilds/survey-vue-ui/survey-vue-ui.min.js"></script>
<link href="/DevBuilds/survey-core/modern.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="surveyElement" style="display:inline-block;width:100%;">
<survey :survey='survey' />
</div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
.my-preview-container {
margin-top: 2em;
}
.my-preview-container .sv-file__choose-btn {
margin: 0 1em;
}
.sd-file__decorator .my-preview-container {
position: absolute;
bottom: 0;
}
.sd-file__decorator .sv-file__choose-btn {
display: flex;
max-width: 500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn {
border: 1px solid lightgray;
cursor: pointer;
padding: 4px 8px;
display: inline-block;
}