Cart Buy Licenses Contact Support Login/Register
v 1.8.12
v 1.8.12
Overview Examples Docs Source Download

Upload file - File question

File uploading (type:'file')


                        
        
            Survey.StylesManager.applyTheme("modern");
        


            
                var json = { questions: [
    { 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(result) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(result.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",
      "/api/MySurveys/uploadFiles?accessKey=<your_access_key>"
    ); // https://surveyjs.io/api/MySurveys/uploadFiles
    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",
      "/api/MySurveys/files?name=" + options.content
    ); // "https://surveyjs.io/api/MySurveys/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("/api/MySurveys/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: "/api/MySurveys/uploadFiles?accessKey=<your_access_key>", // https://surveyjs.io/api/MySurveys/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: "/api/MySurveys/files?name=" + data[file.name] };
                })
            );
        },
        error: function (error) {
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
});
*/
        
            function onAngularComponentInit() {
            Survey.SurveyNG.render("surveyElement", {
            model: survey 
            });
            }
            var HelloApp =
            ng.core
            .Component({
            selector: 'ng-app',
            template: '<div id="surveyContainer" class="survey-container contentcontainer codecontainer"><div id="surveyElement"></div></div> '})
            .Class({
            constructor: function() {
            },
            ngOnInit: function() {
            onAngularComponentInit();
            }
            });
            document.addEventListener('DOMContentLoaded', function() {
            ng.platformBrowserDynamic.bootstrap(HelloApp);
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>File uploading (type:&#39;file&#39;), Angular2 Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://npmcdn.com/zone.js"></script>
    <script src="https://npmcdn.com/core-js@2.6.5/client/shim.min.js"></script>
    <script src="https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Rx.umd.js"></script>
    <script src="https://npmcdn.com/@angular/core@2.0.0-rc.5/bundles/core.umd.js"></script>
    <script src="https://npmcdn.com/@angular/common@2.0.0-rc.5/bundles/common.umd.js"></script>
    <script src="https://npmcdn.com/@angular/compiler@2.0.0-rc.5/bundles/compiler.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser@2.0.0-rc.5/bundles/platform-browser.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser-dynamic@2.0.0-rc.5/bundles/platform-browser-dynamic.umd.js"></script>
<script src="https://surveyjs.azureedge.net/1.8.12/survey.angular.min.js"></script>
    <link href="https://surveyjs.azureedge.net/1.8.12/modern.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body>
    
        <ng-app></ng-app>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>
settings

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

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

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

survey.getQuestionByName('image').imageHeight; survey.render();

survey.getQuestionByName('image').imageWidth; survey.render();

survey.getQuestionByName('image').maxSize; survey.render();