static/scripts/dataViz.js

const fileContainer = document.querySelector(".file-container");
const label = document.querySelector("#label-input");
const inputFile = document.querySelector("#document-input");
const form = document.querySelector("form");
const prompt_txt = document.querySelector("#text-prompt");
const result_section = document.querySelector(".result");
const chart_wrapper = result_section.querySelector(".chart-wrapper");

let file = null;

function clear() {
	file = null;
	label.style.display = "flex";
	fileContainer.innerHTML = "";
}
const upload = (fileData) => {
	file = fileData;
	const ext = file.name.split(".").pop();

	if (ext === "pdf") {
		label.style.display = "none";
		fileContainer.innerHTML = `
        <div class="file-wrapper">
                    <i class="fa fa-file-excel"></i>
                    <p>
                        ${file.name}
                    </p>
                    <button id='btn-clear' type="button" ><i class="fa fa-close" ></i></button>
        </div>
        `;
		document
			.querySelector("#btn-clear")
			.addEventListener("click", (e) => clear(e));
	} 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", (e) => {
	e.preventDefault();
	const prompt = prompt_txt.value.trim();
	if (prompt && file) {
		showchart("../static/40185.jpg");
	} else {
		console.log("no file selected or no prompted");
	}
});
const showchart = (url) => {
	chart_wrapper.innerHTML = `
        <i class="fas fa-download" id="btn-download" onclick='download()'></i>
        <img src=${url} id="chart">
        `;
	result_section.style.display = "block";
	result_section.scrollIntoView({ behavior: "smooth" });
};

const download = () => {
	const imageurl = document.querySelector("#chart").src;
	const a = document.createElement("a");
	a.href = imageurl;
	a.download = "SmartDoc-chart.jpg";
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
};