Upload file using FormData

parse-file.js

 $('#file').val('');

 $("#file").change(function () {
     readFile($(this), this);
  });

 $('.js-action').click(function (e) {
      e.preventDefault();
      var $this = $(this);
      var $parent = $this.parent().parent();
      var input = $('#file');

      if (readFile($(input), this)) {

          var formData = new FormData($('form')[0]);

          $parent.append('<div class="pls-wait">Please wait... <span class="status"></span></div>');
          var $progress = $('<div class="progress"></div>');
          $parent.append($progress);
          $progress.progressbar({value: false});
          $this.slideUp();

          $.ajax({
              url: Site.url('/upload'),
              type: 'POST',
              data: formData,
              cache: false,
              dataType: 'json',
              processData: false, // Don't process the files
              contentType: false, // Set content type to false as jQuery will tell the server its a query string request
              success: function (data, textStatus, jqXHR) {
                  if (typeof data.error === 'undefined') {
                    $.ajax({
                      url: Site.url('/import_file'),
                      type: 'POST',
                      data: data,
                      cache: false,
                      dataType: 'json',
                      success : function(){
j                          $('.pls-wait, .progress, .progress-sub', $parent).remove();
                          $this.slideDown();
                          $('.file-selected').removeClass('notice error').addClass('success').html('File Imported Successfully');
                      }
                    });
                  }
                  else {
                      // Handle errors here
                      console.log('ERRORS: ' + data.error);
                      $('.file-selected').removeClass('notice').addClass('error').html('Error while importing, consult developer.');
                  }
                  $('#file').val('');
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  // Handle errors here
                  console.log('ERRORS: ' + textStatus);
                  $('.file-selected').removeClass('notice').addClass('error').html('Error while importing, consult developer.');
                  $('#file').val('');
              }
          });
      }
      return false;
  });

upload.php

<?php
// Get JSON Response
$fileName = $_FILES['file']['name'];
$fileTempName = $_FILES['file']['tmp_name'];
$fileType = $_FILES['file']['type'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);
$dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);

@move_uploaded_file($fileTempName, TMPPATH.$fileName);

echo json_encode([
    'name' => $fileName,
    'type' => $fileType,
    'dataUrl' => $dataUrl]
);
?>

view-upload.php

<?= Form::open('', array('method' => 'POST', 'enctype' => "multipart/form-data")) ?>
    <div class="grid_5 form-group">
        <div class="buttons-wrapper">
            <div class="fileUpload btn btn-primary">
                <span class="ss_sprite ss_database_save"> Choose File</span>
                <input type="file" name="file" id="file" class="upload" />
            </div>
            <div class="buttons-wrapper">
                <a href="<?php echo URL::site('utilities/import-excel'); ?>" class="button js-action">
                    <span class="ss_sprite ss_page_white_php"> Upload </span>
                </a>
            </div>
            <div class="clear"></div>
        </div>
        <br>
        <div class="file-selected"></div>
    </div>

    <div class="clear"></div>
<?= Form::close() ?>