File upload

This component allows you to upload files to your bot. You can use it to upload images, videos, audio files, PDFs, etc.

1const FileUpload = ({ onUploadComplete }) => {
2  const [selectedFile, setSelectedFile] = useState<File | null>(null);
3  const [uploadProgress, setUploadProgress] = useState<number>(0);
4  const [dragOver, setDragOver] = useState<boolean>(false);
5
6  const uploadFile = (file: File) => {
7    const uploadTime = 2000;
8
9    setUploadProgress(0);
10    const interval = setInterval(() => {
11      setUploadProgress((oldProgress) => {
12        if (oldProgress === 100) {
13          clearInterval(interval);
14          onUploadCompleted(file.name);
15          return 100;
16        }
17        return Math.min(oldProgress + 10, 100);
18      });
19    }, uploadTime / 10);
20  };
21
22  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
23    const file = e.target.files ? e.target.files[0] : null;
24    if (file) {
25      setSelectedFile(file);
26      uploadFile(file);
27    }
28  };
29  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
30
31    e.preventDefault();
32    setDragOver(true);
33  };
34
35  const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
36    e.preventDefault();
37    setDragOver(false);
38  };
39
40  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
41    e.preventDefault();
42    setDragOver(false);
43    if (e.dataTransfer.files && e.dataTransfer.files.length) {
44      uploadFile(e.dataTransfer.files[0]);
45    }
46  };
47
48  return html`
49    <div
50      className=${dragOver ? "file-upload file-upload-drag-over" : "file-upload"}
51      onDragOver=${handleDragOver}
52      onDragLeave=${handleDragLeave}
53      onDrop=${handleDrop}
54      onClick=${() => document.getElementById("file-upload")?.click()}
55    >
56      <input type="file" id="file-upload" hidden onChange=${handleFileChange} />
57      <div className="file-input-custom">
58        <div className="file-input-custom-icon">
59          ${uploadProgress > 0 ?
60            '<CircularProgressBar progress=' + uploadProgress + ' size=25 strokeWidth=2 />' :
61            '<img src=' + uploadIcon + ' alt="upload" className="file-input-button-icon" />'}
62        </div>
63        <span className="file-input-name">
64          ${selectedFile?.name ?? "Select a file..."}
65        </span>
66      </div>
67    </div>
68  `;
69};