jQuery file upload, passing extra form data

Question

I want to pass an extra data to my database when people upload a pdf.

So I got 2 radio buttons for 2 types of documents. How can i add the 'doctype' to my database when i upload file. I have read this https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data this to upload, but i cant quite understand how to add the additional data

Thanks in advance.

This isnt all of the code, but just the part used for the upload.

    <div id="filesic" class="files"></div>
                                    <br />
                                   <input type="submit" id="submit_easy_docs" class="btn btn-success btn-lg btn-block"  value="Gem filer i easyPX"  />
                                  <input type="radio" name="doctype" value="1">praktik<br>
                                    <input type="radio" name="doctype" value="2">karakter</div>
                              </div>
                            </form>
                        </div>
                    </div>
             </section>
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->

       <script src="js/jquery-1.11.0.min.js"> </script>
        <script src="js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/app.js" type="text/javascript"></script>
          <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
        <script src="js/jquery.iframe-transport.js"></script>
        <!-- The basic File Upload plugin -->
        <script src="js/jquery.fileupload.js"></script>

        <script>
        $(document).ready(function(){
          $("#easy_upload").boxRefreshGetTestFromJour({
                    source: "ajax/easyPx_upload_fins_tests.php",
                            param: "#jourNo"
                });
                $.ajaxSetup ({
                    // Disable caching of AJAX responses
                    cache: false
                    });
                $("input[type='checkbox'], input[type='radio']").iCheck({
                    checkboxClass: 'icheckbox_minimal',
                    radioClass: 'iradio_minimal'
                    });
                $('#upload_f').hide();
                /*$("#jourNo").keydown(function(event){
                    if(event.keyCode == 13 || event.keyCode == 9){
                        $(".Seach-btn").click();
                    }
                });*/



$('#jourNo').keypress(function (e) {
  c = e.which ? e.which : e.keyCode;
  if (c == 13) {
    $(".Seach-btn").click();
    e.preventDefault();
    return false;    //<---- Add this line
  }
});
        });
       </script>
       <script>
        $(function () {
            'use strict';
            // Change this to the location of your server-side upload handler:
            var count = 1;
            var url = 'upload/php/',

            uploadButton = $('<button/>')
            .addClass('btn btn-primary')
            .prop('disabled', false)
            .text('Upload ...')
            .on('click', function () {
                var $this = $(this),
                    data = $this.data();
                $this
                    .off('click')
                    .text('Fortryd')
                    .on('click', function () {
                        $this.remove();
                        data.abort();
                    });
                data.submit().always(function () {
                    $this.remove();
                });
            });
            /*UPLOAD AF INDSCANNEDE DOKUMENTER*/
        $('#fileuploadic').fileupload({
            url: url,
            dataType: 'json',
            autoUpload: true,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png|pdf)$/i,
            maxFileSize: 5000000, // 5 MB
            // Enable image resizing, except for Android and Opera,
            // which actually support image resizing, but fail to
            // send Blob objects via XHR requests:
            disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator.userAgent),
            previewMaxWidth: 100,
            previewMaxHeight: 100,
            previewCrop: true
        }).on('fileuploadadd', function (e, data) {
            //$('#progressic').show();
            $('#progress-bar-procent').css('color','#000');
            data.context = $('<div/>').appendTo('#filesic');
            $.each(data.files, function (index, file) {
                var node = $('<p/>')
                        .append($('<span/>').text(file.name));
                node.appendTo(data.context);
            });
        }).on('fileuploadprocessalways', function (e, data) {
            var index = data.index,
                file = data.files[index],
                node = $(data.context.children()[index]);
            if (file.preview) {
                node
                    .prepend('<br>')
                    .prepend(file.preview);
            }
            if (file.error) {
                node
                    .append('<br>')
                    .append($('<span class="text-danger"/>').text(file.error));
            }
            if (index + 1 === data.files.length) {
                data.context.find('button')
                    .text('Upload')
                    .prop('disabled', !!data.files.error);
            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            if(progress == 100) $('#progressic').hide();
            else $('#progressic').show();
           $('#progress-bar-procent').html(Math.round(progress)+'%');
           if(Math.round(progress >58)){
              $('#progress-bar-procent').css('color','#fff');
           }
            $('#progressic .progress-bar').css(
                'width',
                progress + '%'
            );

        }).on('fileuploaddone', function (e, data) {

              var fileCon = $('#fileuploadic');

            $.each(data.result.files, function (index, file) {
                if (file.url) {

                    var link = $('<a>')
                        .attr('target', '_blank')
                        .prop('href', file.url)
                        .prop('id',index);
                    $(data.context.children()[index])
                        //.append('<a href="'+ file.url +'" target="_blank">'+file.name+'</a>')
                        .wrap(link);

                        $(data.context[index]).prepend('<button class="btn btn-danger btn-xs pull-right deleteimg" id="del_'+count+'" title="" data-toggle="tooltip" data-original-title="Slet"><i class="fa fa-times"></i></button>');
                        $(data.context[index]).append('<input type="hidden" id="file_'+count +'"  name="files[]" value="upload/php/files/'+file.name+'" />');
                        $('.deleteimg').on('click', function(event){
                            if($('input[name="files[]"]').length <= 2)  $('#submit_easy_docs').attr('disabled', true);
                            else $('#submit_easy_docs').attr('disabled', false);

                            $(this).next('a').remove();
                            $(this).next('input').remove();
                            $(this).remove();

                        });

                    //$('<p/>').html('<input type="hidden" id="file_'+count +'"  name="files[]" value="upload/php/files/'+file.name+'" />').appendTo(fileCon);
                    count = count +1 ;

                } else if (file.error) {
                    var error = $('<span class="text-danger"/>').text(file.error);
                    $(data.context.children()[index])
                        .append('<br>')
                        .append(error);
                }
            });
            $('#submit_easy_docs').removeAttr('Disabled'); 
        });     


        }).on('fileuploadfail', function (e, data) {
            $.each(data.files, function (index, file) {
                var error = $('<span class="text-danger"/>').text('File upload failed.');
                $(data.context.children()[index])
                    .append('<br>')
                    .append(error);
            });
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');

</script>

    </body>
</html>

Vanojx1 · Accepted Answer · 2015-07-20 14:29:48Z

3

try to add this event as shown in docs https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data#setting-formdata-on-upload-start

$('#fileuploadic').bind('fileuploadsubmit', function (e, data) {
    var doctype = $('input[name=doctype]:checked');
    // selecting each input with name "doctype" property checked true
    data.formData = {doctype: doctype.val()};

    /* 
       the action above set the formData option from the fileupload object
       and its the same as the following code... but its dynamically done
       $('#fileupload').fileupload({
            formData: {example: 'test'}
       }); 
    */
});

cit. from docs "formData object, formData: {example2: 'test'} will arrive on server-side as POST parameter"

edited Jul 20, 2015 at 14:29

answered Jul 20, 2015 at 13:50

Vanojx1

5,5842 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

DrCord Over a year ago

adding an explanation for what your code is doing will greatly improve the quality of your answer and make it much more useful for posterity.

Chornsyld Over a year ago

So on the server-side in my function i would do this?

public function save($testID,$documentFile,$doctype){  $doctype = $_GET['doctype'];  dbHelper::getQuery("[vvs_submit_document] '".$testID."','".$documentFileNew."','".$documentName."','".$doctype."'"); }

Vanojx1 Over a year ago

the docs says that extra params arrive inside the $_POST.... try to print the entire $_POST var to check if your param really exist

Chornsyld Over a year ago

I got it working, on server side i changed this. (Newbie to php) $doctype = $_GET['doctype']; out with $doctype = $_REQUEST['doctype']; So it works now, cheers.

Mohammad Mostafizur Rahman Over a year ago

Thanks a lot Vanojx1. Although my problem was a bit different, but your code snippet help me to figure out my solution. :)

|

moonvader · Accepted Answer · 2018-08-05 08:14:48Z

3

For people searching a way to send params while uploading images

Step 1

inside you JS call

$('#fileupload').fileupload({
  url: url,
  dataType: 'json',
  formData: {myParam: 10},
.....

Step 2 (example for PHP)

inside handle_file_upload function in your UploadHandler.php right before

return $file;

you can use

$_REQUEST['myParam']

answered Aug 5, 2018 at 8:14

moonvader

21.3k20 gold badges73 silver badges127 bronze badges

Collectives™ on Stack Overflow

jQuery file upload, passing extra form data

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related