Cart Licenses Contact Support Online Creator Log in/Register
Try
Buy
v 1.9.51

File question - delayed upload


                        
        
            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);
            });
        
// This global variable is used for storing choosen files while survey is not completed
var temporaryFilesStorage = {};

survey
    .onComplete
    .add(function (result) {
        // In this handler we upload the files to the server from the temporary storage

        // alert("Uploading files");
        console.log("Uploading files");
        // You need here to wait all files to be uploaded
        // And only then show the results
        function onFilesUploaded() {
            document
                .querySelector('#surveyResult')
                .textContent = "Result JSON:\n" + JSON.stringify(result.data, null, 3);
        }

        // temporaryFilesStorage keys are the question names
        var questionsToUpload = Object.keys(temporaryFilesStorage);

        var uploadedQuestionsCount = 0;
        questionsToUpload.forEach(function(questionName) {
            var question = survey.getQuestionByName(questionName);
            var filesToUpload = temporaryFilesStorage[questionName];

            var formData = new FormData();
            filesToUpload
                .forEach(function (file) {
                    formData.append(file.name, file);
                });
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://api.surveyjs.io/private/Surveys/uploadFiles?accessKey=<your_access_key>"); // https://api.surveyjs.io/private/Surveys/uploadFiles
    xhr.onload = function () {
    var data = JSON.parse(xhr.responseText);
    question.value = filesToUpload.map(function(file) {
    return {
    name: file.name,
    type: file.type,
    content: data[file.name]
    };
    });
    uploadedQuestionsCount++;
    // If all files has been uploaded then show the results
    if(uploadedQuestionsCount === questionsToUpload.length) {
    onFilesUploaded();
    }
    };
    xhr.onerror = function () {
    question.value = [{name: "file1", type: "image/jpeg", content: "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"}];
    uploadedQuestionsCount++;
    // If all files has been uploaded then show the results
    if(uploadedQuestionsCount === questionsToUpload.length) {
    onFilesUploaded();
    }
    };
    xhr.send(formData);

    });

    // If nothing to upload then show the results
    if(0 === questionsToUpload.length) {
    onFilesUploaded();
    }

    });

    survey
    .onClearFiles
    .add(function(survey, options) {
    //alert("Clear files: " + options.fileName + " From question: " + options.name);
    console.log("Clear files: " + options.fileName + " From question: " + options.name);
    // Get temp files for this question
    var tempFiles = temporaryFilesStorage[options.name];
    var fileInfoToRemove = tempFiles.filter(function(file) { return file.name === options.fileName; })[0];
    if(fileInfoToRemove !== undefined) {
    var index = tempFiles.indexOf(fileInfoToRemove);
    tempFiles.splice(index, 1);
    }
    // Code to remove temporary stored files
    // Write your own code to remove files fron server if they were loaded already
    // and then invoke success and allow to proceed further
    options.callback("success");
    });

    survey
    .onUploadFiles
    .add(function(survey, options) {
    // Add files to the temporary storage
    if(temporaryFilesStorage[options.name] !== undefined) {
    temporaryFilesStorage[options.name].concat(options.files);
    } else {
    temporaryFilesStorage[options.name] = options.files;
    }

    // Load previews in base64. Until survey not completed files are loaded temporary as base64 in order to get previews
    var question = survey.getQuestionByName(options.name);
    var content = [];
    options.files.forEach(function(file) {
    let fileReader = new FileReader();
    fileReader.onload = function(e) {
    content = content.concat([
    { name: file.name, type: file.type, content: fileReader.result, file: file }
    ]);
    if (content.length === options.files.length) {
    //question.value = (question.value || []).concat(content);
    options.callback("success", content.map(function(fileContent) {
    return {
    file: fileContent.file,
    content: fileContent.content
    };
    }));
    }
    };
    fileReader.readAsDataURL(file);
    });
    });

    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("onDownloadFile called. Content is " + options.content);
    console.log("onDownloadFile called. Content is " + options.content);

    // We simply use content in this sample
    if(options.content.indexOf("base64") !== -1 || options.content.indexOf("http") !== -1) {
    options.callback("success", options.content);
    return;
    }

    // In real appliaction you need to handle whether content is ready to be used (it's base 64 encoded or an URL)
    // And decide whether to leave it as is or do a roundtrip to server for the real preview content url/data
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.surveyjs.io/private/Surveys/files?name=" + options.content); // "https://api.surveyjs.io/private/Surveys/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);
    };
    });

    survey.data = {
    files: [{name: "giraffe.jpg", type: "image/jpeg", content: "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"}]
    };
        
            ReactDOM.render(
            <SurveyReact.Survey model={survey}  />, document.getElementById("surveyElement"));
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>File question - delayed upload, Reactjs Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <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>