CODEWITHSUNDEEP
javascriptphpjqueryfile-upload
Hamza
Hamza

Reputation: 1583

Change Jquery file upload url dynamically

I am using jQuery File Upload in my project. I am having problem changing the URL dynamically i.e. I want to change the upload folder dynamically. I have seen some posts e.g.

jQuery File Upload: how to change the upload url dynamically

https://github.com/blueimp/jQuery-File-Upload/issues/2640

But these both tell to change "data.url" but data.url changes the folder where PHP files are uploaded.

I am able to solve this using sessions by changing these lines in upload handler.php from

'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/files/',
'upload_url' => $this->get_full_url().'/files/',

to

'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/'.$_SESSION['cid'].'/',
'upload_url' => $this->get_full_url().'/'.$_SESSION['cid'].'/',

But what happens if user has two different pages opened at a same time then it will upload all to the same folder because session variable wont be updated. Is there any possible solution to this using Javascript? so I wont need to worry about that. Any help will be much appreciated.

Thanks

Upvotes: 3

Views: 5899

Answers (3)

Saulo Santos
Saulo Santos

Reputation: 1

I use user directories. See: https://github.com/blueimp/jQuery-File-Upload/wiki/PHP-user-directories index.php

require('UploadHandler.php');

class CustomUploadHandler extends UploadHandler {
    protected function get_user_id() {
        @session_start();
        return $_SESSION['mySubDynamicDir'];
    }
}
$upload_handler = new CustomUploadHandler(array(
    'user_dirs' => true
));

Upvotes: 0

Hamza
Hamza

Reputation: 1583

The only solution is to solve it using sessions by changing these lines in upload handler.php from

'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/files/',
'upload_url' => $this->get_full_url().'/files/',

to

'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/'.$_SESSION['cid'].'/',
'upload_url' => $this->get_full_url().'/'.$_SESSION['cid'].'/',

Upvotes: 3

Nis
Nis

Reputation: 1477

This may not be the EXACT answer you might be looking for but following the steps can get you to your answer.

I had this kind of similar problem. I solved it by passing an extra variable to the script and change the upload_dir variable in php.

Your default index.php filw should look like this.

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

I modified it to listen for extra variable that I pass from JS. Look at the comments to see what is happening. Essentially what is happening is it makes sure that the extra variable called fuPath is received when call is made to this file (from javascript) and if not, do not upload the file. If the path is received then use it to get final destination based on web root directory.

    error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));
require('UploadHandler.php');
$urlHolder = NULL;


// This option will be used while uploading the file.
// The path will come as POST request.
if( isset($_POST['fuPath']) ) {
    // perform validations to make sure the path is as you intend it to be
    $urlHolder = filter_var($_POST['fuPath'], FILTER_SANITIZE_URL);
}
// This option will be used when deleting a file.
// The file details will come from GET request so have to be careful
else if( isset($_GET['fuPath']) ){
    // perform validations to make sure the path is as you intend it to be
    $urlHolder = filter_var($_GET['fuPath'], FILTER_SANITIZE_URL);
}
else{
    exit;
}
$options = array(
                'upload_dir'=>  $_SERVER['DOCUMENT_ROOT'] .'/' .$urlHolder,
//              'upload_url'=>'server/php/dummyXXXX',   // This option will not have any effect because thumbnail creation is disabled
                'image_versions' => array(),            // This option will disable creating thumbnail images and will not create that extra folder.
                                                        // However, due to this, the images preview will not be displayed after upload
            );

if($urlHolder){
    $upload_handler = new UploadHandler($options , true , null);
}

Now on JS side I have made the following changes.

var fullUpldPath = "";
// when file upload form is initialised then along with other options I also set the file upload path "fuPath".
// default will be empty string, so we can validate in php code.
$(localFormNames.fileForm).fileupload({
    formData: {fuPath: fullUpldPath}
});

Now back to HTML. I have created a dummy button (lets call #uploadFiles) which user clicks to upload images. This is required because I want to manipulate this fuPath variable in between the time when user clicks to upload and upload starts. The plugin's upload button (lets call it #pluginButton) is hidden.

So when user click #uploadFiles, I change my file upload path as required. Set the modified variable and then click the actual plugin's upload button.

// ending / is mandatory.
fullUpldPath = "assets/uploadedImages" + $("#imagename").val() + "/";
$(localFormNames.fileForm).fileupload({
    formData: {fuPath: fullUpldPath}
});
// Now manually trigger the file upload
$("#pluginButton").click();

Upvotes: 0

Related Questions