Better Image uploading
parent
404c7e6d83
commit
66c463f80a
|
@ -32,10 +32,11 @@
|
|||
|
||||
.e-image-area {
|
||||
background-color: #222;
|
||||
height: 220px;
|
||||
min-height: 200px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||
grid-template-rows: auto auto;
|
||||
grid-gap: 4px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
@ -51,14 +52,6 @@
|
|||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.e-image-area .image:nth-child(odd) {
|
||||
grid-row: span 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
.e-image-area .image:nth-child(even) {
|
||||
grid-row: span 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.e-content {
|
||||
background-color: #222;
|
||||
|
@ -67,6 +60,7 @@
|
|||
}
|
||||
.e-content textarea {
|
||||
font-size: 16px;
|
||||
min-height: 300px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
|
@ -39,10 +39,11 @@ $background-body: #222;
|
|||
|
||||
.e-image-area {
|
||||
background-color: $background-body;
|
||||
height: 220px;
|
||||
min-height: 200px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||
grid-template-rows: auto auto;
|
||||
grid-gap: 4px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
@ -59,15 +60,6 @@ $background-body: #222;
|
|||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.image:nth-child(odd) {
|
||||
grid-row: span 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
.image:nth-child(even) {
|
||||
grid-row: span 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.e-content {
|
||||
|
@ -76,6 +68,7 @@ $background-body: #222;
|
|||
margin-bottom: 10px;
|
||||
textarea {
|
||||
font-size: 16px;
|
||||
min-height: 300px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,36 @@
|
|||
let content_images = []; // List of all images to upload
|
||||
|
||||
const image_drop_area = qs(".e-image-area");
|
||||
|
||||
// Stylize the drop area
|
||||
image_drop_area.addEventListener("dragover", (event) => {
|
||||
event.preventDefault();
|
||||
image_drop_area.style.border = "2px dashed #333";
|
||||
});
|
||||
image_drop_area.addEventListener("dragleave", () => {
|
||||
image_drop_area.style.border = "2px dashed #ccc";
|
||||
});
|
||||
|
||||
image_drop_area.addEventListener("drop", async (e) => {
|
||||
e.preventDefault();
|
||||
image_drop_area.style.border = "2px dashed #ccc";
|
||||
|
||||
const files = e.dataTransfer.files;
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
let image_object = { id: crypto.randomUUID(), data_blob: new Blob([await files[i].arrayBuffer()]) };
|
||||
content_images.push(image_object);
|
||||
}
|
||||
updateImages();
|
||||
console.log(content_images);
|
||||
});
|
||||
|
||||
function updateImages() {
|
||||
// Clear existing listings
|
||||
qsa(".e-image-area .image").forEach((entry) => entry.remove());
|
||||
|
||||
// Add new entries based on saved list
|
||||
content_images.forEach((image) => {
|
||||
image_drop_area.insertAdjacentHTML("beforeend", `<div class="image"><img src="${URL.createObjectURL(image.data_blob)}" /></div>`);
|
||||
});
|
||||
}
|
|
@ -45,4 +45,4 @@
|
|||
</body>
|
||||
</html>
|
||||
|
||||
<script defer src="/js/login.js"></script>
|
||||
<script defer src="/js/newBlog.js"></script>
|
||||
|
|
Loading…
Reference in New Issue