Search code examples
javascriptjqueryasp.netbootstrap-file-upload

Unable to customize bootstrap file-input

I am trying to implement bootstrap file input form GitHub in asp.net.

Below is my .aspc file code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

        <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="bootstrap-fileinput/js/fileinput.js"></script>
    <link href="bootstrap-fileinput/css/fileinput.css" rel="stylesheet" />
    <title></title>
     <script>
         $("#input-id").fileinput({
             'showUpload': false,
             'maxFileCount': 5,
             'showPreview': false,
             'mainClass': "input-group-lg"
         });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="input-id" type="file" class="file-loading" multiple>

    </div>
    </form>
</body>
</html>

It works. But I need to customize it.

  1. I do not want preview of files ('showPreview': false)
  2. I do not want to show Upload button ('showUpload': false)
  3. I want to limit number of files ('maxFileCount': 5)

I have used required plugins for customization.

But Still I get default preview/output.

Can someone help with this?

Thanks for your help.

Solution

  • Your code has minor errors. You need to add "multiple" directive to your input tag and change class to: "file-loading".

    <form id="form1" runat="server">
  <div>
    <input id="input-id" type="file" class="file-loading" multiple>
  </div>
</form>

    And here is a working demo: https://jsfiddle.net/16jut54d/