title: Fileinput not working in my project
body: <p>I have a set up form to use fileinput with the code below.
  HTML the part where I included the files</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
  
      &lt;head&gt;
          &lt;!-- Bootstrap Core CSS --&gt;
          &lt;link  href="assets/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"/&gt;
  
          &lt;!--- JQuery ---&gt;
          &lt;script type="text/javascript" src="assets/jquery/jquery.min.js"&gt;&lt;/script&gt;
  
          &lt;!--- JQuery UI---&gt;
          &lt;script type="text/javascript" src="assets/jquery-ui/jquery-ui.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="assets/jquery-ui/jquery-ui.min.css"/&gt;
  
          &lt;!--- Bootstrap.js---&gt;
          &lt;script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
          &lt;!--- File Input ---&gt;
          &lt;link rel="stylesheet" type="text/css" href="assets/plugins/fileinput/css/fileinput.min.css"/&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;!--- File Input JS---&gt;
          &lt;script type="text/javascript" src="assets/plugins/fileinput/js/plugins/canvas-to-blob.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="assets/plugins/fileinput/js/plugins/sortable.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="assets/plugins/fileinput/js/plugins/purify.min.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="assets/plugins/fileinput/js/fileinput.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="assets/plugins/fileinput/js/jquery-fileinput/dist/jquery.fileinput.min.js"&gt;&lt;/script&gt;
  
  
  &lt;!-- avatar markup--&gt; 
  &lt;div id="kv-avatar-errors-1" class="center-block" style="width:800px;display:none;"&gt;&lt;/div&gt;
  &lt;div class="kv-avatar center-block" style="width:200px;"&gt;
  &lt;input type="file" id="productImage" name="productImage" class="file-loading" style="width:auto;"/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
      $(document).ready(function(){
       $('#productImage').fileinput({
         overwriteInitial: true,
         maxFileSize: 1500,
         showClose: false,
         showCaption: false,
         browseOnZoneClick: true,
         removeLabel: '',
         browseIcon: '&lt;i class="glyphicon glyphicon-folder-open"&gt;&lt;/i&gt;',
         removeIcon: '&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;',
         removeTitle: 'Cancel or reset changes',
         elErrorContainer: '#kv-avatar-errors-1',
         msgErrorClass: 'alert alert-block alert-danger',
         defaultPreviewContent: '&lt;img src="assets/images/sample.png" alt="Your 
  Avatar" style="width:160px"&gt;',
         layoutTemplates: {
          main2: '{preview} {remove} {browse}'
         },
         allowedFileExtensions: [
          "jpg", 
          "png", 
          "gif"
         ]
  
       }); 
      });
  </code></pre>
  
  <p>My prblem is this just puts a reload icon on my page without the actual fileinput features I have specified in my code.
  Firefox gives me this error: <strong>TypeError: $(...).fileinput is not a function[Learn More]</strong> I don't understand why that is because am expecting bootstrap fileinput to have setup that function already.</p>
  
  <p>Please can someone help me? Three days now I have been going through my code I don't know where I went wrong.</p>