PHP Jquery File Upload // Username/Session Directo

Question

I have been messing around with Blueimp's Jquery File Upload for a couple weeks on PHP and I am encountering some issues. I am teaching myself how to program in PHP so I am still getting acclimated to how things work, so apologies for any confusion and I will attempt to clarify as best I can.

I need user uploads to be inserted into their specific username folders in the upload destination directory. I have followed the numerous writeups, answers and faqs for turning on said user directories (for this plugin) and at best, a folder is created for the session with a string of misc. characters, but all uploads regardless of the username go to the same folder, not the users' respective folder. Is it possible to tell the script to read and use the specific username/id/etc as a variable? I'm pretty sure it is, but currently I cannot find a clear-cut method. I have tried to keep my code as basic and similar to the released Blueimp versions for the sake of clarity.

So, here goes.

**Working:**User registers, info is inserted into database, a respective username folder is automatically created inside the upload directory and waits patiently to be filled with delicious files.

**Not working:**Upload script is not reading the username/variable to be used as the target folder name. When executed, "Error SyntaxError: Unexpected token <" is returned, and inserts the uploaded file into the parent "/uploads/" folder.

index.php (inside the original server/php/ directory)

error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');
$upload_handler = new UploadHandler();

UploadHandler.php

function __construct($options = null, $initialize = true, $error_messages = null) {
    $this->response = array();
    $this->options = array(
        'script_url' => $this->get_full_url().'/'.basename($this->get_server_var('SCRIPT_NAME')),
        'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/../../uploads/'.$username.'/',
        'upload_url' => $this->get_full_url().'/../../uploads/'.$username.'/',
        'user_dirs' => false,
        'mkdir_mode' => 0755,
        'param_name' => 'files',

My understanding is that the $username variable needs to be defined, but where and how is where I'm lost. I can have the page call and print the username, id, email, and pretty much anything else -on- the page, but the variable/token is not translating into the upload directory script.

Thanks in advance for any input.

Answer 1

You will need to edit your index.php to set the $username variable.

Update the code to this:

require('UploadHandler.php');
$upload_handler = new UploadHandler($username);

In the UploadHandler.php file, update the __construct to this:

function __construct($username, $options = null, $initialize = true, $error_messages = null) {

It should now capture the $username being passed through.

Answer 2

You can try to restore the original server/php/UploadHandler.php then follow this article in the wiki:

jQuery-File-Upload wiki - PHP-user-directories

"To provide your own implementation, you can override the get_user_id method"

edit your index.php:

<?php

error_reporting(E_ALL | E_STRICT);

require('UploadHandler.php');

class CustomUploadHandler extends UploadHandler {

    protected function get_user_id() {
        return $_REQUEST['username'];
    }

    protected function set_additional_file_properties($file) {
        $file->deleteUrl = $this->options['script_url']
            .$this->get_query_separator($this->options['script_url'])
            .$this->get_singular_param_name()
            .'='.rawurlencode($file->name)
            .'&username='.$_REQUEST['username']
            ;
        $file->deleteType = $this->options['delete_type'];
        if ($file->deleteType !== 'DELETE') {
            $file->deleteUrl .= '&_method=DELETE';
        }
        if ($this->options['access_control_allow_credentials']) {
            $file->deleteWithCredentials = true;
        }
    }   

}

$upload_handler = new CustomUploadHandler(array(
    'user_dirs' => true,
));

and main.js

$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: 'server/php/index.php?username=' + username,
    });

    // Enable iframe cross-domain access via redirect option:
    $('#fileupload').fileupload(
        'option',
        'redirect',
        window.location.href.replace(
            /\/[^\/]*$/,
            '/cors/result.html?%s'
        )
    );

        // Load existing files:
        $('#fileupload').addClass('fileupload-processing');
        $.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: $('#fileupload').fileupload('option', 'url'),
            dataType: 'json',
            context: $('#fileupload')[0]
        }).always(function () {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, $.Event('done'), {result: result});
        });

});

}