How to send additional data using PLupload?

Question

I'm using plupload to make an ajax file uploading. Now the plupload.Uploader class has many options but none are additional data.

For Example :

var uploader = new plupload.Uploader({
    runtimes : 'gears,html5,flash,silverlight,browserplus',
    browse_button : 'pickfiles',
    container : 'contact_container',
    max_file_size : '10mb',
    url : 'upload.php',
    flash_swf_url : '/plupload/js/plupload.flash.swf',
    silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
    filters : [
        {title : "Image files", extensions : "jpg,gif,png"},
        {title : "Zip files", extensions : "zip"}
    ],
    resize : {width : 320, height : 240, quality : 90}
});

What i'm trying to achive is i have a folder in my server where all the uploads are being saved. I neeed inside the folder to create a sub-folder to each user that have uploaded files there. How can i add data like id of the user to the instance of plupload.Uploader? Or if i'll wrap a form inside the container div, will i be able to see it in the $_REQUEST? Or is there some other way i can achive this?

score 78 · Accepted Answer · edited Feb 23 '13 at 09:51

78

Have you tried using the setting for multipart_params? Add an additional option to your plupload.Uploader like so:

var uploader = new plupload.Uploader({
    runtimes : 'gears,html5,flash,silverlight,browserplus',
    browse_button : 'pickfiles',
    container : 'contact_container',
    max_file_size : '10mb',
    url : 'upload.php',
    flash_swf_url : '/plupload/js/plupload.flash.swf',
    silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
    filters : [
        {title : "Image files", extensions : "jpg,gif,png"},
        {title : "Zip files", extensions : "zip"}
    ],
    resize : {width : 320, height : 240, quality : 90},
    multipart_params : {
        "name1" : "value1",
        "name2" : "value2"
    }
});

You will then need to process the values in the file that handles the upload (upload.php by default). I think the values are captured by $_POST but you can use $_REQUEST just to be sure.

I've used jQuery to assign values on the fly, so instead of "name1" : "value1" you can use something like "name1" : $("#name1").val(), where #name1 might be an input elsewhere on the page.

Plupload's documentation is a little sparse for some of these settings.

edited Feb 23 '13 at 09:51

Steven

19,224
47
152
257

answered Mar 05 '12 at 16:03

elconejito

926
7
6

26

For me "on the fly" meant during an event (and just before `uploader.start()`), I set `uploader.settings.multipart_params["name1"] = calcValue()`. – Jonno Mar 20 '13 at 12:38
1

Good article on storing params in queue. http://www.bennadel.com/blog/2506-storing-per-file-multipart-params-in-the-plupload-queue.htm – Ecropolis Oct 09 '14 at 13:46
Do you need double quotes? i.e. is it `"name1"` or `name1`? – henrywright Nov 09 '14 at 03:31
@hentrywright - For simple strings there's no difference :) – Sean Feb 02 '15 at 15:32
This is good, in the rare instance that you know the value of your post params at the early stage where you are defining and initializing your upload object. Often though, they may come from other form inputs. – Rob_vH Jul 15 '15 at 16:57

score 8 · Answer 2 · edited Jun 28 '17 at 21:11

8

You can use uploader.settings.multipart_params["name1"] = yourValue; but "name1" must be declared in uploader config :

multipart_params : {
    "name1" : "value1",
    "name2" : "value2"
}

edited Jun 28 '17 at 21:11

GDP

8,109
6
45
82

answered Apr 03 '15 at 08:26

pb ty

81
1
3

Well done. Able to listen to BeforeUpload and query form values and attach them to the previously declared mulitpart_params. I have confirmed this method works and works well. – Rob_vH Jul 15 '15 at 17:34

score 5 · Answer 3 · answered Feb 25 '17 at 21:24

5

If you need to dynamically add parameters on every file upload you can do this:

uploader.bind('BeforeUpload', function(up, file) {
    up.settings.multipart_params = {

        "parameter1": "value1",
        "paremeter2": "value2"

    };
});

answered Feb 25 '17 at 21:24

Agu Dondo

12,638
7
57
68

score 3 · Answer 4 · edited Jun 08 '16 at 19:19

3

You can also use

uploader.settings.url = "upload.php?param1=whatever"

and just pass it as a get variable.

edited Jun 08 '16 at 19:19

AJNeufeld

8,526
1
25
44

answered Jun 08 '16 at 19:08

Briscoe

31
1

score 0 · Answer 5 · answered Feb 09 '22 at 23:24

More up to date for 3.xx After files added use this as an example with DEPOSITImageUploader being the declared plupload change as you wish

BeforeUpload: function (up, files) {
            console.log("BEFORE UPLOAD ");
            var settings = DEPOSITImageUploader.settings;
            var params = settings.multipart_params;
            $.extend(up.settings.params, { deposit_id : $('#deposit_id').val() });

How to send additional data using PLupload?

5 Answers5

Linked