Progress is no longer visible

Uppy
1

We’ve been using Uppy in prod (using the React DashboardModal) for over a year with very few problems, so I hadn’t touched any of the code or updated any of the dependencies. So when 2 weeks ago I tried to make an upload in dev, and while the file was uploaded (I could see each step in the log) nothing happened in the UI.

I could add a new file, but when I started the upload, nothing happened. No progress in the icon for each file, and no progress at the bottom of the modal. It still works in prod, but not in dev.

I looked at the Git history, and nothing had changed vis a vis dependencies and the code, so I don’t know what gives. Here are the versions I was using that was working in prod:

"@uppy/aws-s3-multipart": "^3.3.0",
"@uppy/companion-client": "^3.1.3",
"@uppy/core": "^3.2.0",
"@uppy/dashboard": "^3.4.0",
"@uppy/drag-drop": "^3.0.2",
"@uppy/file-input": "^3.0.2",
"@uppy/progress-bar": "^3.0.2",
"@uppy/react": "^3.1.2",
"@uppy/utils": "^5.3.0",

So I then thought, let’s try to update all the uppy components, but that didn’t help either:

“@uppy/aws-s3-multipart”: “^3.10.2”,
“@uppy/companion-client”: “^3.7.4”,
“@uppy/core”: “^3.9.3”,
“@uppy/dashboard”: “^3.7.5”,
“@uppy/drag-drop”: “^3.0.3”,
“@uppy/file-input”: “^3.1.0”,
“@uppy/progress-bar”: “^3.1.0”,
“@uppy/react”: “^3.2.2”,
“@uppy/status-bar”: “^3.3.0”,

The only difference I noticed was that there were some changes in the props passed to the DashboardModal. I tried using just the Dashboard component and setting the trigger and target, but it did the same thing. Here’s part of the code, any ideas where it’s going wrong?


import Uppy, { UppyFile } from '@uppy/core'
import { DashboardModal } from '@uppy/react'

  const up = new Uppy({
    debug: isDebug,
    autoProceed: false,
    infoTimeout: 2e5,
    id: props.id,
    restrictions: {
      maxFileSize: 2e12,
      maxTotalFileSize: 10e12,
      minNumberOfFiles: 1,
      maxNumberOfFiles: 1000,
    },
    onBeforeFileAdded: (currentFile: UppyFile) => {
      const originalName = currentFile.name.normalize()
      const state = store.getState()
      const upload = state.upload
      const path = generateWasabiPath(currentFile.name, upload.category, upload.categoryId)

      const modifiedFile = {
        ...currentFile,
        name: originalName,
        meta: {
          name: originalName,
          type: currentFile?.type,
          wasabiPath: path,
          category: upload.category,
          categoryId: upload.categoryId,
          folderId: upload.currentFolderId,
        },
      }

      return modifiedFile
    },
  })

  /** @ts-ignore */
  up.use(AwsS3Multipart, {
    limit: 4,
    getChunkSize: () => 2 * Math.pow(2, 30),
    companionHeaders: {
      category: category,
    },
    companionUrl: `${import.meta.env.VITE_API}/upload`,
  })

  <DashboardModal
        id={`${props.id}-modal`}
        uppy={up}
        open={isUploadModalOpen}
        closeModalOnClickOutside
        disableStatusBar={false}
        disablePageScrollWhenModalOpen={false}
        proudlyDisplayPoweredByUppy={false}
        showLinkToFileUploadResult={false}
        showProgressDetails={true}
        showSelectedFiles={true}
        disableThumbnailGenerator={true}
        fileManagerSelectionType="files"
        thumbnailWidth={0}
        browserBackButtonClose={true}
        disableInformer={false}
      />
2

Hi, I can’t reproduce this: Uppy React - StackBlitz.

Can you fork the stackblitz and reproduce it?

3

Sure I’ll get on it later today.