Cart Licenses Contact Support Online Creator Login/Register
Try
Free
v 1.9.38

File question - upload to SurveyJS Service


                        
        
            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();
    });
            
                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/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/javascript" src="./index.js"></script>

</body>
</html>

Tell Us What You Think

Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.

We'd really appreciate your feedback.

Start the Survey

Approximate time to complete: 2 min.