'Get file from backend in React JS

I have a edit component that update some fields from a project (name, duration, image, etc). My question emerges when I fill the default values from the form with the store data from a project previously, specially with the field "image". When I store the input from the form, I send a file type, but when I bring to my component, the response brings in a string, and I want a file to make the "edit validation" later, for example, if I have a previous image in the db and the user needs only change the duration of a project, keep the default image (previous loaded from the backend).

A secuence could be this:

  1. click on "Edit project" 2)fill all the fields INCLUDES the image
  2. the submit it's ok and the new values will be update in the db

Another secuence (with the problem):

  1. click on "Edit project"
  2. fill name and duration fields BUT the input file for the image not change
  3. click on the submit but I have a reject in the console due to send a invalid file type ("The submitted data was not a file. Check the encoding type on the form ") and the operation won't complete.

I tried with base64 but I don't have results yet.

I hope it was understood the situation, now I detach some code to see what I have at the moment.

const [pictureState, setPictureState] = useState(project.picture); //load the previously picture to a state

the input file

<input
            type="file"
            className="form-control"
            id="inputGroupFile01"
            onChange={(e) => handlePictureChange(e)}
          />

the handlepicturechange

const handlePictureChange = (e) => {
const data = new File(e);
setPictureState(data);
};


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source