Better Image uploading
parent
404c7e6d83
commit
66c463f80a
|
@ -32,10 +32,11 @@
|
||||||
|
|
||||||
.e-image-area {
|
.e-image-area {
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
height: 220px;
|
min-height: 200px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||||
grid-template-rows: auto auto;
|
grid-template-rows: auto auto;
|
||||||
|
grid-gap: 4px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -51,14 +52,6 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: auto;
|
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 {
|
.e-content {
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
|
@ -67,6 +60,7 @@
|
||||||
}
|
}
|
||||||
.e-content textarea {
|
.e-content textarea {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
min-height: 300px;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -39,10 +39,11 @@ $background-body: #222;
|
||||||
|
|
||||||
.e-image-area {
|
.e-image-area {
|
||||||
background-color: $background-body;
|
background-color: $background-body;
|
||||||
height: 220px;
|
min-height: 200px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||||
grid-template-rows: auto auto;
|
grid-template-rows: auto auto;
|
||||||
|
grid-gap: 4px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -59,15 +60,6 @@ $background-body: #222;
|
||||||
margin: auto;
|
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 {
|
.e-content {
|
||||||
|
@ -76,6 +68,7 @@ $background-body: #222;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
textarea {
|
textarea {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
min-height: 300px;
|
||||||
color: white;
|
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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<script defer src="/js/login.js"></script>
|
<script defer src="/js/newBlog.js"></script>
|
||||||
|
|
Loading…
Reference in New Issue