2
import FileBase from 'react-file-base64';

I get an error after I hover the triple dot indicator in VS Code.

My setup has already been successful (other input fields have successfully inserted on the MongoDB Cloud) aside from the filebase64 part of inserting an image.

module "d:/nodejs/memories_project/client/node_modules/react-file-base64/build/build.min" Could not find a declaration file for module 'react-file-base64'. 'd:/nodejs/memories_project/client/node_modules/react-file-base64/build/build.min.js' implicitly has an 'any' type. Try npm i --save-dev @types/react-file-base64 if it exists or add a new declaration (.d.ts) file containing declare module 'react-file-base64';ts(7016)

Here are the dependencies of my package.json:

"dependencies": {
    "@material-ui/core": "^4.9.10",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "moment": "^2.27.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-file-base64": "^1.0.3",
    "react-redux": "^7.1.3",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
costaparas
  • 5,047
  • 11
  • 16
  • 26
daryl
  • 44
  • 1
  • 4

3 Answers3

2

If the value is not being saved on the database, that means it is empty or does not exist. Check if the name of the field in the model file (/server/models/) is the same as you have in the Form file (/client/src/components/).

Now the error message has nothing to do with the actual problem.

This happens because react-file-base64 doesn't provide any typing. To get rid of the error you will need to declare the module in a .d.ts file.

To do it, create a .d.ts file (e.g. index.d.ts) in your project root (where the package.json is located) with the following code:

declare module 'react-file-base64';

Or you can declare all with

declare module '*';
Carol B.
  • 21
  • 5
1

I had a similar issue and spent over two hours trying to debug. It can be from a range of issues, my silly mistake was that I had the multiple option set to true when I had not configured it for multiple image uploading.

My code fix as an example.

<FileBase 
    type="file"
    multiple={false}
    onDone={({base64}) => setListingData({ ...listingData, selectedFile: base64})}
/>
Josef
  • 2,869
  • 2
  • 22
  • 23
dwbra
  • 99
  • 1
  • 4
1

All you need is to change the Component, the latest I see on its documentation is using FileBase64 not FileBase

So change it into > import FileBase from 'react-file-base64';

Source

Sami Kalammallah
  • 41
  • 1
  • 8