Removing whitespace from filename in jQuery BlueImp uploader

I am using the BlueImp jQuery Fileupload, https://github.com/blueimp/jQuery-File-Upload/

We have had some issues with files that include whitespaces, leading and trailing. Trailing is an issue (I think) primarily with files uploaded from OSX as the file extension is by default omitted resulting in uploaded files looking like: "test .jpg" or " test. jpg" which then causes issues down the line.

I figured that would be a rather easy fix, just need to do some trimming of the name values in data.files...

But it was not, and I have not found anything directly related on the web. Maybe my Google Fu is super weak today..

I've tried using the callback methods at https://github.com/blueimp/jQuery-File-Upload/wiki/Options#callback-options like so:

 $('#fileupload').fileupload({
    submit: function (e, data) { 

    // lotsacode...

    }

    }).bind('fileuploadadd', function (e, data) {

        $.each(data.files, function (index, file) {
                file.name = $.trim(file.name)
            });
        });

This however gives me:

Uncaught TypeError: Cannot set property name of # which has only a getter

I've also tried to modify the core functions _onAdd, _onChange and more but I get the same issue.

Looking around at Stackoverflow for a solution or idea on where I was going wrong, I found solutions that seemed to work if you were working with the UploadHandler-class via PHP- but we're not in a position where we want to consider this. So I am wondering if there is anything obvious or something not so obvious that I am missing?

Versions: jQuery File Upload Plugin 5.17.1, jQuery File Upload User Interface Plugin 6.9.5

I do not need to add extra data to the object, but modify the default file data.

Best regards Tomas

Solution

As per their documentation, shouldn't you chain your sanitation in a processQueue instead of binding it to a callback?

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#processqueue

I'm thinking that you might be binding to the selected jQuery element and not to the fileupload or that by the time you get the callback the files have been processed.

What kind of values does a console.log(file) give out in the each loop? i.e.

$.each(data.files, function (index, file) {
                //file.name = $.trim(file.name)
                console.log(file)
     });
});