title: Using bootstrap file input to upload a file through AJAX
body: <p>I am developing a website. My goal is to have the possibility to upload a file to the website and put it in a Blob like that I can use it in my javascript code. </p>
  
  <p>My problem is during the upload part: I use bootstrap file input by Krajee to upload the file. Here is my html part where I have the input tag to upload a file: </p>
  
  <pre><code> &lt;label class="control-label"&gt;Select File&lt;/label&gt;
   &lt;form id="form_file" enctype="multipart/form-data" method="post"&gt;
   &lt;input id="file-sign" type="file" class="file" data-show-preview="false"&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>And here is my javascript code: </p>
  
  <pre><code>var file = $("#file-sign");
  
  file.fileinput({
      uploadUrl: 'fileUpload.php', // using Ajax
      showCaption: true,
      showUpload: true,
      uploadLabel: "Submit",
      uploadClass: "btn btn-success",
      showRemove: false,
      uploadAsync: true,
      //maxFileSize: 4096,
      maxFilesNum: 1,
      maxFileCount: 1,
      multiple: false,
      showPreview: true
  });
  
  file.on('fileuploaded', function(event, data, previewId, index) {
      console.log('File uploaded triggered');
      console.log(data);
      console.log(data.response.data);
  });
  
  file.on('fileloaded', function(event, file, previewId, index, reader) {
      console.log("fileloaded");
  });
  </code></pre>
  
  <p>What I don't understand is how to get back the file in my javascript code.
  I read on the webpage of krajee that when I put the uploadUrl field, it will be an AJAX upload and I need to put the name of the file which will take in account the AJAX account. So I created a PHP file (I don't know anything in PHP. I write this file in searching on internet). Here it is:</p>
  
  <pre><code>&lt;?php
  
  header("Content-Type: text/plain");
  
  $nick = (isset($_FILES['file_data'])) ? $_FILES['file_data'] : NULL;
  
  if ($nick) {
      echo $nick;
  } else {
      echo "FAIL";
  }
  
  ?&gt;
  </code></pre>
  
  <p>And I think it is not correct because in my web console I have: 
  XMLHttpRequest cannot load file:///Users/.../fileUpload.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.</p>
  
  <p>I guess my message is a bit confusing, but to clear my problem is I don't know how to retrieve my file in the line of my javascript code: </p>
  
  <pre><code>file.on('fileuploaded'.......
  </code></pre>
  
  <p>I hope somebody can help me :)</p>