JSFiddle - React, Tailwind, and code Playground

by Lorenzo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/themes/fa/theme.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/locales/it.js"></script>
<input id="mytest" name="FileUpload[]" type="file">	      
<div id="errorBlock" class="help-block"></div>

JavaScript

$(document).ready(function() {
	
  $("#mytest").fileinput({
  	uploadUrl: "./upload.php",
  	uploadAsync: true,  	
    showPreview: false,    
    language: 'it',
    elErrorContainer: "#errorBlock"    

  })  	
  .on('filebatchpreupload', function(event, data, id, index) {   

    return {
      message: "wrong file",
      data: files
    };  	

  }) 
	  	  
});