javascript variable scope in this particular instance

Question

In javascript/jQuery, before a file upload plugin is called, a variable is set:

doc_type = "q";

Then, the plugin is initialized. Within the plugin options is: onSelect:, which is called when files are selected. Code looks like this:

var doc_type = "q";
$(function(){
    var project_num = $("#pnum").val();
    var uploadObj = $("#fileuploader").uploadFile({
        url: "upload_files_processor.php",
        method: "POST",
        onSelect: function(){
            doc_type = "W";
            //Or:
            //doc_type = $('#hidden_input').val();  <-- What I really need to do
            return true;
        },
            allowedTypes:"pdf,doc,docx,xls,xlsx,ppt,pptx,bmp,jpg,png,zip",
        fileName: "myfile",
        formData: {"project_num":project_num,"doc_type":doc_type},
        multiple: true,
        autoSubmit: true,
        showStatusAfterSuccess:false,
        onSuccess:function(files,data,xhr) {
            //Refresh documents table
        },
    });
}); //END document.ready()

Problem:

In the upload processor upload_files_processor.php, the received doc_type value is:

$doc_type = $_POST["doc_type"];  // q

How can I receive the value W ?

References: heyageek jquery upload file plugin website -- click on API & Options tab

`onSelect` happens **after** `formData: {"project_num":project_num,"doc_type":doc_type}` "How can I receive the value W ?" --- just put it in your `formData`? — zerkms, Apr 14 '14 at 22:21
You're right, that will work, but that's not what I need to do. The value W must be set in another function (when a particular DIV is clicked). Alternately, a hidden field is updated and that value (W) must be read from that hidden field. Either way will work, so long as W is transferred to the `upload_files_processor.php` (Question updated for clarity - thanks) — cssyphus, Apr 14 '14 at 22:23

score 2 · Answer 1 · answered Apr 14 '14 at 23:00

2

If you look at the Advanced tab of the api. There is an option called dynamicFormData which is executed and appears to be appended to the formdata right before sending.

dynamicFormData: function() {
    var data ={"doc_type":doc_type };
    return data;
},

This is what you need because doc_type will be evaluated right before it is sent rather than when it is created.

IF this works. I don't really have a way to test it

answered Apr 14 '14 at 23:00

Scott

1,648
13
21

I missed the obvious, thanks for the answer. I have asked the author (Ravi) to add this option to the API & Options section of his website, and I look forward to reviewing other answers you have contributed. – cssyphus Apr 16 '14 at 19:51

score 1 · Answer 2 · answered Apr 14 '14 at 22:55

Perhaps you can do it this way:

var formData = {
    project_num: null,
    doc_type: "q"
};

$(function() {

    formData.project_num = $("#pnum").val();

    var uploadObj = $("#fileuploader").uploadFile({
        url: "upload_files_processor.php",
        method: "POST",
        onSelect: function(){
            formData.doc_type = $('#hidden_input').val();
        },
        allowedTypes:"pdf,doc,docx,xls,xlsx,ppt,pptx,bmp,jpg,png,zip",
        fileName: "myfile",
        formData: formData,
        multiple: true,
        autoSubmit: true,
        showStatusAfterSuccess:false,
        onSuccess:function(files,data,xhr) {
            //Refresh documents table
        },
    });
});

I am not sure how the plugin works internally. If it serializes formData into some internal format, you could run into problems. However if it is simply setting the internal formData attribute to point to a provided object, then this should work. The reference to formData remains the same; you're just modifying a property of the object that is used.

I've tested this method and it works. Probably best to use the `dynamicFormData` setting since it's there (your code will be more robust). But it's worth making sure you understand why Vivin Paliath's suggestion can work. If you don't, have a look at the answers to this question: http://stackoverflow.com/questions/10231868/pointers-in-javascript — Jonathan, Apr 14 '14 at 23:34

score 1 · Accepted Answer · answered Apr 14 '14 at 23:25

In your code, instead of formData: {"project_num":project_num,"doc_type":doc_type}, use this:

dynamicFormData: function()
{
    return {
        project_num: $("#pnum").val(),
        doc_type: $('#hidden_input').val()
    };
},

And remove the lines var doc_type = "q"; and var project_num = $("#pnum").val()

javascript variable scope in this particular instance

3 Answers3