30 seconds of ReactBack to Home
Renders a file drag and drop component for a single file.
- Create a ref called
dropReffor this component.
- Use the
React.useState()hook to create the
filenamevariables, initialized to
''respectively. The variables
dragare used to determine if a file is being dragged, while
filenameis used to store the dropped file's name.
- Create the
handleDropmethods to handle drag and drop functionality, bind them to the component's context.
- Each of the methods will handle a specific event, the listeners for which are created and removed in the
React.useEffect()hook and its attached
handleDragprevents the browser from opening the dragged file,
handleDragOuthandle the dragged file entering and exiting the component, while
handleDrophandles the file being dropped and passes it to
- Return an appropriately styled
filenameto determine its contents and style.
- Finally, bind the
refof the created