this repo has no description
1import { plural } from '@lingui/core/macro';
2
3function FilePickerInput({
4 hidden,
5 supportedMimeTypes,
6 maxMediaAttachments,
7 mediaAttachments,
8 disabled = false,
9 setMediaAttachments,
10}) {
11 return (
12 <input
13 type="file"
14 hidden={hidden}
15 accept={supportedMimeTypes?.join(',')}
16 multiple={
17 maxMediaAttachments === undefined ||
18 maxMediaAttachments - mediaAttachments >= 2
19 }
20 disabled={disabled}
21 onChange={(e) => {
22 const files = e.target.files;
23 if (!files) return;
24
25 const mediaFiles = Array.from(files).map((file) => ({
26 file,
27 type: file.type,
28 size: file.size,
29 url: URL.createObjectURL(file),
30 id: null, // indicate uploaded state
31 description: null,
32 }));
33 console.log('MEDIA ATTACHMENTS', files, mediaFiles);
34
35 // Validate max media attachments
36 if (mediaAttachments.length + mediaFiles.length > maxMediaAttachments) {
37 alert(
38 plural(maxMediaAttachments, {
39 one: 'You can only attach up to 1 file.',
40 other: 'You can only attach up to # files.',
41 }),
42 );
43 } else {
44 setMediaAttachments((attachments) => {
45 return attachments.concat(mediaFiles);
46 });
47 }
48 // Reset
49 e.target.value = '';
50 }}
51 />
52 );
53}
54
55export default FilePickerInput;