Migrated from image urls to image uuids

This commit is contained in:
Mawoka
2023-05-27 16:37:21 +02:00
parent 025c1fddab
commit 10668e420b
23 changed files with 163 additions and 100 deletions
+3 -2
View File
@@ -225,7 +225,8 @@
{#if quiz_data.questions[selected_question].image !== null}
<div>
<img
src={quiz_data.questions[selected_question].image}
src="/api/v1/storage/download/{quiz_data.questions[selected_question]
.image}"
class="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
alt="Content for Question"
/>
@@ -320,7 +321,7 @@
<div class="h-[30vh] m-auto w-auto mt-12">
<img
class="max-h-full max-w-full block"
src={quiz_data.cover_image}
src="/api/v1/storage/download/{quiz_data.cover_image}"
alt="Not provided"
/>
</div>
@@ -158,7 +158,7 @@
<div class="h-[20vh] m-auto w-auto">
<img
class="max-h-full max-w-full block"
src={quiz.cover_image}
src="/api/v1/storage/download/{quiz.cover_image}"
alt="Not provided"
loading="lazy"
/>
@@ -302,7 +302,7 @@
{#if visibleImages?.[i]?.[q]}
<img
class="max-h-full max-w-full block"
src={question.image}
src="/api/v1/storage/download/{question.image}"
alt="Not provided"
/>
{/if}
+2 -1
View File
@@ -129,7 +129,8 @@
</svg>
</button>
<img
src={data.questions[selected_question].image}
src="/api/v1/storage/download/{data.questions[selected_question]
.image}"
alt="not available"
class="max-h-64 h-auto w-auto"
/>
+2 -2
View File
@@ -42,7 +42,7 @@
<div
class="dark:bg-gray-700 h-full"
style="background-repeat: no-repeat;background-size: 100% 100%;background-image: {data.background_image
? `url("${data.background_image}")`
? `url("/api/v1/storage/download/${data.background_image}")`
: `unset`}"
>
<div class="flex justify-center pt-10 w-full">
@@ -68,7 +68,7 @@
{#if data.cover_image != undefined && data.cover_image !== ''}
<div class="flex justify-center pt-10 w-full max-h-72 w-full">
<img
src={data.cover_image}
src="/api/v1/storage/download/{data.cover_image}"
alt="not available"
class="max-h-72 h-auto w-auto"
on:contextmenu|preventDefault={() => {
+2 -2
View File
@@ -201,11 +201,11 @@
{#if question.image}
<div class="flex justify-center align-middle pb-0.5">
<img
src={question.image}
src="/api/v1/storage/download/{question.image}"
class="h-10 border rounded-lg"
alt="Not available"
use:tippy={{
content: `<img src='${question.image}' alt='Not available' class='rounded'>`,
content: `<img src='/api/v1/storage/download/${question.image}' alt='Not available' class='rounded'>`,
allowHTML: true
}}
/>
+7 -11
View File
@@ -45,33 +45,29 @@
quality: 0.6
})
.use(XHRUpload, {
endpoint: `/api/v1/editor/image?edit_id=${edit_id}&pow_data=${pow_data}`
endpoint: `/api/v1/storage/`
});
const props = {
inline: true,
restrictions: {
maxFileSize: 2_000_000,
maxNumberOfFiles: 1,
allowedFileTypes: ['.gif', '.jpg', '.jpeg', '.png', '.svg', '.webp']
maxFileSize: 10_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}`;
data.cover_image = image_id;
} else if (selected_question === -1) {
data.background_image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
data.background_image = image_id;
} else {
data.questions[
selected_question
].image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
data.questions[selected_question].image = image_id;
}
console.log(selected_question, data);
+4
View File
@@ -384,5 +384,9 @@
"popover": {
"copied_to_clipboard": "Copied to clipboard!"
}
},
"public_user_page": {
"joined_on": "Joined on {{date}}",
"no_original_quizzes": "This user doesn't have any original quizzes"
}
}
+1 -1
View File
@@ -154,7 +154,7 @@
{#if question.image !== null && game_mode !== 'kahoot'}
<div class="max-h-full">
<img
src={question.image}
src="/api/v1/storage/download/{question.image}"
class="object-cover mx-auto mb-8 max-h-[90%]"
alt="Content for Question"
/>
+5 -1
View File
@@ -15,7 +15,11 @@
{#if cover_image}
<div class="flex justify-center align-middle items-center">
<div class="h-[30vh] m-auto w-auto mt-12">
<img class="max-h-full max-w-full block" src={cover_image} alt="Not provided" />
<img
class="max-h-full max-w-full block"
src="/api/v1/storage/download/{cover_image}"
alt="Not provided"
/>
</div>
</div>
{/if}
+1 -1
View File
@@ -94,7 +94,7 @@
{#if question.image !== null}
<div>
<img
src={question.image}
src="/api/v1/storage/download/{question.image}"
class="max-h-[40vh] object-cover mx-auto mb-8 w-auto"
alt="Content for Question"
/>
@@ -46,7 +46,7 @@
{#if data.cover_image != undefined && data.cover_image !== ''}
<div class="flex justify-center pt-10 w-full max-h-72 w-full">
<img
src={data.cover_image}
src="/api/v1/storage/download/{data.cover_image}"
alt="not available"
class="max-h-72 h-auto w-auto"
on:contextmenu|preventDefault={() => {
+1 -8
View File
@@ -65,14 +65,7 @@ export const dataSchema = yup.object({
yup.object({
question: yup.string().required('A question-title is required').max(299),
time: yup.number().required().positive('The time has to be positive'),
image: yup
.string()
.nullable()
.matches(
/^(http(|s):\/\/.*(|:)\d*\/api\/v1\/storage\/download\/.{36}--.{36}|https:\/\/i\.imgur\.com\/.{7}.(jpg|png|gif))$|^$/,
"The image-url isn't valid"
)
.lowercase(),
image: yup.string().nullable().lowercase(),
answers: yup.lazy((v) => {
if (Array.isArray(v)) {
if (typeof v[0].right === 'boolean') {