Add a bootstrap file upload button on the home page of jupyterhub

[meng-yu-github]

Hi !

I want to add a bootstrap file upload button on jupyterhub’s home page. I need the bootstrap-fileinput plug-in, but I don’t know how to import the components. What should I do？

Download address of bootstrap-fileinput is https://registry.npmjs.org/bootstrap-fileinput/-/bootstrap-fileinput-4.5.3.tgz

I tried to quote this, but it didn’t achieve the desired effect.

The following is the process and effect of reference：

/jupyterhub-1.4.2/package.json

  "dependencies": {
    "bootstrap": "^3.4.1",
    // I added this
    "bootstrap-fileinput": "^4.5.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.5.1",
    "moment": "^2.24.0",
    "requirejs": "^2.3.6"
  }

/jupyterhub-1.4.2/package-lock.json

// I added this
"bootstrap-fileinput": {
      "version": "4.5.3",
      "resolved": "https://registry.npmjs.org/bootstrap-fileinput/-/bootstrap-fileinput-4.5.3.tgz",
      "integrity": "sha512-l1SiH/vJmv9+kpjZQaod3aTGYhi/Q1ZypUqUIsOX8g0/LzGAPGzNBjWZngLmdkcEX8SWJd2VUbO85ijyLWI10A==",
      "requires": {
        "bootstrap": ">= 3.0.0",
        "jquery": ">= 1.9.0"
      }
    },

/jupyterhub-1.4.2/share/jupyterhub/templates/page.html

    <script src="{{static_url("components/requirejs/require.js") }}" type="text/javascript" charset="utf-8"></script>
    <script src="{{static_url("components/jquery/dist/jquery.min.js") }}" type="text/javascript" charset="utf-8"></script>
    <script src="{{static_url("components/bootstrap/dist/js/bootstrap.min.js") }}" type="text/javascript" charset="utf-8"></script>
<!-- It cannot be referenced here. An error will be reported after referencing -->
<!--    <script src="{{static_url("components/bootstrapfileinput/js/fileinput.min.js") }}" type="text/javascript" charset="utf-8"></script>-->
{% endblock %}
    <script>
      require.config({
          {% if version_hash %}
          urlArgs: "v={{version_hash}}",
          {% endif %}
          baseUrl: '{{static_url("js", include_version=False)}}',
          paths: {
            components: '../components',
            jquery: '../components/jquery/dist/jquery.min',
            bootstrap: '../components/bootstrap/dist/js/bootstrap.min',
            bootstrapfileinput: '../components/bootstrapfileinput/js/fileinput.min',
            moment: "../components/moment/moment",
          },
          shim: {
            bootstrap: {
              deps: ["jquery"],
              exports: "bootstrap"
            },
            bootstrapfileinput: {
              deps: ["jquery", "bootstrap"],
              exports: "bootstrapfileinput"
            },
          }
      });
    </script>

Error message after reference