From 64e45b18925519c196c48c431a7d0b8bab27fc59 Mon Sep 17 00:00:00 2001 From: James Collins Date: Mon, 28 Aug 2023 15:11:18 +1000 Subject: [PATCH] fixes --- app/Jobs/MediaJob.php | 6 +- app/Models/Media.php | 4 +- .../js/components/dialogs/SMDialogMedia.vue | 94 +++++++++++++------ 3 files changed, 69 insertions(+), 35 deletions(-) diff --git a/app/Jobs/MediaJob.php b/app/Jobs/MediaJob.php index 5eff596..487b7de 100644 --- a/app/Jobs/MediaJob.php +++ b/app/Jobs/MediaJob.php @@ -204,11 +204,11 @@ class MediaJob implements ShouldQueue } if ($rotate === 90) { - $filters->rotate(FFMpeg\Filters\Video\RotateFilter::ROTATE_90); - } elseif ($rotate === 190) { + $filters->rotate(FFMpeg\Filters\Video\RotateFilter::ROTATE_270); + } elseif ($rotate === 180) { $filters->rotate(FFMpeg\Filters\Video\RotateFilter::ROTATE_180); } elseif ($rotate === 270) { - $filters->rotate(FFMpeg\Filters\Video\RotateFilter::ROTATE_270); + $filters->rotate(FFMpeg\Filters\Video\RotateFilter::ROTATE_90); } } } diff --git a/app/Models/Media.php b/app/Models/Media.php index 47c0aaf..afd0203 100644 --- a/app/Models/Media.php +++ b/app/Models/Media.php @@ -799,7 +799,7 @@ class Media extends Model $fileExtension = File::extension($this->name); $tempImagePath = tempnam(sys_get_temp_dir(), 'thumb'); - $newFilename = pathinfo($this->name, PATHINFO_FILENAME) . "-thumb.webp"; + $newFilename = pathinfo($this->name, PATHINFO_FILENAME) . "-" . uniqid() . "-thumb.webp"; $success = false; if (strpos($this->mime_type, 'image/') === 0) { @@ -953,7 +953,7 @@ class Media extends Model $postfix = 'scaled'; } - $newFilename = pathinfo($this->name, PATHINFO_FILENAME) . "-$postfix.webp"; + $newFilename = pathinfo($this->name, PATHINFO_FILENAME) . "-" . uniqid() . "-$postfix.webp"; // Get the largest available variant if ($dimensions[0] >= $size['width'] && $dimensions[1] >= $size['height']) { diff --git a/resources/js/components/dialogs/SMDialogMedia.vue b/resources/js/components/dialogs/SMDialogMedia.vue index e1370ca..db740ba 100644 --- a/resources/js/components/dialogs/SMDialogMedia.vue +++ b/resources/js/components/dialogs/SMDialogMedia.vue @@ -36,7 +36,7 @@ Select Files

- {{ max_upload_size }} + Maximum upload file size: {{ max_upload_size }}

@@ -427,8 +419,6 @@ :style="{ backgroundImage: `url('${mediaGetThumbnail( item, - null, - true, )}')`, backgroundColor: item.status === 'OK' @@ -897,33 +887,77 @@ const startFilesUpload = async () => { convertFileNameToTitle(file.name), ); submitFormData.append("description", ""); - let result = await api.post({ - url: "/media", - body: submitFormData, - headers: { - "Content-Type": "multipart/form-data", - }, - }); - if (result.data) { - const data = result.data as MediaResponse; + try { + let result = await api.post({ + url: "/media", + body: submitFormData, + headers: { + "Content-Type": "multipart/form-data", + }, + progress: (progressEvent) => { + const currentUploadFileNumStr = + currentUploadFileNum.value.toString(); + mediaItems.value.every((item, index) => { + if (item.id == currentUploadFileNumStr) { + mediaItems.value[ + index + ].status = `${Math.floor( + (progressEvent.loaded / + progressEvent.total) * + 100, + )}% Uploaded`; + return false; + } + return true; + }); + }, + }); + if (result.data) { + const data = result.data as MediaResponse; + + const currentUploadFileNumStr = + currentUploadFileNum.value.toString(); + mediaItems.value.every((item, index) => { + if (item.id == currentUploadFileNumStr) { + mediaItems.value[index] = data.medium; + if (!selected.value) { + selected.value.push(data.medium); + } else if (props.multiple) { + selected.value.push(data.medium); + } + return false; + } + + return true; + }); + + totalItems.value++; + } + } catch (error) { const currentUploadFileNumStr = currentUploadFileNum.value.toString(); mediaItems.value.every((item, index) => { if (item.id == currentUploadFileNumStr) { - mediaItems.value[index] = data.medium; - if (!selected.value) { - selected.value.push(data.medium); - } else if (props.multiple) { - selected.value.push(data.medium); - } + mediaItems.value[index].status = "Error"; return false; } return true; }); - totalItems.value++; + let errorString = "A server error occurred"; + + if (error.status == 413) { + errorString = `The file is larger than ${max_upload_size.value}`; + } + + useToastStore().addToast({ + title: "Upload failed", + type: "danger", + content: errorString, + }); + } finally { updateFiles(); currentUploadFileNum.value++; } @@ -1330,6 +1364,8 @@ const handleDelete = async (item: Media) => { mediaItems.value = mediaItems.value.filter( (mediaItem) => mediaItem.id !== item.id, ); + + totalItems.value--; }) .catch((error) => { console.log(error); @@ -1439,9 +1475,7 @@ api.get({ if (result.data) { const data = result.data as ApiInfo; - max_upload_size.value = `Maximum upload file size: ${bytesReadable( - data.max_upload_size, - )}.`; + max_upload_size.value = bytesReadable(data.max_upload_size); } }) .catch(() => {