• Registered: 2012-03-15
  • Posts: 6

Topic: input to dynamically set the destination folder

Hello,
I try to set an html input on Plupload to create new destination folder each time it's necessary.

I'm using "multipart_params" to pass my variable to upload.php's file. If variable is static, it works fine, but if variable's dynamic, nothing works.

I have read that some people realize this, but i can't understand how they proceed.

Perhaps someone could help me to understand ?

Here is my code :

HTML
<input name="name" type="text" id="name" value="" />
JQUERY
<script type="text/javascript">
function $(id) 
    {
    return document.getElementById(id);    
    }
    var uploader = new plupload.Uploader(
    {
    runtimes : 'gears,html5,flash,silverlight,browserplus',
    browse_button : 'pickfiles',
    container: 'container',
    max_file_size : '10mb',
    multipart_params : 
    {
        'name1' : '#name'.val()
    },
    url : 'plupload/examples/upload.php/',
    resize : {width : 800, height : 800, quality : 100},
    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"}
    ]

    });





    uploader.bind('Init', function(up, params) 
    {
    $('environ').innerHTML = "<strong> " + params.runtime + "</strong>";
    });

    uploader.bind('FilesAdded', function(up, files) 
    {
    for (var i in files) 
    {
    $('filelist').innerHTML += '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') <b></b></div>';
    }
    });

    uploader.bind('UploadProgress', function(up, file) 
    {
    $(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
    });

    $('uploadfiles').onclick = function() 
    {
    uploader.start();
    return false;
    };

    uploader.init();
</script>

Thanks for all

  • Registered: 2012-02-10
  • Posts: 269

Re: input to dynamically set the destination folder

what exactly do you wanna mean dynamic variable? explain a scenario

LeandroJF's Website

  • Registered: 2012-03-15
  • Posts: 6

Re: input to dynamically set the destination folder

LeandroJF, my hero !
;-)
The scenario is the following :
An unique administrator access to an admin site where he can upload pictures with Plupload. As a photograph,  he must store his pictures by categorys (example : flowers, horse ride, cars,...). So, i imagine an input type text(1) outside the jquery (in the html on the top of the same page) where he types a name of category, then he uploads his images. 

On type category's name, autocomplete verify if entry already exists to avoid creating category,s name look like (flower,flowers, etc...)

On click on upload Button :
1. Pictures are uploaded into a folder named as the category's name type in the input(1). If it already exists, pictures are add to previous ones in it. 
2. Name of the category is store in a MySql table, with the name, iptc, width, etc...

I hope you understand my sick brain scenario mixed with my english made in France. 

Thanks again.

  • Registered: 2012-02-10
  • Posts: 269

Re: input to dynamically set the destination folder

so you wanna transfer the category typed for every file uploaded?

if yes, you need to set up the multipart_params on the beforeupload event:

uploader.bind('BeforeUpload', function(up) {
     up.settings.multipart_params = {param1 : 'value1', param2 : 'value2'};
});

LeandroJF's Website

  • Registered: 2012-03-15
  • Posts: 6

Re: input to dynamically set the destination folder

Hello LeandroJF,
Thanks for your answer.

In fact, my problem is about the multipart_params.
If my code is :

    multipart_params : 
    {
        'name1' : '$("input[name=name]").val()'
    },

... Plupload create a new folder named "$("input[name=name]").val()", uploads pictures in it and set up my MySql table field as "$("input[name=name]").val()/name_of_the_picture.jpg".

So, my setting works when i type folder name in hard beetween quotes.
But i need to set the name of the folder by the input.

So i search the web and discover that the correct syntax to call the value of my input should be :

    multipart_params : 
    {
        'name1' : $('input[name=name]').val()
    },

With this code, the pickfiles's button doesn't work (i can't say if the upload's button works anymore)

So my problem is (i think) to understand why the correct syntax create kind of conflict.

Is your solution available for this problem (and i'm too stupid to understand it) or is this another ?

I really thank you again of your care.

  • Registered: 2012-02-10
  • Posts: 269

Re: input to dynamically set the destination folder

post your code, preferably in www.jsfiddle.net, like:
http://jsfiddle.net/LeandroJF/VjeTk/

LeandroJF's Website