Survey.StylesManager.applyTheme("modern");
var json = { questions: [
{ 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(result) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(result.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";
button.innerText = "Dounload " + 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];
}
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"}]};
ReactDOM.render(<Survey.Survey model={survey} />, document.getElementById("surveyElement"));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Disable built-in preview and render custom one, Reactjs Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.js"></script>
<script src="https://unpkg.com/react@16.5.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.5.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
<script src="/DevBuilds/survey-react/survey.react.min.js"></script>
<link href="/DevBuilds/survey-knockout/modern.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/babel" src="./index.js"></script>
</body>
</html>
.my-preview-container {
margin-top: 2em;
}
.my-preview-container .sv-file__choose-btn {
margin: 0 1em;
}
.btn {
border: 1px solid lightgray;
cursor: pointer;
padding: 4px 8px;
display: inline-block;
}