$formatSize is not defined/ $formatSize is not a function

[luke-kalen]

I'm looking through the documentation of yours and the npm package, and I do not see where formatSize is coming from, I want to find out if it is a method provided to me by the packages your imported or if I need to include them in the router or the store. Can you assist?

Thank you

[Maximus1000]

The package has a custom filter that the author added to the Vue2 version. See Issue 152:

While you probably have your own method to handle this kind of thing, e.g. create custom filters for Vue3, this is my approach. If anyone else has this issue and doesn't immediately know how to bind to globalProperties, maybe this will be helpful. So, for anyone who needs a quick fix..

Create a filters file, export default the formatSize method provided by package author in 152 above, something like this.

// formatFilters.js
export default { formatSize(size) { if (size > 1024 * 1024 * 1024 * 1024) { return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB' } else if (size > 1024 * 1024 * 1024) { return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB' } else if (size > 1024 * 1024) { return (size / 1024 / 1024).toFixed(2) + ' MB' } else if (size > 1024) { return (size / 1024).toFixed(2) + ' KB' } return size.toString() + ' B' } }

For me, I'll register these globally rather than just import (which you could do) in your upload component.
// main.js
import FormatFilters from "./filters/formatFilters"; app.config.globalProperties.$format = FormatFilters

If I want to have variations or other filters like formatSize for upload objects, I'm going to package these inside my $format object on globalProperties. Obvously, register formatSize as a filter or however you want.

With the above approach, the example's $formatSize filter will now work by accessing the global property $format like this:
$format.formatSize(file.size)

Best,
Marcus