File Question Example

<!DOCTYPE html>
<html>
    <head>
        <title>File uploading (type:&#39;file&#39;), jQuery Survey Library Example</title>
        <script src="https://unpkg.com/jquery"></script>
        <script src="https://surveyjs.azureedge.net/dev/survey.jquery.min.js"></script>
        <link href="https://surveyjs.azureedge.net/dev/survey.css" type="text/css" rel="stylesheet"/>
        <link rel="stylesheet" href="./index.css">

    </head>
    <body>
        <div id="surveyElement"></div>
        <div id="surveyResult"></div>

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

    </body>
</html>

Survey
    .StylesManager
    .applyTheme("default");

  const json = {
    questions: [
      {
        type: "file",
        title: "Please upload your photo",
        name: "image",
        storeDataAsText: false,
        showPreview: true,
        imageWidth: 150,
        maxSize: 102400
      }
    ]
  };
  
  var survey = new Survey.Model(json);

  survey.onDownloadFile.add(function(sender, options) {
    setTimeout(() => {
      options.callback(
        "success",
        "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
      );
    }, 2000);
  });


  survey.onUploadFiles.add(function(sender, options) {
    setTimeout(() => {
      options.callback("success", [
        {
          file: options.files[0],
          content:
            "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
        }
      ]);
    }, 2000);
  });

survey
    .onComplete
    .add(function (result) {
        document
            .querySelector('#surveyResult')
            .innerHTML = "result: " + JSON.stringify(result.data);
    });

$("#surveyElement").Survey({model: survey});