109 lines
2.8 KiB
Svelte
109 lines
2.8 KiB
Svelte
<!--
|
|
Copyright (C) 2024 Intel Corporation
|
|
SPDX-License-Identifier: Apache-2.0
|
|
-->
|
|
|
|
<script lang="ts">
|
|
import { base64ImageStore } from "$lib/shared/stores/common/Store";
|
|
import { Dropzone } from "flowbite-svelte";
|
|
|
|
let value = [];
|
|
export let imageUrl = "";
|
|
|
|
$: if (imageUrl) {
|
|
uploadImage();
|
|
}
|
|
|
|
const uploadImage = async () => {
|
|
try {
|
|
if (imageUrl.startsWith("http://") || imageUrl.startsWith("https://")) {
|
|
base64ImageStore.set(imageUrl);
|
|
console.log("Image URL Stored:", imageUrl);
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
console.error("Error converting image to Base64:", error);
|
|
}
|
|
};
|
|
|
|
const dropHandle = (event) => {
|
|
event.preventDefault();
|
|
if (event.dataTransfer.items) {
|
|
[...event.dataTransfer.items].forEach((item) => {
|
|
if (item.kind === "file") {
|
|
const file = item.getAsFile();
|
|
if (file) {
|
|
value = [file.name]; // Allow only one file selection
|
|
readFileAsBase64(file); // Convert to Base64
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
[...event.dataTransfer.files].forEach((file) => {
|
|
value = [file.name]; // Allow only one file selection
|
|
readFileAsBase64(file); // Convert to Base64
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleChange = (event) => {
|
|
const files = event.target.files;
|
|
if (files.length > 0) {
|
|
value = [files[0].name]; // Allow only one file selection
|
|
readFileAsBase64(files[0]); // Convert to Base64
|
|
}
|
|
};
|
|
|
|
const readFileAsBase64 = (file) => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
const base64Data = reader.result; // Get Base64 data
|
|
base64ImageStore.set(base64Data); // Store the Base64 string in the store
|
|
imageUrl = URL.createObjectURL(file); // Keep the object URL for preview
|
|
};
|
|
reader.readAsDataURL(file); // Read the file as a Data URL
|
|
};
|
|
|
|
const showFiles = (files) => {
|
|
if (files.length === 1) return files[0];
|
|
let concat = files.join(", ");
|
|
if (concat.length > 40) concat = concat.slice(0, 40) + "...";
|
|
return concat;
|
|
};
|
|
</script>
|
|
|
|
<Dropzone
|
|
id="dropzone"
|
|
on:drop={dropHandle}
|
|
on:dragover={(event) => {
|
|
event.preventDefault();
|
|
}}
|
|
on:change={handleChange}
|
|
>
|
|
{#if value.length === 0 && !imageUrl}
|
|
<svg
|
|
aria-hidden="true"
|
|
class="mx-auto mb-3 h-10 w-10 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"
|
|
/>
|
|
</svg>
|
|
<p class="mb-2 text-center text-sm text-gray-500 dark:text-gray-400">
|
|
<span class="font-semibold">Click to upload</span> or drag and drop
|
|
</p>
|
|
<p class="text-center text-xs text-gray-500 dark:text-gray-400">
|
|
SVG, PNG, JPG
|
|
</p>
|
|
{:else if imageUrl}
|
|
<img src={imageUrl} alt="Uploaded Image" class="m-2 mx-auto block max-h-[15.5rem]" />
|
|
{/if}
|
|
</Dropzone>
|