Jquery fileupload: upload a file to a new folder with name changed in php

Question

Hi all: I have another challenge:

Im using Jquery fileuploader for php from blueimp: https://github.com/blueimp/jQuery-File-Upload

I'm modifying the code to implement the uploader in my web. I can use it correctly, but the documentation is poor about certain adds or mods:

I'm trying to modify the file UploaderHandler.php to create a folder with the username(unique), but I don't know WHERE to put my mkdir() function...

And want to upload the files changing the names to 1.txt,2.pdf,3.doc...etc,etc,etc

Any help?

PD: I'm thinking about 3 solutions:

1) put my mkdir() function in the login.php, and when the user logs in, it check the folder exists and it's empty... and each time he reloads certain .php files. Not the best solution, I guess.

2) put mkdir() function in get_upload_path from uploadHandler.php

3) put my rename() function in get_unique_filename from uploadHandler.php

EDIT: I just tryied the 2) option: I modified the UploadHandler.php.

It works, create the folder with username, and put the uploaded file in the folder. But in the AJAX I don't receive response, and don't create the response line:

UploadHandler.php:

function __construct($options = null, $initialize = true, $error_messages = null){
    ob_start();
    include('../conexion.php');
    include('../session/session.php');

    $url_subida = dirname($this->get_server_var('SCRIPT_FILENAME')).'/'.$usuario.'/';
    if(!is_dir($url_subida)){
        mkdir($url_subida, 0777);
    }
    else{
        error_log($url_subida);
    }

    $this->options = array(
        'script_url' => $this->get_full_url().'/',
        'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/'.$usuario.'/',
        'upload_url' => $this->get_full_url().'/'.$usuario.'/',
[...]

Response in AJAX in the HTML/php:

$(function(){
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data){
            $.each(data.result.files, function (index, file) {
                numarch++;
                $('<div id="archivo_'+numarch+'" />').appendTo('#files');
                if (file.error){
                    $('<img src="img/x.png" title="Error" alt="Error"/>').appendTo('#archivo_'+numarch);
                    $('<p class="text-danger"/>').text(file.error).appendTo('#archivo_'+numarch);
                }
                else{
                    var newFileDiv = $("<img title='Archivo subido OK' alt='Archivo subido OK'/>
                                        <p>"+file.name+"</p>
                                        <div id='borrarDiv' name='borrarDiv' class='btn btn-danger delete' onclick= borrar_archivo ('archivo_"+numarch+"','"+file.deleteUrl+"','"+file.deleteType+"','"+numarch+"')>
                                            <i class='glyphicon glyphicon-trash'></i>
                                        <span>Borrar</span></div>");
                    $('#archivo_'+numarch).append(newFileDiv);
                }
            });
        },
        progressall: function (e, data){
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').html(progress + '%');
            $('#progress .progress-bar').css('width',progress + '%');
        }
    });
});

Could you help me to get the response?

Answer 1

Ok, challenge completed:

First: how to upload files to a custom URL, changed by the name of the user:

In the implementation of jQuery Fileupload of BlueImp, you must use 2 files to control the uploads: index.php and uploadhandler.php.

The first creates the object:

error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');

$upload_handler = new UploadHandler();

You must change it to:

ob_start(); //get session

//include files to operate with database and session
include("../conection.php");
include("../session/session.php");

error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');

//add var $options. It is an array, you can see it in uploadhandler.php, in the constructor
//you modify the data: the upload_dir and the upload_url
$options = array('upload_dir'=>$usuario.'/', 'upload_url'=>$usuario.'/');
//then add the array to the constructor declaration
$upload_handler = new UploadHandler($options);

With this modification you can send to the constructor the variable upload path.

I hope this help you all.

EDIT: PROBLEM WITH WHITE SPACES

To fight the filename white spaces you must change this function:

protected function get_unique_filename($file_path, $name, $size, $type, $error, $index, $content_range){
    while(is_dir($this->get_upload_path($name))){
        $name = $this->upcount_name($name);
    }
    // Keep an existing filename if this is part of a chunked upload:
    $uploaded_bytes = $this->fix_integer_overflow(intval($content_range[1]));
    while(is_file($this->get_upload_path($name))){
        if ($uploaded_bytes === $this->get_file_size($this->get_upload_path($name))){
            break;
        }
        $name = $this->upcount_name($name);
    }

    //converts the white spaces in _
    $name= str_replace(" ", "_", $name);

    return $name;
}