Use the eState() hook to create the drag and filename variables, initialized to false and respectively. Create a ref called dropRef for this component. env.local), build it and place it on some static file server (I use nginx for that). Then you need to clone this project, point it to the WebSockets backend (filedrop-ws) (in. I am coding a small utility program for personal use that takes video files in a target directory and uploads them to gfycat's API for gif creation using nodejs. Renders a file drag and drop component for a single file. First you need to clone, build and run filedrop-ws and a TURN server (like coturn ), read the README in filedrop-ws for more information on configuration.