'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:
- click on "Edit project" 2)fill all the fields INCLUDES the image
- the submit it's ok and the new values will be update in the db
Another secuence (with the problem):
- click on "Edit project"
- fill name and duration fields BUT the input file for the image not change
- 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 |
|---|
