submit additional form data jquery file upload

Question

I'm having trouble getting $('.drop').attr('data-id') in formData:

$('.drop').fileupload({
    dataType: 'json',
    url: base_path + 'parallax/upload',
    autoUpload: false,
    replaceFileInput: false, // interferes w/ dropify
    formData: {
        id: $('.drop').attr('data-id'), // nothing
        stmt: '1', // works
        '{/literal}{$this->security->get_csrf_token_name()}{literal}': '{/literal}{$this->security->get_csrf_hash()}{literal}'
    },
    add: function (d, c) {
        console.log($(this).attr('data-id')); // works
        console.log($('.drop').attr('data-id')); // works
        console.log($('#fileupload').attr('data-id')); // works
        var a = [];
        var b = /\.(gif|jpe?g|png)$/i;
        if (c.originalFiles[0]['name'].length && !b.test(c.originalFiles[0]['name'])) {
            a.push('Not an accepted file type.');
        }
        if (c.originalFiles[0]['size'].toString().length && c.originalFiles[0]['size'] > maxsize) {
            a.push('Filesize is too big; try increasing post_max_size and/or upload_max_filesize.');
        }
        if (a.length > 0) {
            bootbox.alert(a.join(''));
        } else {
            start_time = new Date().getTime();
            c.submit();
        }
    },

According to the docs, additional form data can be added via:

$('#fileupload').fileupload({
    formData: {example: 'test'}
});

Which works for my csrf token and other things I manually define, however I cannot seem to get the data-id of the input field in formData. No errors are occurring, but I do see my request being sent without the id attribute - if I manually define it - it works. I can also get the property in the add function.

Whats going on?

BergListe · Accepted Answer · 2018-04-16 05:45:18Z

1

As far as I can see you are trying to add the value of $('.drop').attr('data-id') at the moment you initialize your fileuploadclass. At this time the attribute will most certainly be empty.

Try to set formaData.id prior to the actual upload using the fileuploadsubmit event as described in: https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data#setting-formdata-on-upload-start

$('.drop').bind('fileuploadsubmit', function (e, data) {
    data.formData.id = $('.drop').attr('data-id');       
    //or in your case `this` will work, too:
    //data.formData.id = $(this).attr('data-id');       
});

edited Apr 16, 2018 at 5:45

answered Apr 16, 2018 at 5:26

BergListe

4355 silver badges15 bronze badges

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

4 Comments

Alex Over a year ago

I'm currently doing it that way actually but I wanted to try it like above because I thought it was cleaner. Why isn't the variable available at that time? The input has that attribute before the fileupload class is initialized so I find it strange that it can't be added to formdata / accessed that way

BergListe Over a year ago

IMHO the event driven solution looks way cleaner as you can exactly tell when the attribute's value is collected.

Alex Over a year ago

But can you explain why it won't work in the above method?

BergListe Over a year ago

Not with the code snippet you're providing. Did you take a look at the data that gets transferred (eg. in Chrome DevTools/Network tab)? Could you please add an <input type="hidden" data-id="youchoose" /> and use its attribute's value in the fileupload/formData? Just for testing?

Collectives™ on Stack Overflow

submit additional form data jquery file upload

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related