Disable built-in preview and render custom one, Reactjs Survey Library Example

File question - custom preview

Open in new window

Result
JavaScript
HTML
CSS
QR Code


                        
        
            Survey.StylesManager.applyTheme("modern");
        


            
                var json = {
  "elements": [
    {
      "type": "file",
      "title": "Please upload your files",
      "name": "files",
      "storeDataAsText": false,
      "allowMultiple": true,
      "showPreview": false,
      "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);
            });
        
function updatePreview(newValue, container) {
    container.innerHTML = "";
    (newValue || []).forEach(function(fileItem) {
        var button = document.createElement("div");
        button.className = "btn sv-btn sv-file__choose-btn";
        button.innerText = "Dounload " + fileItem.name;
        button.onclick = function() {
            alert(JSON.stringify(fileItem));
        }
        container.appendChild(button);
    });
}

survey
.onAfterRenderQuestion
.add(function (sender, options) {
    if(options.question.getType() === "file") {
        var container = document.createElement("div");
        container.className = "my-preview-container";
        var fileElement = options.htmlElement.getElementsByClassName("sv_q_file")[0];
        if(!fileElement) {
            fileElement = options.htmlElement.getElementsByClassName("sv-file__decorator")[0];
        }
        fileElement.appendChild(container);
        options.question.onPropertyChanged.add(function(question, options) {
            if(options.name === "value") {
                updatePreview(options.newValue, container);
            }
        });
        updatePreview(options.question.value, container);
    }
});


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://surveyjs.io/api/MySurveys/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) {
    alert("Download called");
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "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();
});


survey.data = {"files":[{"name":"TestTemplate.rtf","type":"","content":"00000000-0000-0000-0000-000000000000"},{"name":"pic_e1f5e6f901fe2fb17f78b7cfed600950.jpg","type":"image/jpeg","content":"00000000-0000-0000-0000-000000000000"}]};
        
            ReactDOM.render(
            <Survey.Survey model={survey}  />, document.getElementById("surveyElement"));

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Disable built-in preview and render custom one, Reactjs Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.js"></script>
        <script src="https://unpkg.com/react@16.5.0/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/react-dom@16.5.0/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-react/survey.react.min.js"></script>
    <link href="/DevBuilds/survey-core/modern.min.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/babel" src="./index.js"></script>

</body>
</html>


.my-preview-container {
  margin-top: 2em;
}

.my-preview-container .sv-file__choose-btn {
  margin: 0 1em;
}

.btn {
    border: 1px solid lightgray;
    cursor: pointer;
    padding: 4px 8px;
    display: inline-block;
}

File question - custom preview

Disable built-in preview and render custom one

Why We Use Cookies