| 100 | }; |
| 101 | |
| 102 | const useFileDrop = ( |
| 103 | callback: (file: File) => void, |
| 104 | extensions?: string[], |
| 105 | ): { |
| 106 | onDragOver: (e: DragEvent<HTMLDivElement>) => void; |
| 107 | onDrop: (e: DragEvent<HTMLDivElement>) => void; |
| 108 | } => { |
| 109 | const onDragOver = (e: DragEvent<HTMLDivElement>) => { |
| 110 | e.preventDefault(); |
| 111 | }; |
| 112 | |
| 113 | const onDrop = (e: DragEvent<HTMLDivElement>) => { |
| 114 | e.preventDefault(); |
| 115 | const file = e.dataTransfer.files[0] as File | undefined; |
| 116 | |
| 117 | if (!file) { |
| 118 | return; |
| 119 | } |
| 120 | |
| 121 | if (!extensions) { |
| 122 | callback(file); |
| 123 | return; |
| 124 | } |
| 125 | |
| 126 | const extension = file.name.split(".").pop(); |
| 127 | |
| 128 | if (!extension) { |
| 129 | throw new Error(`File has no extension to compare with ${extensions}`); |
| 130 | } |
| 131 | |
| 132 | if (extensions.includes(extension)) { |
| 133 | callback(file); |
| 134 | } |
| 135 | }; |
| 136 | |
| 137 | return { |
| 138 | onDragOver, |
| 139 | onDrop, |
| 140 | }; |
| 141 | }; |