frontend qrgenerator
wahyu-kurniawan
commit
d72c1ea77e
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 374 KiB |
|
|
@ -0,0 +1,64 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>QRCode Generator Asset Diskominsta</title>
|
||||||
|
<!-- Font Awesome Icons -->
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
|
||||||
|
/>
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.css" rel="stylesheet" />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<!-- Google Font -->
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<!-- Stylesheet -->
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container mx-auto h-screen">
|
||||||
|
<div class="w-full h-full flex flex-col items-center justify-center">
|
||||||
|
<div class="flex flex-col justify-center items-center mb-10">
|
||||||
|
<div class="w-14 md:w-20 mb-5">
|
||||||
|
<img src="./image/magelang.svg" class="w-full h-full">
|
||||||
|
</div>
|
||||||
|
<div class="text-sm md:text-xl lg:text-2xl flex flex-col items-center font-medium">
|
||||||
|
<span class="py-2 font-semibold">
|
||||||
|
QRCode Generator Asset
|
||||||
|
</span>
|
||||||
|
<span class="py-2">
|
||||||
|
Dinas Komunikasi Informatika dan Statistik
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Kota Magelang
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form enctype="multipart/form-data" class="w-1/2 flex flex-col">
|
||||||
|
<input type="file" id="upload-button" multiple accept=".xlsx, .xls, .csv" />
|
||||||
|
<label for="upload-button" class="flex flex-col items-center justify-center w-full h-60 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
|
||||||
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
||||||
|
<svg aria-hidden="true" class="w-10 h-10 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
|
||||||
|
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Klik untuk unggah</span> atau tarik file</p>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400">excel file (MAX. 5Mb)</p>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<div id="error"></div>
|
||||||
|
<div id="file-display"></div>
|
||||||
|
<button type="submit" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm md:px-5 px-3 md:py-2.5 py-2 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 mt-8">Unggah File</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Script -->
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
let uploadButton = document.getElementById("upload-button");
|
||||||
|
let chosenfile = document.getElementById("chosen-file");
|
||||||
|
let fileName = document.getElementById("file-name");
|
||||||
|
let container = document.querySelector(".container");
|
||||||
|
let error = document.getElementById("error");
|
||||||
|
let fileDisplay = document.getElementById("file-display");
|
||||||
|
|
||||||
|
const fileHandler = (file, name, type) => {
|
||||||
|
console.log(type)
|
||||||
|
if (type.split("/")[0] !== "application" && type.split("/")[1] !== "vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
|
||||||
|
//File Type Error
|
||||||
|
error.innerText = "Mohon unggah file excel ber ekstensi .xlsx";
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
error.innerText = "";
|
||||||
|
let reader = new FileReader();
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
reader.onloadend = () => {
|
||||||
|
//file and file name
|
||||||
|
let fileContainer = document.createElement("figure");
|
||||||
|
fileContainer.innerHTML += `<figcaption>${name}</figcaption>`;
|
||||||
|
fileDisplay.appendChild(fileContainer);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
//Upload Button
|
||||||
|
uploadButton.addEventListener("change", () => {
|
||||||
|
fileDisplay.innerHTML = "";
|
||||||
|
Array.from(uploadButton.files).forEach((file) => {
|
||||||
|
fileHandler(file, file.name, file.type);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
container.addEventListener(
|
||||||
|
"dragenter",
|
||||||
|
(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
container.classList.add("active");
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
container.addEventListener(
|
||||||
|
"dragleave",
|
||||||
|
(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
container.classList.remove("active");
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
container.addEventListener(
|
||||||
|
"dragover",
|
||||||
|
(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
container.classList.add("active");
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
container.addEventListener(
|
||||||
|
"drop",
|
||||||
|
(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
container.classList.remove("active");
|
||||||
|
let draggedData = e.dataTransfer;
|
||||||
|
let files = draggedData.files;
|
||||||
|
fileDisplay.innerHTML = "";
|
||||||
|
Array.from(files).forEach((file) => {
|
||||||
|
fileHandler(file, file.name, file.type);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
window.onload = () => {
|
||||||
|
error.innerText = "";
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: #f5f8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="file"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
background-color: #050E49;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 1.1em;
|
||||||
|
text-align: center;
|
||||||
|
width: 16em;
|
||||||
|
padding: 1em 0;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
margin: 0 auto 1em auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#file-display {
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 1.25em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
#file-display figure {
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
#file-display img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#file-display figcaption {
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
color: #5a5861;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
border: 0.2em dashed #025bee;
|
||||||
|
}
|
||||||
|
#error {
|
||||||
|
text-align: center;
|
||||||
|
color: #ff3030;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue