Adding an input field to Uploadifive/Uploadify

Question

I've been searching and searching for the answer to how to add an input field and have the extra variable passed to the uploadifive.php file. However, I can't get any of the posted solutions to work and most of the time those solutions I did find were never listed as working or solved.

Can someone please tell me how I can get the contents of the input field passed to the uploadifive.php file?

Here is my HTML

<input type="text" name="student" id="student" placeholder="Your Student ID" value="" />
<input id="file_upload" name="file_upload" type="file" multiple="true">
<a style="position: relative; top: 8px;" href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a>

Here is the javascript

<?php $timestamp = time();?>
    $(function() {
        $('#file_upload').uploadifive({
            'auto'     : false,
            'method'   : 'post',
            'formData' : {
                'timestamp' : '<?php echo $timestamp;?>',
                'token'     : '<?php echo md5('unique_salt' . $timestamp);?>',
                'student'   : $('#student').val()
                      },
                'queueID'          : 'queue',
                'uploadScript'     : 'uploadifive.php',
                'onUploadComplete' : function(file, data) { console.log(data); }
            });
        });

Here is how I'm trying to use it in the php file but there isn't a value being passed

$_POST['student']

If anyone could tell me what I'm doing wrong our how to get this to work I'd really appreciate it.

Thanks, Gary

Please check my answer. If it's useful, set the answer as accepted or vote it up. Otherwise just write what's missing in the answer or what are the problems you're dealing with now and I'll try to help. — Jacek Barecki, Oct 11 '13 at 18:58

score 2 · Answer 1 · answered May 15 '14 at 06:59

The input we need to read remains

<input type="text" name="student" id="student" placeholder="Your Student ID" value="" />

Use this js as guide (i included only the options important for the example):

$('#my_file').uploadifive ({
    'formData': {
        //Some data we already know
        'timestamp' : "1400137111",
        'token'     : "a9b7ba70783b617e9998dc4dd82eb3c5"
     },

     //This will be executed before the upload process starts, so here's where
     //you will get the values in your form and will add them to formData.
     'onUpload': function(filesToUpload) {
         //Most of jQuery plugins, and luckily this one, uses the function jQuery.data
         //to save the settings we use on plugin's initialization.
         //In this case we can find those settings like this:
         var settings = $(this).data('uploadifive').settings;

         //Now we need to edit formData and add our input's value
         settings.formData.student = $('#student').val();

         //formData has the value readed from the input, so we store 
         //it again using jQuery.data
         $(this).data('uploadifive').settings = settings;

         //After this the plugin will perform the upload, reading the settings with
         //jQuery.data and our input's value will be present
     },

});

score 1 · Answer 2 · answered Sep 27 '13 at 08:13

1

Your code is not working properly because the value of #student input field is passed to uploadify formData when the page loads. In that moment the value of the field is empty so you get empty value in your PHP script.

What you need to do is read the value of the field exactly when the upload starts. To do so, you have to implement onUploadStart method of uploadify object.

Check the documentation for the details. You will also find there an example of setting formData dynamically.

answered Sep 27 '13 at 08:13

Jacek Barecki

429
3
7

You are correct, but the event you mentioned and the documentation you linked to was for Uploadify. Unfortunately, the API for Uploadifive changed quite a bit from Uploadify. I haven't had a chance to test it out yet, but the answer by @sepelin looks to be correct. – Jargs Jul 06 '16 at 23:31

Arun Killu · Answer 3 · 2013-09-27T08:27:15.370

0

$('#file_upload') is undefined at the moment when you call the function

you should consider using document.ready so that all dom elements are loaded and can be referenced using jquery

javascript:$('#file_upload').uploadifive('upload') of code is also unnecessary

please read the docs and see the demo in their [demo][1] they have defined the uploadifive

[1]: http://www.uploadify.com/demos/ at last of dom that is why they have not used document.ready

edited Sep 27 '13 at 08:27

answered Sep 27 '13 at 08:07

Arun Killu

13,581
5
34
61

$(document).ready() is already included in the code as $(). These pieces of code are equal ([documentation](http://api.jquery.com/ready/)) – Jacek Barecki Sep 27 '13 at 08:14

score 0 · Answer 4 · answered Jan 02 '14 at 21:18

    <?php $timestamp = time();?>
    function uploadFiles() {
        $('#file_upload').data('uploadifive').settings.formData = { 
            'title'     : $('#student').val(),
            'timestamp' : '<?php echo $timestamp;?>',
            'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
        };
        $('#file_upload').uploadifive('upload');
    }

score 0 · Answer 5 · edited May 23 '17 at 12:22

Forget about trying to add anything to the initialization, such as onUpload. Doesn't work. If you go to the Uploadifive forum, your will find several inconsistent answers from the author which seem to contain syntax errors and don't work either.

Remove formData altogether from the initialization and move it to a separate function that is called with the upload link. You will find a detailed explanation at this post

Adding an input field to Uploadifive/Uploadify

5 Answers5