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>