-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Radio group with Custom Item Template
-
Drop-Down Menu
-
Dropdown: Load Data from Web Services
-
Dropdown with Custom Item Template
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature Pad
-
Multiple Text
-
Rating
-
Ranking
-
Comment
-
Image
-
Html
-
File
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Piped Text
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
VisibleIf
-
Simplify Cascade Conditions
-
Complex questions in expressions
-
Use custom function in expressions
-
Create custom condition/expression properties
-
Conditions in dynamic questions
-
Show/Hide choices in radiogroup/checkbox/dropdown
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Show/Hide columns/rows in matrix question
-
Show/Hide rows in matrix dropdown question
-
EnableIf
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage
Upload Files to the SurveyJS Storage
Survey.StylesManager.applyTheme("defaultV2");
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://api.surveyjs.io/private/Surveys/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://api.surveyjs.io/private/Surveys/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();
});
ReactDOM.render(
<SurveyReact.Survey model={survey} />, document.getElementById("surveyElement"));
<!DOCTYPE html>
<html lang="en">
<head>
<title>File Upload Question | Form Builder for Reactjs - SurveyJS</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.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-react-ui/survey-react-ui.min.js"></script>
<link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
</head>
<body style="margin: 0">
<div id="surveyElement" style="display:inline-block;width:100%;">
</div>
<div id="surveyResult"></div>
<script type="text/babel" src="./index.js"></script>
</body>
</html>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.
-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Radio group with Custom Item Template
-
Drop-Down Menu
-
Dropdown: Load Data from Web Services
-
Dropdown with Custom Item Template
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature Pad
-
Multiple Text
-
Rating
-
Ranking
-
Comment
-
Image
-
Html
-
File
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Piped Text
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
VisibleIf
-
Simplify Cascade Conditions
-
Complex questions in expressions
-
Use custom function in expressions
-
Create custom condition/expression properties
-
Conditions in dynamic questions
-
Show/Hide choices in radiogroup/checkbox/dropdown
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Show/Hide columns/rows in matrix question
-
Show/Hide rows in matrix dropdown question
-
EnableIf
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage