Survey.StylesManager.applyTheme("modern");
var json = {
"elements": [
{
"type": "file",
"title": "Please upload your files",
"name": "files",
"storeDataAsText": false,
"allowMultiple": true,
"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);
});
survey
.onClearFiles
.add(function (survey, options) {
// Code to remove files stored on your service
// SurveyJS Service doesn't allow to remove files
options.callback("success");
});
// survey
// .onUploadFiles
// .add((survey, options) => {
// var formData = new FormData();
// options
// .files
// .forEach(function (file) {
// formData.append(file.name, file);
// });
// var xhr = new XMLHttpRequest();
// xhr.responseType = "json";
// xhr.open("POST", "https://surveyjs.io/api/MySurveys/uploadFiles?accessKey=<YOUR ACCESS KEY from the https://surveyjs.io/Help/Index?apiType=private>");
// xhr.onload = function () {
// var data = xhr.response;
// options.callback("success", options.files.map(file => {
// return {
// file: file,
// content: data[file.name]
// };
// }));
// };
// xhr.send(formData);
// });
// survey
// .onDownloadFile
// .add((survey, options) => {
// var xhr = new XMLHttpRequest();
// xhr.responseType = "blob";
// xhr.open("GET", "https://surveyjs.io/api/MySurveys/files?name=" + options.content);
// xhr.onload = function () {
// var reader = new FileReader();
// reader.onload = function (e) {
// options.callback("success", e.target.result);
// };
// reader.readAsDataURL(new File([xhr.response], options.fileValue.name, {type: options.fileValue.type}));
// };
// xhr.send();
// });
survey.onUploadFiles.add(function(survey, options) {
options.files.forEach(function(file) {
var formData = new FormData();
formData.append('postId', 'cbd4f8b2-f9df-4eb0-99f7-2dcc61a41d03');
formData.append("file", file);
$.ajax({
url: "https://api.surveyjs.io/public/v1/Survey/upload/",
type: "POST",
success: function (data) {
var content = data.replace('dxsfile:', 'https://api.surveyjs.io/public/v1/Survey/file?filePath=');
if(data.indexOf("dxsimage:") === 0) {
content = data.replace('dxsimage:', 'https://api.surveyjs.io/public/v1/Survey/file?filePath=');
}
options.callback("success", [{
file: file,
content: content
}]);
},
error: function (error) {
},
async: true,
data: formData,
cache: false,
contentType: false,
processData: false,
timeout: 60000
});
});
});
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) {
var xhr = new XMLHttpRequest();
xhr.open("GET", 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.render("surveyElement");
<!DOCTYPE html>
<html lang="en">
<head>
<title>File question - upload to SurveyJS Service, Knockoutjs Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.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-knockout-ui/survey-knockout-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%;">
</div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>