Question

I am using the file uploader jquery plugin in order to have ajax file uploading on my site. However I just cannot figure out what is going wrong and why it doesn't work.

Plugin: http://fineuploader.com/index.html

My code:

I took the code directly from their demo:

$(document).ready(function() {
$fub = $('#fine-uploader-basic');
$messages = $('#messages');

var uploader = new qq.FileUploaderBasic({
  button: $fub[0],
  action: 'http://localhost/script/file_upload/upload_test',
  debug: true,
  allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
  sizeLimit: 204800, // 200 kB = 200 * 1024 bytes
  onSubmit: function(id, fileName) {
    $messages.append('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0"></div>');
  },
  onUpload: function(id, fileName) {
    $('#file-' + id).addClass('alert-info')
                    .html('<img src="client/loading.gif" alt="Initializing. Please hold."> ' +
                          'Initializing ' +
                          '“' + fileName + '”');
  },
  onProgress: function(id, fileName, loaded, total) {
    if (loaded < total) {
      progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
      $('#file-' + id).removeClass('alert-info')
                      .html('<img src="client/loading.gif" alt="In progress. Please hold."> ' +
                            'Uploading ' +
                            '“' + fileName + '” ' +
                            progress);
    } else {
      $('#file-' + id).addClass('alert-info')
                      .html('<img src="client/loading.gif" alt="Saving. Please hold."> ' +
                            'Saving ' +
                            '“' + fileName + '”');
    }
  },
  onComplete: function(id, fileName, responseJSON) {
    if (responseJSON.success) {
      $('#file-' + id).removeClass('alert-info')
                      .addClass('alert-success')
                      .html('<i class="icon-ok"></i> ' +
                            'Successfully saved ' +
                            '“' + fileName + '”' +
                            '<br><img src="img/success.jpg" alt="' + fileName + '">');
    } else {
      $('#file-' + id).removeClass('alert-info')
                      .addClass('alert-error')
                      .html('<i class="icon-exclamation-sign"></i> ' +
                            'Error with ' +
                            '“' + fileName + '”: ' +
                            responseJSON.error);
    }
  }
});
});

HTML:

<div id="fine-uploader-basic" class="btn btn-success">
  <i class="icon-upload icon-white"></i> Click to upload
</div>
<div id="messages"></div>

PHP:

public function upload_test() {
  $upload = move_uploaded_file('./user_files', $_FILES['qqfile']['tmp_name']);
  if($upload) {
    echo json_encode(array('success' => true));
  } else {
    echo json_encode(array('success' => false, 'error' => $upload));
  }
}

I think the problem is with the PHP, but I can't figure out what im doing wrong. Please help before I go insane.

Thank you.

Was it helpful?

Solution

i didn't read ur js and html part, but you need to change your PHP part. look at how he do it

fine-uploader PHP

OTHER TIPS

Remove action: 'http://localhost/script/file_upload/upload_test', and change with

request: {
            // path to server-side upload script
        endpoint: 'script/file_upload/upload_test/php.php'
         }

Also in your php.php file uncomment:

$allowedExtensions = array("jpeg", "jpg", "bmp", "png");
$sizeLimit = 10 * 1024 * 1024;
$uploader = new qqFileUploader($allowedExtensions, $sizeLimit);
$result = $uploader->handleUpload('uploads/'); //folder for uploaded files
echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);

In case it helps here is my setup:

-- jquery.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Fine Uploader Demo</title>
        <link href="client/fineuploader.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
      </head>
      <body>
        <div id="fine-uploader"></div>

        <script src="client/jquery.fineuploader-3.1.1.min.js"></script>
        <script>
          function createUploader() {
            var uploader = new qq.FineUploader({
              debug: true,  
              // Pass the HTML element here
              element: document.getElementById('fine-uploader'),
              // or, if using jQuery
              // element: $('#fine-uploader')[0],
              // Use the relevant server script url here
              // if it's different from the default “/server/upload”
              request: {
                endpoint: 'php.php'

              }
            });
          }

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

--- php.php (in the same folder as the jquery.html)

the following lines have been uncommented:

    // list of valid extensions, ex. array("jpeg", "xml", "bmp")
    $allowedExtensions = array();
    // max file size in bytes
    $sizeLimit = 10 * 1024 * 1024;
    //the input name set in the javascript
    $inputName = 'qqfile';

    $uploader = new qqFileUploader($allowedExtensions, $sizeLimit, $inputName);

    $result = $uploader->handleUpload('uploads/');
    header("Content-Type: text/plain");
    echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);

uploads folder has 777 permissions

MAMP NOTE: A stream_copy_to_stream() error will be thrown on upload. Solution: Change Line 58 in the php.php from $temp = tmpfile(); to $temp = fopen("php://temp", "wb"); //$temp = tmpfile();

hope this helps someone.

I saw a lot of people having trouble dealing with the server side script to handle the uploaded file. I needed some time to figure out how to write my own script to store the uploaded file in the database. This code example below will be very illustrative for those who are experiencing the same issue.

<?php
$file = $_FILES['qqfile'];
$uploadDirectory = 'uploads';
$target = $uploadDirectory.DIRECTORY_SEPARATOR.$file['name'];
$result = null;
if (move_uploaded_file($file['tmp_name'], $target)){
    $result = array('success'=> true);
    $result['uploadName'] = $file['name'];
} else {
    $result = array('error'=> 'Upload failed');
}
header("Content-Type: text/plain");
echo json_encode($result);

Of course, you have to adjust the name of your upload directory. It should work fine with the javascript below:

$(document).ready(function() {
    var uploader = new qq.FineUploader({
        element: $('#basicUploadSuccessExample')[0],
        debug: true,
        request: {
            endpoint: "server/php/example.php"
        }
    });
});

Just make sure you included all *.js in your html.

I was having a problem uploading to the folder as well. In order to get more information I changed the qqFileUploader.php line 59 to:

if (!is_writable($uploadDirectory) || !is_executable($uploadDirectory))
{
return array('error' =>"Server error. Uploads directory isn't writable or executable. CUR_DIR: " . getcwd() . " DIR: " . $uploadDirectory);
}

After doing that I saw the problem was that it was looking for the folder in my php directory as apposed to the root directory.

I changed $result = $uploader->handleUpload('up/'); to $result = $uploader->handleUpload('../up/'); problem was resolved for me.

"File uploader", I'm assuming?

Have you done any basic debugging, e.g. adding error handling to your php code? Your code is broke on multiple levels:

1) move_upload_file requires a destination FILE name. You're providing only a directory:

move_uploaded_file('/path/to/destination/on/server.txt', $_FILES['qqfile']['tmp_name']);

2) You're not checking of the upload acctually succeeded.

if($_FILES['qqfile']['error'] !== UPLOAD_ERR_OK) {
     die("UPload failed with error code " . $_FILES['qqfile']['error']);
}

The error codes are defined here: http://php.net/manual/en/features.file-upload.errors.php

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top