Jquery File upload Blue Imp - setting dynamic upload url

Question

I am using Jquery upload file library and am having difficulty setting the directory to write the files to. If I use the standard location as set in the examples the files are uploaded. The following code works:

 $('#fileupload').fileupload({
            disableImageResize: false,
            autoUpload: false,
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true}, 
             //url: currentDir
            url: '/assets/plugins/jquery-file-upload/server/php/'
        });

But If I try to change the url as follows:

    var currentDir = window.location.pathname;

return {
    //main function to initiate the module
    init: function () {

         // Initialize the jQuery File Upload widget:
        $('#fileupload').fileupload({
            disableImageResize: false,
            autoUpload: false,
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true}, 
             url: currentDir
            //url: '/assets/plugins/jquery-file-upload/server/php/'
        });

I receive this error: SyntaxError: Unexpected token <

I've also looked at implementing this solution: http://www.eliwheaton.com/web-development/dynamically-set-upload-directory-using-blueimp-jquery-file-upload

But no joy. Any ideas?

Thanks

Try this: { var currentDir = null; $(function(){ currentDir = window.location.pathname; //rest of code }); } — Mr.TK
– Mr.TK, Commented May 27, 2014 at 14:36
I thinkt that you shall give us whole js code and if it's within HTML it would be requested as well. :) — Mr.TK
– Mr.TK, Commented May 28, 2014 at 8:36

Nis · Accepted Answer · 2014-06-29 23:10:15Z

The problem is URL variable is to locate the PHP script's location. It is not the location where the files will be uploaded.

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();

Collectives™ on Stack Overflow

Jquery File upload Blue Imp - setting dynamic upload url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related