Mawoka
127 lines
3.5 KiB
Svelte
127 lines
3.5 KiB
Svelte
<!--
|
|
- This Source Code Form is subject to the terms of the Mozilla Public
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
|
-->
|
|
<script lang="ts">
|
|
import { Dashboard as SvelteDashboard } from '@uppy/svelte';
|
|
import Uppy from '@uppy/core';
|
|
import DropTarget from '@uppy/drop-target';
|
|
import XHRUpload from '@uppy/xhr-upload';
|
|
import ImageEditor from '@uppy/image-editor';
|
|
import Dashboard from '@uppy/dashboard';
|
|
import Compressor from '@uppy/compressor';
|
|
import { fade } from 'svelte/transition';
|
|
|
|
// CSS imports
|
|
import '@uppy/core/dist/style.css';
|
|
import '@uppy/dashboard/dist/style.css';
|
|
import '@uppy/drop-target/dist/style.css';
|
|
// import '@uppy/file-input/dist/style.css'
|
|
import '@uppy/image-editor/dist/style.css';
|
|
import type { EditorData } from '../quiz_types';
|
|
import { getLocalization } from '$lib/i18n';
|
|
|
|
const { t } = getLocalization();
|
|
|
|
export let modalOpen = false;
|
|
export let edit_id: string;
|
|
export let data: EditorData;
|
|
export let selected_question: number;
|
|
export let pow_data;
|
|
export let pow_salt: string;
|
|
|
|
console.log(pow_data);
|
|
const uppy = new Uppy()
|
|
.use(DropTarget, {
|
|
target: document.body
|
|
})
|
|
.use(Dashboard)
|
|
.use(ImageEditor, {
|
|
target: Dashboard,
|
|
quality: 0.8
|
|
})
|
|
.use(Compressor, {
|
|
quality: 0.6
|
|
})
|
|
.use(XHRUpload, {
|
|
endpoint: `/api/v1/editor/image?edit_id=${edit_id}&pow_data=${pow_data}`
|
|
});
|
|
const props = {
|
|
inline: true,
|
|
restrictions: {
|
|
maxFileSize: 2_000_000,
|
|
maxNumberOfFiles: 1,
|
|
allowedFileTypes: ['.gif', '.jpg', '.jpeg', '.png', '.svg', '.webp']
|
|
}
|
|
};
|
|
let image_id;
|
|
uppy.on('upload-success', (file, response) => {
|
|
image_id = response.body.id;
|
|
pow_salt = response.body.pow_data;
|
|
console.log(pow_salt, response.body);
|
|
pow_data = undefined;
|
|
});
|
|
uppy.on('complete', (_) => {
|
|
console.log(pow_data);
|
|
if (selected_question === undefined) {
|
|
data.cover_image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
|
|
} else if (selected_question === -1) {
|
|
data.background_image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
|
|
} else {
|
|
data.questions[
|
|
selected_question
|
|
].image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
|
|
}
|
|
console.log(selected_question, data);
|
|
|
|
modalOpen = false;
|
|
});
|
|
console.log(edit_id);
|
|
</script>
|
|
|
|
{#if modalOpen}
|
|
<div
|
|
class="w-full h-full absolute top-0 left-0 bg-opacity-60 z-20 flex justify-center"
|
|
transition:fade|local
|
|
>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
class="rounded-t-lg bg-black text-white px-1"
|
|
on:click={() => {
|
|
modalOpen = false;
|
|
}}
|
|
>Close
|
|
</button>
|
|
<div>
|
|
<SvelteDashboard {uppy} width="100%" {props} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<div class="flex justify-center w-full pt-10" transition:fade|local>
|
|
<button
|
|
class="rounded-lg p-4 flex justify-center bg-transparent border-gray-500 border-2 w-1/2 hover:bg-gray-300 dark:hover:bg-gray-600 transition"
|
|
type="button"
|
|
on:click={() => {
|
|
modalOpen = true;
|
|
}}
|
|
><span class="italic">{$t('uploader.add_image')}</span>
|
|
<svg
|
|
class="w-6 h-6 inline-block"
|
|
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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|