Uppy: Missing file.progress.bytesTotal property

[makeitrein]

Hey Transloadit - thx for writing Uppy, very excited to see how it develops over the next year!

Running into an issue where I am getting the following error: Uncaught (in promise) TypeError: Expected a number, got number when I click the blue cloud upload button.

A bit cryptic, but I chased it down to the DashboardUI render function, specifically this part:

var totalSize = 0;
var totalUploadedSize = 0;
 inProgressFilesArray.forEach(function (file) {
console.log(file);
totalSize = totalSize + **file.progress.bytesTotal**;
totalUploadedSize = totalUploadedSize + file.progress.bytesUploaded;
 });
 totalSize = prettyBytes(totalSize);
  totalUploadedSize = prettyBytes(totalUploadedSize);

When I upload a file, at least using the Multipart plugin, my file is missing the bytesTotal attribute... here's a screencap of the data it has...

And here's a screencap of the entire error.

This in the context of a React application, so perhaps something funky is going on with a re-render.

[arturi]

Hi! Thanks for reporting. I bumped into this earlier after the 0.14 release and fixed in master, but wanted to add more fixes before releasing a patch, and then never did 😢

So, just now as we speak I’ve release 0.14.1, which should fix this issue and then some. So please try updating the package and tell me how it goes.

This in the context of a React application

On a different but related subject, could you please share how you are using Uppy? Maybe link to your code or a live version? We’d love to know, working on React support and we need feedback on what our users actually want from it :)

[makeitrein]

Hey @arturi - thx for the fix, got the properties now! Here's some early screencaps for my MobX/React/Node application. Building out a sweet slider with Uppy + https://github.com/souporserious/react-view-pager so a user can upload a document from local or cloud provider of choice.

Application is for family offices/ultra high individuals via way2b1.com

Here's my hacky unreviewed code...

    @observer
     class UppyUploader extends React.Component {
     uppyInit = () => {
        const {page} = this.props;
        const opts = {
            dashboardElId: "uppy-dashboard",
            triggerId: "#uppy-opener-" + page.page_id,
            dashboardTarget: "body",
            host: __API_URL__.slice(0, -1) // remove trailing slash
        }
      const dashboardEl = document.getElementById(opts.dashboardElId)
        if (dashboardEl) {
            const dashboardElParent = dashboardEl.parentNode
            dashboardElParent.removeChild(dashboardEl)
        }
        const uppy = Core({debug: true, autoProceed: opts.autoProceed})
            .use(Dashboard, {
                trigger: opts.triggerId,
                target: opts.dashboardTarget
            })
            .use(GoogleDrive, {target: Dashboard, host: opts.host})
            .use(Dropbox, {target: Dashboard, host: opts.host}).use(Webcam, {target: Dashboard})
            // .use(Tus10, {endpoint: __API_URL__ + "page/update", resume: true})
            .use(Multipart, {
                endpoint: __API_URL__ + "page/update",
                bundle: false,
                fieldName: 'file'
            })
            .use(Informer, {target: Dashboard})
            .use(MetaData, {
                fields: [
                    {id: 'page_id', name: 'Page Id', value: page.page_id, placeholder: 'Page Id'},
                    {
                        id: 'description',
                        name: 'Description',
                        value: 'none',
                        placeholder: 'Describe what this file is for!'
                    }
                ]
            })
        uppy.run()
        uppy.on('core:success', (fileCount) => {
            page.reload();
            message.success(<span>{fileCount} {pluralize("file", fileCount)} uploaded!</span>)
        })
    }

    componentDidMount() {
        setTimeout(() => this.uppyInit(), 100); // Lol
    }

    render() {
        const {children, page} = this.props;
        return <div id={"uppy-opener-" + page.page_id}>
            {children}
        </div>
    }
}

export default UppyUploader