Search code examples
javascriptjquerycodeigniterblueimp

How can send I session data in the Blueimp jquery file uploader?


I'm trying to use codeigniter and the Blueimp Jquery File Upload plugin for the project I'm currently working on: Filtering images for display based on an authenticated user. I need to be able to change the path of the uploads, based on a GET variable on the page that contains the plugin. I want it to connect to a separate folder for each user.

To do this I believe I need to accomplish only one more step: make the codeigniter session ID, which i have in a hidden field in the form available to a server side script in cases where the $_request, $_POST, or $_GET arrays are not set.

from googling around it appears that Jquery File Upload plugin: Dynamically change upload path? is exactly what I am trying to do.

The only problem is that the last step is not explained! I am brand new to JS, Jquery and ajax. Could someone explain how to use jquery to make the session ID available in a php script.

as a hint the blueimp author wrote the following in https://github.com/blueimp/jQuery-File-Upload/issues/241

Have a look at example/application.js, the second section is commented with // Load existing files: There, add + '?ext=VAR1&nota=VAR2' behind $('#file_upload').fileUploadUIX('option', 'url') and adjust VAR1 and VAR2 to your desired path variables.

The code in the current main.js file is

$('#fileupload').each(function () {
        var that = this;
        $.getJSON(this.action, function (result) {
            if (result && result.length) {
                $(that).fileupload('option', 'done')
                    .call(that, null, {result: result});
            }
        });
    });

Thanks,

Bill


Solution

  • Here's a chunk of code I use to run the blueimp upload and is running on a production site. As you can see, I don't care about appending any session data on at all. I simply tell it the url to upload to and then some callback methods to be called as it does its work. The one caveat I'll add here is that I am using only the basic plugin which I am styling myself.

    $("#file").fileupload({
            dataType: 'json',
            url: "/Upload/Photo"
            start: function () {
                progress.show();
            },
            progress: function (e, data) {
                progress.progressbar({ value: (data.loaded / data.total) * 100 });
            },
            done: function (e, data) {
                progress.hide();
            },
            fail: function (e, data) {
                progress.hide();
                var message = "An error was encountered!";
    
                // Use the simplemodal plugin to show my error
                modal.showError(message);
            }
        });