Replies: 1 comment
-
@12Sam12 there are many ways to approach this. I would say using a context is a good approach. I'm not familiar with how It could be as simple as this (pseudo code): const FormContext = React.createContext({});
function MyApp() {
const formCtx = useFormContext()
<FormContext.Provider value={formCtx}>
{/* ... other components here that you've imported */}
<MyComponent />
</FormContext.Provider>
}
const useFormContext = () => {
const [file, setFile] = useState(null);
return {
file,
setFile: file => {
// here you could create https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData and set the file on it, then upload
}
};
}
// somewhere else in your code
func MyComponent() {
const {setFile} = useContext(FormContext)
const {getRootProps} = useDropzone({onDrop: files => {
setFile(files[0])
}})
return (
{/* ... your drop area here */}
);
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Lets assume I have a form file-drop field. I drop a file. But as my project is complex I have defined my onDrop method in another file. Now once the file is dropped I need to set one form fields to be this file. How do I go about structuring it? I tried useFormikContext hook. But it errored out with
React Hook "useFormikContext" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks
Any ideas??
Im just showing some portion. Pls just identify the structural issue here:
Beta Was this translation helpful? Give feedback.
All reactions