Existing code not working after upgrade to v3.20

Uppy
1

I recently upgraded our application using Uppy to version 3.20.0. I have one file that references Uppy but it is failing now and not sure how to fix it.

    if (Uppy && !(this.uppy instanceof **Uppy**)) {
        this.uppy = **Uppy**<'strict'>({
            debug: false,
            autoProceed: false,
            allowMultipleUploads: false,
            restrictions: {
                maxFileSize,
                maxNumberOfFiles,
                minNumberOfFiles,
                allowedFileTypes: null,
            },
            onBeforeFileAdded: this.onBeforeFileAddedCallback,
            locale: {
                strings: {
                    ...(maxFileSizeMessage ? { exceedsSize: maxFileSizeMessage } : {}),
                },
            },
        });

First error, on highlighted text, is “The right-hand side of an ‘instanceof’ expression must be of type ‘any’ or of a type assignable to the ‘Function’ interface type.ts(2359)” and second error is " Type ‘typeof import(“c:/ngen_screen_designer/node_modules/@uppy/core/types/index”)’ has no call signatures.ts(2349)"

        Form &&
            this.uppy?.use(**Form**, {
                target: '.upload-file-form',
                getMetaFromForm: true,
                addResultToForm: true,
                resultName: 'uppyResult',
                submitOnSuccess: false,
            });

Last common error is “Type ‘typeof import(“c:/ngen_screen_designer/node_modules/@uppy/form/types/index”)’ provides no match for the signature ‘new (uppy: Uppy<Record<string, unknown>, Record<string, unknown>>, opts?: PluginOptions | undefined): UIPlugin | BasePlugin<…>’.ts(2345)”

Hopefully an easy fix that someone can help me with. I’m new to NodeJS so seeking help on this.

2

Hey, can you clarify what version of Uppy were you using before the upgrade?

3

Hi @aduh95. Thanks for your reply. Check the screenshot below of the previous versions (left) and the updated versions (right)

image
image931×129 6.37 KB

4

Friendly reminder that sharing screen capture (without proper alt text) will be problematic for folks using screen readers, consider copy pasting instead.

I can see in your image you shared that you are upgrading from @uppy/core 1.20.0 to 3.7.1, so a two-major-version bump. You don’t show in your code snippet how you are importing the Uppy classes, I assume you need to change something over there but I’m afraid it’s hard to tell with only the information above.

You can read on the 2.0.0 blog post that you need to replace Uppy<'strict'> with just Uppy: Uppy 2.0.0: smaller, faster, modular plugins, Preact X, stricter types, and much more | Uppy

5

@aduh95 Here is more of the code snippet, which I hope helps.

(Separate file)

type UppyCoreModule = typeof import('@uppy/core');
type UppyFormModule = typeof import('@uppy/form');
type UppyXHRModule = typeof import('@uppy/xhr-upload');
type UppyDashboardModule = typeof import('@uppy/dashboard');

// eslint-disable-next-line import/no-duplicates

import type { Uppy } from '@uppy/core';

export { Uppy as UppyClass, UppyCoreModule, UppyFormModule, UppyXHRModule, UppyDashboardModule };

  private initUppy() {
        const {
            uploadFileEndpoint,
            maxFileSize,
            maxFileSizeMessage,
            maxNumberOfFiles,
            minNumberOfFiles,
            dropZoneHeight,
            uploadTimeout,
            onErrorCallback,
            onFileAddedCallback,
            onFileRemovedCallback,
            onUploadSuccessCallback,
            Uppy,
            Form,
            XHRUpload,
            Dashboard,
            headers,
        } = this.props;

Expansion of original code snippet

        if (Uppy && !(this.uppy instanceof Uppy)) {
            this.uppy = Uppy<'strict'>({
                debug: false,
                autoProceed: false,
                allowMultipleUploads: false,
                restrictions: {
                    maxFileSize,
                    maxNumberOfFiles,
                    minNumberOfFiles,
                    allowedFileTypes: null,
                },
                onBeforeFileAdded: this.onBeforeFileAddedCallback,
                locale: {
                    strings: {
                        ...(maxFileSizeMessage ? { exceedsSize: maxFileSizeMessage } : {}),
                    },
                },
            });

            // init form to use inputs to send additional info on upload file
            Form &&
                this.uppy?.use(Form, {
                    target: '.upload-file-form',
                    getMetaFromForm: true,
                    addResultToForm: true,
                    resultName: 'uppyResult',
                    submitOnSuccess: false,
                });

            Dashboard &&
                this.uppy?.use(Dashboard, {
                    trigger: '.UppyModalOpenerBtn',
                    inline: true,
                    target: '.uppy-section',
                    replaceTargetContent: true,
                    showProgressDetails: true,
                    hideUploadButton: true,
                    height: dropZoneHeight,
                    doneButtonHandler: null, // disable the "done" button to prevent resetting the dashboard and allowing more files to upload
                    metaFields: [
                        { id: 'name', name: 'Name', placeholder: 'file name' },
                        {
                            id: 'caption',
                            name: 'Caption',
                            placeholder: 'describe what the image is about',
                        },
                    ],
                    browserBackButtonClose: true,
                    proudlyDisplayPoweredByUppy: false,
                    hideRetryButton: true,
                    locale: {
                        strings: {
                            dropPaste: 'Drop files here or %{browse}',
                        },
                    },
                });

            // init upload plugin
            XHRUpload &&
                this.uppy?.use(XHRUpload, {
                    endpoint: uploadFileEndpoint,
                    metaFields: ['filename', 'description', 'displayname'],
                    getResponseError: onErrorCallback,
                    timeout: uploadTimeout,
                    headers,
                });

            onFileAddedCallback && this.uppy?.on('file-added', onFileAddedCallback);
            onFileRemovedCallback && this.uppy?.on('file-removed', onFileRemovedCallback);
            onUploadSuccessCallback && this.uppy?.on('upload-success', onUploadSuccessCallback);
        }
    }

Thanks for the blog post - will take a look.

6

The usage of this.props lets me think you might be using some kind of framework, but it’s hard to tell which. I suggest you double check the way you import the Uppy classes, it’s likely that something has changed on this front (e.g. it used to be a default export, and now it’s a named one, or something like that).