Cart Licenses Contact Support Online Creator Log in/Register
Try
Free
v 1.9.43

Upload file - File question


                        
        
            Survey.StylesManager.applyTheme("modern");
        



                
                    var json = {
  "elements": [
    {
      "type": "file",
      "title": "Please upload your photo",
      "name": "image",
      "storeDataAsText": false,
      "showPreview": true,
      "imageWidth": 150,
      "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);
            });
        
// You can store file id as a content property of a file question value
// In this case you should handle both `onUploadFiles` and `onDownloadFile` events

survey.onUploadFiles.add(function(survey, options) {
    var formData = new FormData();
    options.files.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>"
    );
    xhr.onload = function() {
        var data = JSON.parse(xhr.responseText);                                           
        options.callback("success",
            options.files.map(function(file) {
                return { file: file, content: data[file.name] };
            })
        );
    };
    xhr.send(formData);
});

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",
      "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);
     };
    xhr.send();
    // You can use fetch for modern browsers
    //fetch("https://api.surveyjs.io/private/Surveys/files?name=" + options.content)
    //  .then(function(response) {
    //    return response.blob();
    //  })
    //  .then(function(blob) {
    //    var reader = new FileReader();
    //    reader.onload = function(e) {
    //        options.callback("success", e.target.result);
    //    };
    //    reader.readAsDataURL(new File([blob], options.fileValue.name, { type: options.fileValue.type }));
    //    //options.callback("success", URL.createObjectURL(blob));
    //  });
});


// You can store file download url as a content property of a file question value
// In this case you can handle the `onUploadFiles` event only
// This example uses jQuery aiax function
/*
survey.onUploadFiles.add(function(survey, options) {
    var formData = new FormData();
    options.files.forEach(function(file) {
        formData.append(file.name, file);
    });
    $.ajax({
        url: "https://api.surveyjs.io/private/Surveys/uploadFiles?accessKey=<your_access_key>", // https://api.surveyjs.io/private/Surveys/uploadFiles
        type: "POST",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', function (event) {
                    var percent = 0;
                    var position = event.loaded || event.position;
                    var total = event.total;
                }, false);
            }
            return myXhr;
        },
        success: function (data) {
            options.callback("success",
                options.files.map(function(file) {
                    return { file: file, content: "https://api.surveyjs.io/private/Surveys/files?name=" + data[file.name] };
                })
            );
        },
        error: function (error) {
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
});
*/
        
            ReactDOM.render(
            <SurveyReact.Survey model={survey}  />, document.getElementById("surveyElement"));
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Upload file - File question, 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/modern.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>
Settings

survey.getQuestionByName('image').showPreview = yourValue;

survey.getQuestionByName('image').allowMultiple = yourValue;

survey.getQuestionByName('image').storeDataAsText = yourValue;

survey.getQuestionByName('image').imageHeight;

survey.getQuestionByName('image').imageWidth;

survey.getQuestionByName('image').maxSize;

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.