reactjsuppy

My Uppy suddenly gives me the error this.uppy.addFiles is not a function

I'm new to this and I get this error and can't figure out why please advice: Looks like the Error is inside Uppy something.

I follow Uppy Tutorial docs like .use(Dashboard, {... and it was working but suddenly this error I try to back track but no luck

I add files from My Device and and then error happens no breakpoint are hit anywhere what I'm a missing

enter image description here

enter image description here Here is my simple Uppy:

    import React from "react";
    
    import "@uppy/core/dist/style.css";
    import "@uppy/status-bar/dist/style.css";
    import "@uppy/drag-drop/dist/style.css";
    import "@uppy/progress-bar/dist/style.css";
    import "@uppy/dashboard/dist/style.css";
    import "./styles.css";
    
    const Uppy = require("@uppy/core");
    // const Dashboard = require("@uppy/dashboard");
    const GoogleDrive = require("@uppy/google-drive");
    const Dropbox = require("@uppy/dropbox");
    const Instagram = require("@uppy/instagram");
    const Webcam = require("@uppy/webcam");
    const Tus = require("@uppy/tus");
    const {
      Dashboard,
      DashboardModal,
      DragDrop,
      ProgressBar,
    } = require("@uppy/react");
    
    class DashboardUppy extends React.Component {
      constructor(props) {
        super(props);
        this.form = React.createRef();
        this.state = {
          showInlineDashboard: false,
          open: false,
        };
    
        this.uppy = new Uppy({
          id: "uppy1",
          autoProceed: false,
          debug: true,
          allowMultipleUploads: true,
          showSelectedFiles: true,
          restrictions: {
            maxFileSize: 1000000,
            maxNumberOfFiles: 100,
            minNumberOfFiles: 1,
            allowedFileTypes: ['image/*', 'video/*'],
          },
          onBeforeFileAdded: (currentFile, files) => {
            console.log(files);
            const modifiedFile = Object.assign({}, currentFile, {
              name: currentFile + Date.now(),
            });
            if (!currentFile.type) {
              // log to console
              this.uppy.log(`Skipping file because it has no type`);
              // show error message to the user
              this.uppy.info(`Skipping file because it has no type`, "error", 500);
              return false;
            }
            return modifiedFile;
          },
        })
          .use(Tus, { endpoint: "https://master.tus.io/files/" })
          .use(GoogleDrive, { companionUrl: "https://companion.uppy.io" })
          .use(Dropbox, {
            companionUrl: "https://companion.uppy.io",
          })
          .use(Instagram, {
            companionUrl: "https://companion.uppy.io",
          })
          .use(Webcam, {
            onBeforeSnapshot: () => Promise.resolve(),
            countdown: false,
            modes: ["video-audio", "video-only", "audio-only", "picture"],
            mirror: true,
            facingMode: "user",
            locale: {
              strings: {
                // Shown before a picture is taken when the `countdown` option is set.
                smile: "Smile!",
                // Used as the label for the button that takes a picture.
                // This is not visibly rendered but is picked up by screen readers.
                takePicture: "Take a picture",
                // Used as the label for the button that starts a video recording.
                // This is not visibly rendered but is picked up by screen readers.
                startRecording: "Begin video recording",
                // Used as the label for the button that stops a video recording.
                // This is not visibly rendered but is picked up by screen readers.
                stopRecording: "Stop video recording",
                // Title on the “allow access” screen
                allowAccessTitle: "Please allow access to your camera",
                // Description on the “allow access” screen
                allowAccessDescription:
                  "In order to take pictures or record video with your camera, please allow camera access for this site.",
              },
            },
          })
          .on("file-added", (file) => {
            const { setFiles } = props;
            setFiles(file);
          })
      }
    
      componentWillUnmount() {
        this.uppy.close();
      }
    
      render() {
        this.uppy.on("complete", (result) => {
          console.log(
            "Upload complete! We’ve uploaded these files:",
            result.successful
          );
        });
    
        return (
          <div>
            <div>
              <Dashboard
                uppy={this.uppy}
                plugins={["GoogleDrive", "Webcam", "Dropbox", "Instagram"]}
                metaFields={[
                  { id: "name", name: "Name", placeholder: "File name" },
                ]}
                open={this.state.open}
                target={document.body}
                onRequestClose={() => this.setState({ open: false })}
              />
             </div>
          </div>
        );
      }
    }

export default DashboardUppy;

And I use it like this nothing special:

import React, { useState } from "react";
import FileList from "./FileList";
import FileForm from "./FileForm";
import DashboardUppy from "./DashboardUppy";
import { Container, Grid } from "@material-ui/core";

const CreateContent = () => {
  const [file, setItems] = useState();
  const [show, showDashboardUppy] = useState(true);

  return (
    <Container maxWidth="lg">
      {show ? (
        <DashboardUppy showDashboardUppy={showDashboardUppy}/>
      ) : (
        <Grid container spacing={3}>
          <Grid item lg={4} md={6} xs={12}>
            <FileList setItems={setItems} />
          </Grid>
          <Grid item lg={8} md={6} xs={12}>
            <FileForm file={file} />
          </Grid>
        </Grid>
      )}
    </Container>
  );
};

export default CreateContent;

Here is package.json

{
  "name": "react-firestore-crud",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@uppy/core": "1.0.2",
    "@uppy/dropbox": "latest",
    "@uppy/form": "^1.3.23",
    "@uppy/google-drive": "1.0.2",
    "@uppy/instagram": "1.0.2",
    "@uppy/react": "^1.0.2",
    "@uppy/status-bar": "latest",
    "@uppy/tus": "1.0.2",
    "@uppy/webcam": "latest",
    "@uppy/xhr-upload": "^1.6.8",
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/styles": "^4.11.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "bootstrap": "^4.5.2",
    "clsx": "^1.1.1",
    "firebase": "^7.23.0",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-perfect-scrollbar": "^1.5.8",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.0",
    "uuid": "^8.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
Solution

  • I hade the wrong Uppy version in package.json hmmm