File size: 3,079 Bytes
7b16419
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
const label = document.querySelector("#label-input");
const inputfile = label.querySelector("#document-input");
const fileContainer = document.querySelector(".file-container");
const form = document.querySelector("form");
const summary_section = document.querySelector("#summary");
const btnDounload = summary_section.querySelector("#btn-download");

let file = null;
const SUPPORTED_EXT = ["pdf", "docx", "pptx", "xlsx"];

const getfileicon = (ext) => {
	return ext === "pdf"
		? "fa-file-pdf"
		: ext === "xlsx"
		? "fa-file-excel"
		: ext === "pptx"
		? "fa-file-powerpoint"
		: "fa-file-word";
};

const upload = (filedata) => {
	file = filedata;
	const [name, ext] = file.name.split(".");

	const isvalid = SUPPORTED_EXT.some((s_ext) => s_ext === ext);
	if (isvalid) {
		label.style.display = "none";
		fileContainer.innerHTML = `
        <div class="file-wrapper">
                    <i class="fa ${getfileicon(ext)}"></i>
                    <p>
                        ${name}
                    </p>
                    <button id='btn-clear'><i class="fa fa-close"></i></button>
        </div>
        `;
		document.querySelector("#btn-clear").addEventListener("click", (e) => {
			e.preventDefault();
			file = null;
			label.style.display = "flex";
			fileContainer.innerHTML = "";
		});
	} else {
		console.error("file is not supported");
	}
};

inputfile.addEventListener("change", (e) => {
	e.preventDefault();
	upload(inputfile.files[0]);
});

label.addEventListener("dragover", (e) => {
	e.preventDefault();
});
label.addEventListener("drop", (e) => {
	e.preventDefault();
	upload(e.dataTransfer.files[0]);
});

form.addEventListener("submit", async (e) => {
	e.preventDefault();
	/*if (file === null) {
    console.error("No file choosed");
  } else {
    const formData = new FormData();
    formData.append("file", file);
    const res = await fetch("/summarize", {
      method: "post",

      body: formData,
    });
    const data = await res.json();
    console.log(data.text);*/
	summary_section.style.display = "block";
	const text = `  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos,
              nulla quia vitae officia, repudiandae eum inventore facilis sunt
              aliquid dolorem enim placeat ex cumque mollitia necessitatibus
              voluptatem aut provident assumenda? Eius delectus cum, minus
              voluptate eos laborum odio dolorum! Nulla excepturi laboriosam
              atque aliquid placeat vero enim doloribus quas, repudiandae
              vo`;

	summary_section.scrollIntoView({ behavior: "smooth" });

	typing(
		text,
		summary_section.querySelector(".text-wrapper"),
		summary_section.querySelector(".summary-content")
	);

	// }
});

const typing = (text, element, parent) => {
	const textsplit = text.split(" ");

	const interval = setInterval(() => {
		if (textsplit.length > 0) {
			element.innerHTML += `${textsplit.shift()} `;
			parent.scrollIntoView({ behavior: "smooth" });

			element.scrollIntoView({ behavior: "smooth" });
		} else {
			clearInterval(interval);
		}
	}, 50);
};