QUploader: extract filename from 'uploaded' event

[hhaensel]

I'm trying to use the 'uploaded' of QUploader event to trigger some action on the file.
Currently, the event only transmits the file.__key property plus some stats but not the name. The __key, however does not allow to extract the filename if the file starts with a number.

quasar/ui/src/composables/private.use-file/use-file.js

Line 130 in 4207741

file.__key = file.webkitRelativePath + file.lastModified + file.name + file.size

So I currently include a ref to the uploader component and use findIndex to determine correct file name.
Wouldn't it be a good idea to either add the filename in the emitted events or to use a separator like '-' or '_'

file.__key = file.webkitRelativePath + file.lastModified + '-' + file.name + file.size

[yusufkandemir]

file.__key is a Quasar addition to the native File object, what you are looking for is File.name.

[hhaensel]

Thanks for answering so quickly. It turned out that I forwarded the event object to my backend server but somehow the file.name was not included. Now that I used a client-side console.log(event), I know that I must debug my event forwarding.
Thanks a lot!

[hhaensel]

I did my homework and found that the standard File object is not stringified by JSON. Adding

File.prototype.toJSON = function() {
    return {
        lastModified: this.lastModified,
        name: this.name,
        size: this.size,
        type: this.type,
        webkitRelativePath: this.webkitRelativePath
    };
}

to my page solved the problem.

[hhaensel]

If you want to retain Quasar's user-defined props you can go with

File.prototype.toJSON = function() {
    const imageObject = {};

    for (const key in this) {
        const value = this[key];
        (typeof value !== "function") && (imageObject[key] = value);
    }

    return imageObject;
}