adds photo upload size limiter

This commit is contained in:
Christian Beutel
2024-11-15 16:36:52 +01:00
parent 1b30c6cc1e
commit 24ef5998c0
12 changed files with 28 additions and 3 deletions

View File

@@ -2,6 +2,8 @@
import { getFileURL, readAsDataURLAsync } from "$lib/util/file_util"; import { getFileURL, readAsDataURLAsync } from "$lib/util/file_util";
import { onMount } from "svelte"; import { onMount } from "svelte";
import PhotoCard from "../photo_card.svelte"; import PhotoCard from "../photo_card.svelte";
import { show_toast } from "$lib/stores/toast_store";
import { _ } from "svelte-i18n";
export let id: string; export let id: string;
export let photos: string[]; export let photos: string[];
@@ -10,6 +12,7 @@
export let thumbnail: number = 0; export let thumbnail: number = 0;
export let showThumbnailControls: boolean = true; export let showThumbnailControls: boolean = true;
export let showExifControls: boolean = false; export let showExifControls: boolean = false;
export let maxSizeBytes = 5242880;
let photoPreviews: string[] = []; let photoPreviews: string[] = [];
@@ -55,11 +58,21 @@
} }
for (const file of files) { for (const file of files) {
if (file.size > maxSizeBytes) {
show_toast({
type: "error",
text: $_("file-too-big", {
values: { file: file.name, size: "5 MB" },
}),
icon: "close",
});
continue;
}
let photoFile = file; let photoFile = file;
if (!file.type.startsWith("image")) { if (!file.type.startsWith("image")) {
continue; continue;
} else if (file.type === "image/heic") { } else if (file.type === "image/heic") {
const heic2any = (await import("heic2any")).default const heic2any = (await import("heic2any")).default;
photoFile = new File( photoFile = new File(
[ [
(await heic2any({ (await heic2any({

View File

@@ -276,7 +276,7 @@
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<span>{$_("category")}</span> <span>{$_("category")}</span>
<span class="font-semibold text-lg" <span class="font-semibold text-lg"
>{trail.expand.category.name}</span >{$_(trail.expand.category.name)}</span
> >
</div> </div>
{/if} {/if}

View File

@@ -91,6 +91,7 @@
"export-all-trails": "Alle Routen exportieren", "export-all-trails": "Alle Routen exportieren",
"features": "Features", "features": "Features",
"file-format": "Dateiformat", "file-format": "Dateiformat",
"file-too-big": "",
"filter-categories": "Kategorien filtern", "filter-categories": "Kategorien filtern",
"focus-map-on": "Karte fokussieren auf", "focus-map-on": "Karte fokussieren auf",
"french": "Französisch", "french": "Französisch",

View File

@@ -91,6 +91,7 @@
"export-all-trails": "Export all trails", "export-all-trails": "Export all trails",
"features": "Features", "features": "Features",
"file-format": "File format", "file-format": "File format",
"file-too-big": "File {file} is too big (max. {size})",
"filter-categories": "Filter categories", "filter-categories": "Filter categories",
"focus-map-on": "Focus map on", "focus-map-on": "Focus map on",
"french": "French", "french": "French",

View File

@@ -91,6 +91,7 @@
"export-all-trails": "", "export-all-trails": "",
"features": "Fonctionnalités", "features": "Fonctionnalités",
"file-format": "", "file-format": "",
"file-too-big": "",
"filter-categories": "", "filter-categories": "",
"focus-map-on": "", "focus-map-on": "",
"french": "Français", "french": "Français",

View File

@@ -91,6 +91,7 @@
"export-all-trails": "", "export-all-trails": "",
"features": "Jellemzők", "features": "Jellemzők",
"file-format": "", "file-format": "",
"file-too-big": "",
"filter-categories": "", "filter-categories": "",
"focus-map-on": "", "focus-map-on": "",
"french": "Francia", "french": "Francia",

View File

@@ -91,6 +91,7 @@
"export-all-trails": "", "export-all-trails": "",
"features": "Caratteristiche", "features": "Caratteristiche",
"file-format": "Formato del file", "file-format": "Formato del file",
"file-too-big": "",
"filter-categories": "", "filter-categories": "",
"focus-map-on": "", "focus-map-on": "",
"french": "Francese", "french": "Francese",

View File

@@ -91,6 +91,7 @@
"export-all-trails": "", "export-all-trails": "",
"features": "Kenmerken", "features": "Kenmerken",
"file-format": "", "file-format": "",
"file-too-big": "",
"filter-categories": "", "filter-categories": "",
"focus-map-on": "", "focus-map-on": "",
"french": "Frans", "french": "Frans",

View File

@@ -91,6 +91,7 @@
"export-all-trails": "", "export-all-trails": "",
"features": "Funkcje", "features": "Funkcje",
"file-format": "", "file-format": "",
"file-too-big": "",
"filter-categories": "", "filter-categories": "",
"focus-map-on": "", "focus-map-on": "",
"french": "Francuski", "french": "Francuski",

View File

@@ -91,6 +91,7 @@
"export-all-trails": "", "export-all-trails": "",
"features": "Características", "features": "Características",
"file-format": "", "file-format": "",
"file-too-big": "",
"filter-categories": "", "filter-categories": "",
"focus-map-on": "", "focus-map-on": "",
"french": "Francês", "french": "Francês",

View File

@@ -91,6 +91,7 @@
"export-all-trails": "", "export-all-trails": "",
"features": "特性", "features": "特性",
"file-format": "", "file-format": "",
"file-too-big": "",
"filter-categories": "", "filter-categories": "",
"focus-map-on": "", "focus-map-on": "",
"french": "法语", "french": "法语",

View File

@@ -296,8 +296,11 @@
elevation_loss: $form.elevation_loss, elevation_loss: $form.elevation_loss,
duration: $form.duration ? $form.duration * 60 : undefined, duration: $form.duration ? $form.duration * 60 : undefined,
}); });
console.log(selectedFile.type);
log.expand.gpx_data = gpxData; log.expand.gpx_data = gpxData;
log._gpx = selectedFile; const blob = new Blob([gpxData], { type: selectedFile.type });
log._gpx = new File([blob], selectedFile.name, { type: selectedFile.type });
$form.expand.summit_logs.push(log); $form.expand.summit_logs.push(log);