Ajax File upload using jQuery Form Plugin - invalid file error

Question

I'm trying to use the jQuery Form Plugin to perform an ajax file upload. I copied one of there examples and when I try the upload I get the following text appear:

100%
Invalid file

The console indicates:

XHR finished loading:

but nothing is uploaded.

I'm using XAMPP and have enabled permitions on my upload folder using chmod -R 777. The file I'm trying to upload is a .png. Below is the code:

index.html

<form action="upload.php" method="post" enctype="multipart/form-data">
   <input type="file" name="myfile"><br>
   <input type="submit" value="Upload File to Server">
</form>
<div class="progress">
   <div class="bar"></div >
   <div class="percent">0%</div >
</div>
<div id="status"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script src="ajax.js"></script>

ajax.js

$(document).ready(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 
});

upload.php

<?php
$allowedExts = array("gif", "jpeg", "jpg", "png");
$extension = end(explode(".", $_FILES["file"]["name"]));
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 20000)
&& in_array($extension, $allowedExts))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br>";
    echo "Type: " . $_FILES["file"]["type"] . "<br>";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

    if (file_exists("upload/" . $_FILES["file"]["name"]))
      {
      echo $_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
      }
    }
  }
else
  {
  echo "Invalid file";
  }
?>

Note I think the problem is occurring from the extension not the upload.php as I use this php for other uploads and it works fine.

Thanks for helping.

Answer 1

If the extension is fine, it could be a size problem: the script is checking $_FILES["file"]["size"] < 20000 .

I would try to tune that parameter depending on your needs. The size unit is kilobytes, therefore 20000KB ~ 20MB. Try checking if your image is bigger.

Also $extension = end(explode(".", $_FILES["file"]["name"])) could be a problem, depending on the file you are uploading: it's supposed to have an extension.

As a last try, check the value of $_FILES["file"]["type"] , maybe you have some mime-type error.

Answer 2

If it doesn't bother you to change the plugin then you must try some better plugin like this one i'm using it and its really too developer friendly and user friendly too.

Grab the full source code with demo files from here . i'm sure you will not have to make many changes to integrate this plugin to your existing code :) hope this helps you