51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import { useReminder } from "./ReminderContext";
|
|
import { useFlash } from "../App/FlashContext";
|
|
|
|
export const Attachment = () => {
|
|
const [{ attachment_name }, setReminder] = useReminder();
|
|
|
|
const flash = useFlash();
|
|
|
|
return (
|
|
<div class="file is-small is-boxed">
|
|
<label class="file-label">
|
|
<input
|
|
class="file-input"
|
|
type="file"
|
|
name="attachment"
|
|
onInput={async (ev) => {
|
|
const input = ev.currentTarget;
|
|
|
|
let file = input.files[0];
|
|
|
|
if (file.size >= 8 * 1024 * 1024) {
|
|
flash({ message: "File too large (max. 8MB).", type: "error" });
|
|
return;
|
|
}
|
|
|
|
let attachment: string = await new Promise((resolve) => {
|
|
let fileReader = new FileReader();
|
|
fileReader.onload = () => resolve(fileReader.result as string);
|
|
fileReader.readAsDataURL(file);
|
|
});
|
|
attachment = attachment.split(",")[1];
|
|
const attachment_name = file.name;
|
|
|
|
setReminder((reminder) => ({
|
|
...reminder,
|
|
attachment,
|
|
attachment_name,
|
|
}));
|
|
}}
|
|
></input>
|
|
<span class="file-cta">
|
|
<span class="file-label">{attachment_name || "Add Attachment"}</span>
|
|
<span class="file-icon">
|
|
<i class="fas fa-upload"></i>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
);
|
|
};
|