How to submit files using request via Bootstrap File Input - Krajee?

edit

To submit files using request via Bootstrap File Input - Krajee, follow these steps:

1. Set up the HTML form:

   <form id="file-upload-form">
      <input id="input-1" name="input[]" type="file" class="file" data-show-preview="false" multiple>
      <button type="submit" class="btn btn-primary">Submit</button>
   </form>
   

2. Include the required files:

   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput.min.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.min.js"></script>
   

3. Initialize the file input plugin:

   $("#input-1").fileinput({
      showUpload: false,
      allowedFileExtensions: ["jpg", "png", "gif"]
   });
   

4. Handle form submit:

   $("#file-upload-form").submit(function(e){
      e.preventDefault();
      var formData = new FormData($(this)[0]);
   
      $.ajax({
          url: "/submit-form",
          type: "POST",
          data: formData,
          async: false,
          success: function(response){
              console.log(response);
          },
          cache: false,
          contentType: false,
          processData: false
      });
   
      return false;
   });
   

Note: Replace /submit-form with your server-side script URL where the form data will be processed.