diff --git a/src/canvasController/canvasData/manipulate/loadData.ts b/src/canvasController/canvasData/manipulate/loadData.ts index 91a2ab5..63abae8 100644 --- a/src/canvasController/canvasData/manipulate/loadData.ts +++ b/src/canvasController/canvasData/manipulate/loadData.ts @@ -1,36 +1,37 @@ import { IData } from "../Data"; import { TContentType } from "./TContentType"; -type TLoadData = (callback: TCallback, contentType: TContentType) => void; -type TCallback = (data: IData) => void; +export function loadData(type: TContentType): Promise { + return new Promise((res, rej) => { + const input = createInput(type); -export const loadData: TLoadData = (callback, contentType) => { - const input = document.createElement("input"); + input.onchange = () => { + const file = input.files?.[0]; - input.type = "file"; - input.accept = contentType; - input.addEventListener("change", (e) => inputOnChange(e, callback), { - once: true, - }); - input.click(); + if (file) readData(file).then(res).catch(rej); + }; - input.remove(); -}; + input.click(); + }); +} -function inputOnChange(e: Event, callback: TCallback) { - const inputFile = (e.target as HTMLInputElement).files?.[0]; - if (inputFile) { - const fileReader = new FileReader(); +function readData(file: File): Promise { + return new Promise((res, rej) => { + const reader = new FileReader(); - fileReader.addEventListener("load", (e) => readerOnLoad(e, callback), { - once: true, - }); - fileReader.readAsText(inputFile); - } + reader.onerror = rej; + reader.onload = () => { + const data = JSON.parse(reader.result as string); + res(data); + }; + reader.readAsText(file); + }); } -function readerOnLoad(e: Event, callback: TCallback) { - const data: IData = JSON.parse((e.target as FileReader).result as string); +function createInput(type: TContentType): HTMLInputElement { + const input = document.createElement("input"); + input.type = "file"; + input.accept = type; - callback(data); + return input; } diff --git a/src/index.ts b/src/index.ts index 1b5a87f..e9482d8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -81,8 +81,8 @@ if (boardController.ctx) { ); }); - openBtnController.onClick(() => - loadData((data) => { + openBtnController.onClick(() => { + loadData("application/json").then((data) => { cacheController.clearDataElements(); for (let element of data.elements) { @@ -90,8 +90,8 @@ if (boardController.ctx) { } canvasSetup(); - }, "application/json") - ); + }); + }); clearBtnController.onClick(() => { cacheController.clearDataElements();