Created
June 11, 2021 04:49
-
-
Save tofusoup429/4aed1443da3a29601a3b46ab623307fe to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {useState, useEffect} from 'react'; | |
type DragAndDropStatus = "none"|"dragover"|"drop"|'dbclick'; | |
interface Returns { | |
fileName:string, | |
dndStatus:DragAndDropStatus, | |
fileContent:ArrayBuffer|string|null, | |
fileSize:number, | |
dropzoneId:string, | |
initializeStates:()=>void; | |
} | |
export const useDropzone = (_componentId:string='dropzone'):Returns => { | |
const [dndStatus, handleDndStatus] = useState<DragAndDropStatus>('none'); | |
const [fileContent, handleFileContent] = useState<ArrayBuffer|string|null>(null); | |
const [fileSize, handleFileSize] = useState<number>(0) | |
const [dropzoneId, ] = useState<string>(_componentId); | |
const [fileName, handleFileName] = useState<string>('') | |
useEffect(()=>{ | |
const dropzone = document.getElementById(_componentId); | |
const dragover = (e:DragEvent)=>{ | |
handleDndStatus('dragover'); | |
e.stopPropagation(); | |
e.preventDefault(); | |
} | |
dropzone?.addEventListener('dragover',dragover); | |
return ()=>removeEventListener('dragover', dragover ) | |
},[]); | |
useEffect(()=>{ | |
const dropzone = document.getElementById(_componentId); | |
const dragleave = (e:DragEvent)=>{ | |
handleDndStatus('none'); | |
e.stopPropagation(); | |
e.preventDefault(); | |
} | |
dropzone?.addEventListener('dragleave',dragleave); | |
return ()=>removeEventListener('dragleave', dragleave ) | |
},[]); | |
useEffect(()=>{ | |
const dropzone = document.getElementById(_componentId); | |
const drop = (e:DragEvent)=>{ | |
let fileName = e!.dataTransfer!.files[0].name||"noName"; | |
handleFileName(fileName) | |
handleDndStatus('drop'); | |
e.stopPropagation(); | |
e.preventDefault(); | |
let files = e.dataTransfer!.files; | |
for (var i=0, file; file=files[i]; i++) { | |
let reader = new FileReader(); | |
reader.onload = function(file) { | |
let fileContent:ArrayBuffer|string|null = file!.target!.result; | |
let fileSize:number = file.total; | |
handleFileContent(fileContent); | |
handleFileSize(fileSize); | |
} | |
reader.readAsDataURL(file); | |
} | |
} | |
dropzone?.addEventListener('drop', drop); | |
return ()=>removeEventListener('drop', drop) | |
},[]) | |
const initializeStates = () => { | |
handleDndStatus('none'); | |
handleFileContent(null); | |
handleFileName(''); | |
handleFileSize(0); | |
} | |
return {fileName, dndStatus, fileContent, fileSize, dropzoneId, initializeStates} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment