Fine-uploader uploading error

Question

So I'm trying to use fine-uploader(Minimal jQuery Demo) in my website to upload some pictures to the webserver Upload folder. However the upload is always failing and I have no idea why.

When I click "upload a file" and choose a file it starts uploading (progressbar starts filling) and when it gets to 100% it says "Upload failed" and gives this error in inspect element: "Upload failed" error (Bigger size image)

Here is upload.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fine Uploader - jQuery Wrapper Minimal Demo</title>
    <link href="css/fineuploader-3.6.3.css" rel="stylesheet">
  </head>
  <body>
    <div id="fine-uploader"></div>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/jquery.fineuploader-3.6.3.js"></script>
    <script>
      function createUploader() {
        var uploader = new qq.FineUploader({
          element: document.getElementById('fine-uploader'),
          request: {
            endpoint: 'upload_file.php'
          }
        });
      }

      window.onload = createUploader;
    </script>
  </body>
</html>

And upload_file.php:

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

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

?>

Might be a good idea to check if your upload directory exists, matches the directory in the script and permissions are set on that directory. — , Jul 23 '13 at 13:15
The directory exists but how do I check the permissions? and which permisions are needed in order to be able to upload to that directory? — Correia JPV, Jul 23 '13 at 13:24
If your server is windows you wouldn't need to set any permissions. If you're on Linux, you do. You should be able to change permissions using your FTP client. Here's an article on [File Permissions](http://www.elated.com/articles/understanding-permissions/) The Permissions should be 755. — , Jul 23 '13 at 13:34
Why are you adding a bounty without reporting back after Matt's suggestion? Your uploads are listed as failing because your server is not returning a valid JSON response. There is some issue with your server. What have you checked? — Ray Nicholus, Jul 25 '13 at 12:38
I've checked the upload directory premissions so the problem of not returning a valid JSON response must be on the code. — Correia JPV, Jul 25 '13 at 12:57
Yes, it is in your code. Your php is not returning a valid JSON response. — Ray Nicholus, Jul 25 '13 at 12:58
You need to actually return JSON, not just a simple string. Have you looked at the [existing PHP example](https://github.com/Widen/fine-uploader-server/tree/master/php) in the Widen/fine-uploader-server repo? If not, I suggest you have a look, and/or read up on [dealing with JSON in PHP](http://php.net/manual/en/book.json.php). — Ray Nicholus, Jul 25 '13 at 14:20
I've recently answered a very similar question - please take a look http://stackoverflow.com/questions/17554213/how-can-i-rename-multiple-files-on-upload/17618591#17618591 — Geo, Jul 31 '13 at 14:29
This question is linked to the below url http://stackoverflow.com/questions/15611183/error-when-attempting-to-parse-xhr-response-text — Saranya Sadhasivam, Aug 01 '13 at 06:56

score 2 · Answer 1 · answered Jul 26 '13 at 19:04

2

You're not returning a valid JSON response. An easy way to do this would be to use json_encode.

Put your current echo lines in an array, and echo that array after using json_encode, to get a valid JSON response.

answered Jul 26 '13 at 19:04

Aeveus

5,052
3
30
42

ROMMEL · Answer 2 · 2013-07-31T21:44:04.653

<?php

    $allowedExts = array("gif", "jpeg", "jpg", "png");
    $temp = explode(".", $_FILES["qqfile"]["name"]);
    $extension = end($temp);

    /**
    * This is just additional
    * 
    */

    $folder = dirname( __FILE__) ."/testuploads";

    if( !is_dir( $folder ))
    {
        @mkdir( $folder , 777 );
    }



    /**
    * I remove the for loop since we are expecting a single file.
    * The uploader supports multi uploads but what it exactly does is sending multiple request. See in the firebug.
    * 1 request per file.
    */
    if ((($_FILES["qqfile"]["type"] == "image/gif")
    || ($_FILES["qqfile"]["type"] == "image/jpeg")
    || ($_FILES["qqfile"]["type"] == "image/jpg")
    || ($_FILES["qqfile"]["type"] == "image/pjpeg")
    || ($_FILES["qqfile"]["type"] == "image/x-png")
    || ($_FILES["qqfile"]["type"] == "image/png"))
    && ($_FILES["qqfile"]["size"] < 50000000)
    && in_array($extension, $allowedExts))
      {
      if ($_FILES["qqfile"]["error"] > 0)
        {
            $msg['return_code'] = "Return Code: " . $_FILES["qqfile"]["error"] . "<br>";

        }
      else
        {
        /*
        * I put the extra messages into array so we can display it later in json format.
        */
        $msg['upload'] = "Upload: " . $_FILES["qqfile"]["name"] . "<br>";
        $msg['type'] = "Type: " . $_FILES["qqfile"]["type"] . "<br>";
        $msg['size'] = "Size: " . ($_FILES["qqfile"]["size"] / 1024) . " kB<br>";
        $msg['temp_file'] = "Temp file: " . $_FILES["qqfile"]["tmp_name"] . "<br>";




        if( $_FILES["qqfile"]["name"] <> "" )
        if (file_exists($folder."/" . $_FILES["qqfile"]["name"])) 
          {
          $msg['error_msg'] = $_FILES["qqfile"]["name"] . " already exists. ";

          }
        else
          {

          move_uploaded_file($_FILES["qqfile"]["tmp_name"],
          $folder."/" . $_FILES["qqfile"]["name"]); 
         $msg['success_msg'] = "Stored in: " .$folder."/" . $_FILES["qqfile"]["name"]; 
         /**
         * Since we get here we have to tell your handler that the process is success
         */
         $msg['success'] = "true"; 
          }
        }
      }
    else
      {
      $msg['error_msg'] = "Invalid file";
      $msg['success'] = "false"; 
      }
    /**
    * Display the result in json format.
    */
    print json_encode( $msg );
?>

First thing is remove it from the loop. Even though it supports multi-upload it only sends 1 per file. See in the fire bug. Then i used absolute path of the folder and then converted the response into JSON format. The code provided above has comments.

Thanks Ray Nicholus, i just accidentally hit the enter. =) – ROMMEL Jul 31 '13 at 21:45 — ROMMEL, Jul 31 '13 at 21:45

score 0 · Answer 3 · answered Aug 01 '13 at 02:19

0

Try to set your permissions to 777

answered Aug 01 '13 at 02:19

user2415711

11
4

Fine-uploader uploading error

3 Answers3