React Url scheme c not supported

Question

I'm currently working on a react web app in which I have an input type "file", which should be used by the user to upload an image. The input itself works, meaning when the button is clicked, the file browser opens and a file can be selected. However after that the console is throwing an error which states:

Fetch API cannot load c:\fakepath\freies_projekt-17.jpg. URL scheme "c" is not supported.

The Input is rendered as part of an Array of Inputs and comes with the following attributes.

   {
      name: "image",
      component: (
        <Input type={"file"} accept="image/png, image/jpeg" name="image" />
      )
    },

With the attributes, the following component is rendered.

export default function Input({ type = "number", name, value, key }) {
  const { updateSettings } = useSettingsStore();

  return (
    <StyledLabel>
      <StyledInput
        type={type}
        onChange={e => updateSettings(e)}
        value={value}
      />
      {name}
    </StyledLabel>
  );
}

When a file is selected, the path to that file is stored in the settingsstore. It is then used in a p5 component

export default function Canvas() {
  let tileWidth;
  let img;
  const settings = useSettingsStore();
  const image = useSettingsStore(state => state.image);
  const { canvasSize, bgColor, tiles } = settings;
  console.log(settings.image);

  const preload = p => {
    img = p.loadImage(image);
  };

  const setup = (p, canvasParentRef) => {
    p.createCanvas(canvasSize.w, canvasSize.h).parent(canvasParentRef);
    p.strokeCap(p.SQUARE);
    p.pixelDensity(4);
  };
  const draw = p => {
    if (img == undefined) {
      img = p.loadImage(image);
    }
    img.resize(p.width, p.height);
    p.background(bgColor);
    tileWidth = p.width / tiles;
    for (let y = 0; y < tiles; y++) {
      for (let x = 0; x < tiles; x++) {
        let c = img.get(x * tileWidth, y * tileWidth);
        let b = p.brightness(c);
        //lineRaster(x, y, b);
        borderRadiusRaster(p, x, y, b);
      }
    }
  };

The project was started some time ago, so it could be possible that some stuff is outdated. I'm working on node v16.13.0 and webpack with the following loaders:

 module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },

I'm guessing the solution lies somewhere in my webpack config but I'm not sure where to start looking.

I would be very happy if someone could help me out with this, thx:)

Answer 1

it's showing error because the file showing location of your location system. It's not on the web. So to make this work you have two option. One is to use url instead of file input and second one is to use firebase database in your code. You will get proper documentation of firebase website for how to use firebase storage to upload a file via input and if you do that your file is now on the web instead of local machine.