Survey.StylesManager.applyTheme("modern");
        


            
                var json = { questions: [
    { 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(result) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(result.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>Upload files to SurveyJS Service. Note that files will be public accessible via the direct links, Knockoutjs Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
<script src="/DevBuilds/survey-knockout/survey.ko.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/javascript" src="./index.js"></script>

</body>
</html>