score:2
you can't programmatically set the value of an input with type="file"
for security reasons.
<input
...
type="file"
onchange={uploadimg}
// remove the value prop
/>
in the readfileasync
function, you need to account for the multiple files that will come, so instead we pass one file
to it.
you were concatenating the result of the filereader
to get a valid base64
string, but you can just use filereader#readasdataurl
. and that function will return the base64
string for the image.
function readfileasync(file) {
...
reader.onload = () => {
resolve({
id: uuid(),
url: reader.result,
type: "image",
});
};
reader.onerror = reject;
reader.readasdataurl(file);
});
}
and in the uploadimg
function,
async function uploadimg(e) {
const file = e.target.files[0];
if (file) {
setimage([...images, (await readfileasync(file))]);
setfiles([...files, file]);
}
}
in the deletefiles
function, now we have to update the image
and files
states.
because in the files
state, the images aren't recorded by anything unique, so we use the insert position (from the uploadimg function)
to match the files and remove the one to delete.
function deletefile(id) {
const imageindex = images.findindex(item => item.id === id);
if (imageindex > -1) {
setimages(images.filter(item => item.id !== id));
setfiles(files.filter((_, i) => i !== imageindex));
}
}
}
for the saving
there isn't a need for for the react-hook-form
package, since the input with type="file"
's value cannot be set programmatically.
so if it's the files from the input you want to access
- you can use a
ref
to access it - store the file in another state
- use the
base64
strings you generated.
i used another state to hold the files in the codesandbox
, but you can use any of the three options.
Source: stackoverflow.com
Related Query
- Can't get upload image value by using React hook form
- Get value using forwardref onclick on checkbox in react hook form DataTable
- Unable to get the formData values of file upload using react hook form
- Support callback for changing another field value when using React Hook Form validation
- issues with showing loading image on form submission using functional react hook in rectjs
- i am trying to upload file using react hook form and i used useController function and i am getting error
- Cant get my checkbox value in a variable using state in react
- Unable to upload file from react to laravel using react hook form and ajax
- how to upload image in the firebase storage and get uploaded image url in react using swr-firestore
- Get the value of checkbox using ref in React
- React Bootstrap get value from form on submit
- React ES6: Get selected value in dropdown list using semantic UI
- How to set multiple values at once in react hook form using Typescript
- get parameter value from url using React Router
- React hook Form know when value is modified
- Using a hook in react to change boolean and get a callback
- The validation errors are not showing using React Hook Form
- get form value from nested children using react.js
- Uploading a file using only the input field - React Hook Form
- How to format the value of a checkbox Field using React Final Form Field Array?
- Cloudinary image upload from React: am including Cloudinary unsigned preset but get "Upload preset must be specified when using unsigned upload"
- get latest state value after setState hook within async await block in react
- How to change/add value of a certain row of an array using useState Hook in React
- React TypeScript: How to get form values, and response codes using fetch
- TypeError: e.preventDefault is not a function on React Hook Form using EmailJs
- How to upload an image to google drive using gapi and react
- Upload Multiple Image in React using axios
- How do I get my HTML form date input to only allow specific days of the week to be chosen using JavaScript, React and HTML?
- How to upload image to aws s3 using react and django rest framework
- Fields are not editable using React Hook Form
More Query from same tag
- Ant Design table search customization
- How to access react public folder in SCSS to import images
- reactjs - validate enddate is 30 days older
- React - Using a Callback function to pass data from Child to Parent
- Link tag inside BrowserRouter changes only the URL, but doesn't render the component
- React + Antd + Rollup Component Library "Error: Invalid hook call. Hooks can only be called inside of the body of a function component"
- How to add React Router to an existing create-react-app?
- Using <ContextProvider> inside of <Switch>
- Property 'value' does not exist on type FormEvent in TypeScript
- How do I manually set input values in ReactJS?
- ERROR in ./src/redux/store.js 5:26-34 export 'reducers' (imported as 'reducers') was not found in './reducers/index' (possible exports: default)
- React material-table: How can I override the style of title in material-table?
- What does '&&' operator indicate with { this.props.children && React.cloneElement(this.props.children, { foo:this.foo})
- Solidity Subtracting msg.value or address(this).balance
- Does the Yup scheme lose context with the right field?
- how to pass className to svg in styled components
- Create a JSX list column from every level of multi-level nested object
- How to copy nested state between objects in React
- React Passing Data Through Parent to Child using Hooks
- How to mutate state using variable in Reactjs
- why can't I pass an array as props from one js to another?
- Dynamically add styles to styled-jsx in Next.js
- Is there a way in jest to check for a div by classname and then check the style?
- Images are not displaying with <li> tag in map function for array object in Reactjs
- Synchronization problems with Meteor Collection's Helpers
- Position sticky SVG element contained inside div with overflow
- data-target not working -- React-bootstrap
- Axios refresh token issue
- JSX template literals for an inline style
- How to find all Mapbox layers in DeckGL?