diff --git a/app/Http/Controllers/Api/MediaController.php b/app/Http/Controllers/Api/MediaController.php
index 992e3de..5d9580d 100644
--- a/app/Http/Controllers/Api/MediaController.php
+++ b/app/Http/Controllers/Api/MediaController.php
@@ -8,6 +8,7 @@ use App\Http\Requests\MediaRequest;
 use App\Models\Media;
 use Illuminate\Http\Request;
 use Illuminate\Support\Carbon;
+use Illuminate\Support\Facades\Log;
 use Laravel\Sanctum\PersonalAccessToken;
 
 class MediaController extends ApiController
@@ -119,19 +120,36 @@ class MediaController extends ApiController
         if (MediaConductor::updatable($medium) === true) {
             $file = $request->file('file');
             if ($file !== null) {
-                if ($file->getSize() > Media::maxUploadSize()) {
-                    return $this->respondTooLarge();
+                if ($file->isValid() !== true) {
+                    switch ($file->getError()) {
+                        case UPLOAD_ERR_INI_SIZE:
+                        case UPLOAD_ERR_FORM_SIZE:
+                            return $this->respondTooLarge();
+                        case UPLOAD_ERR_PARTIAL:
+                            return $this->respondWithErrors(['file' => 'The file upload was interrupted.']);
+                        default:
+                            return $this->respondWithErrors(['file' => 'An error occurred uploading the file to the server.']);
+                    }
                 }
 
-                if ($medium->updateFile($file) === false) {
+                if ($file->getSize() > Media::getMaxUploadSize()) {
+                    return $this->respondTooLarge();
+                }
+            }
+
+            $medium->update($request->all());
+
+            if ($file !== null) {
+                try {
+                    $medium->updateWithUploadedFile($file);
+                } catch (\Exception $e) {
                     return $this->respondWithErrors(
-                        ['file' => 'The file could not be stored on the server'],
+                        ['file' => $e->getMessage()],
                         HttpResponseCodes::HTTP_INTERNAL_SERVER_ERROR
                     );
                 }
-            }//end if
+            }
 
-            $medium->update($request->all());
             return $this->respondAsResource(MediaConductor::model($request, $medium));
         }//end if
 
diff --git a/app/Jobs/StoreUploadedFileJob.php b/app/Jobs/StoreUploadedFileJob.php
index 6f9f724..10591f4 100644
--- a/app/Jobs/StoreUploadedFileJob.php
+++ b/app/Jobs/StoreUploadedFileJob.php
@@ -44,11 +44,12 @@ class StoreUploadedFileJob implements ShouldQueue
      */
     protected $replaceExisting;
 
+
     /**
      * Create a new job instance.
      *
-     * @param Media  $media    The media model.
-     * @param string $filePath The uploaded file.
+     * @param Media   $media           The media model.
+     * @param string  $filePath        The uploaded file.
      * @param boolean $replaceExisting Replace existing files.
      * @return void
      */
@@ -74,31 +75,30 @@ class StoreUploadedFileJob implements ShouldQueue
             $this->media->save();
 
             if (strlen($this->uploadedFilePath) > 0) {
-                if (Storage::disk($storageDisk)->exists($fileName) == false || $this->replaceExisting == true) {
+                if (Storage::disk($storageDisk)->exists($fileName) === false || $this->replaceExisting === true) {
                     Storage::disk($storageDisk)->putFileAs('/', new SplFileInfo($this->uploadedFilePath), $fileName);
                     Log::info("uploading file {$storageDisk} / {$fileName} / {$this->uploadedFilePath}");
                 } else {
                     Log::info("file {$fileName} already exists in {$storageDisk} / {$this->uploadedFilePath}. Not replacing file and using local {$fileName} for variants.");
                 }
             } else {
-                if (Storage::disk($storageDisk)->exists($fileName) == true) {
+                if (Storage::disk($storageDisk)->exists($fileName) === true) {
                     Log::info("file {$fileName} already exists in {$storageDisk} / {$this->uploadedFilePath}. No local {$fileName} for variants, downloading from CDN.");
                     $readStream = Storage::disk($storageDisk)->readStream($fileName);
                     $tempFilePath = tempnam(sys_get_temp_dir(), 'download-');
                     $writeStream = fopen($tempFilePath, 'w');
-                    while (!feof($readStream)) {
+                    while (feof($readStream) !== true) {
                         fwrite($writeStream, fread($readStream, 8192));
                     }
                     fclose($readStream);
                     fclose($writeStream);
                     $this->uploadedFilePath = $tempFilePath;
-
                 } else {
                     $errorStr = "cannot upload file {$storageDisk} / {$fileName} / {$this->uploadedFilePath} as temp file is empty";
                     Log::info($errorStr);
                     throw new \Exception($errorStr);
                 }
-            }
+            }//end if
 
             if (strpos($this->media->mime_type, 'image/') === 0) {
                 $this->media->status = "Optimizing image";
@@ -160,7 +160,7 @@ class StoreUploadedFileJob implements ShouldQueue
                         }//end if
                     } else {
                         Log::info("variant {$variantName} already exists for file {$fileName}");
-                    }
+                    }//end if
                 }//end foreach
 
                 // Set missing variants to the largest available variant
diff --git a/app/Models/Media.php b/app/Models/Media.php
index 57f3e6d..3840b02 100644
--- a/app/Models/Media.php
+++ b/app/Models/Media.php
@@ -206,7 +206,7 @@ class Media extends Model
      */
     public function getUrlAttribute()
     {
-        if(isset($this->attributes['name'])) {
+        if (isset($this->attributes['name']) === true) {
             $url = config("filesystems.disks.$this->storage.url");
             return "$url/$this->name";
         }
@@ -247,6 +247,28 @@ class Media extends Model
      * @return null|Media The result or null if not successful.
      */
     public static function createFromUploadedFile(Request $request, UploadedFile $file)
+    {
+        $request->merge([
+            'title' => $request->get('title', ''),
+            'name' => '',
+            'size' => 0,
+            'mime_type' => '',
+            'status' => '',
+        ]);
+
+        $mediaItem = $request->user()->media()->create($request->all());
+        $mediaItem->updateWithUploadedFile($file);
+
+        return $mediaItem;
+    }
+
+    /**
+     * Update Media with UploadedFile data.
+     *
+     * @param Illuminate\Http\UploadedFile $file The file.
+     * @return null|Media The media item.
+     */
+    public function updateWithUploadedFile(UploadedFile $file)
     {
         if ($file === null || $file->isValid() !== true) {
             throw new \Exception('The file is invalid.', self::INVALID_FILE_ERROR);
@@ -261,34 +283,40 @@ class Media extends Model
             throw new \Exception('The file name already exists in storage.', self::FILE_NAME_EXISTS_ERROR);
         }
 
-        $request->merge([
-            'title' => $request->get('title', $name),
-            'name' => $name,
-            'size' => $file->getSize(),
-            'mime_type' => $file->getMimeType(),
-            'status' => 'Processing media',
-        ]);
+        // remove file if there is an existing entry in this medium item
+        if (strlen($this->name) > 0 && strlen($this->storage) > 0) {
+            Storage::disk($this->storage)->delete($this->name);
+            foreach ($this->variants as $variantName => $fileName) {
+                Storage::disk($this->storage)->delete($fileName);
+            }
 
-        $mediaItem = $request->user()->media()->create($request->all());
-
-        try {
-            $temporaryFilePath = tempnam(sys_get_temp_dir(), 'upload');
-            $temporaryDirectoryPath = dirname($temporaryFilePath);
-            $file->move($temporaryDirectoryPath, basename($temporaryFilePath));
-        } catch (\Exception $e) {
-            throw new \Exception('Could not temporarily store file. ' . $e->getMessage(), self::TEMP_FILE_ERROR);
+            $this->name = '';
+            $this->variants = [];
         }
 
+        if (strlen($this->title) === 0) {
+            $this->title = $name;
+        }
+
+        $this->name = $name;
+        $this->size = $file->getSize();
+        $this->mime_type = $file->getMimeType();
+        $this->status = 'Processing media';
+        $this->save();
+
+        $temporaryFilePath = tempnam(sys_get_temp_dir(), 'upload');
+        copy($file->path(), $temporaryFilePath);
+
         try {
-            StoreUploadedFileJob::dispatch($mediaItem, $temporaryFilePath)->onQueue('media');
+            StoreUploadedFileJob::dispatch($this, $temporaryFilePath)->onQueue('media');
         } catch (\Exception $e) {
-            $mediaItem->delete();
-            $mediaItem = null;
+            $this->status = 'Error';
+            $this->save();
 
             throw $e;
         }//end try
 
-        return $mediaItem;
+        return $this;
     }
 
     /**
diff --git a/composer.lock b/composer.lock
index 0dc22dd..883e296 100644
--- a/composer.lock
+++ b/composer.lock
@@ -62,16 +62,16 @@
         },
         {
             "name": "aws/aws-sdk-php",
-            "version": "3.263.14",
+            "version": "3.268.16",
             "source": {
                 "type": "git",
                 "url": "https://github.com/aws/aws-sdk-php.git",
-                "reference": "7a6a43fad8899e3be3c46471fa3802331620e36b"
+                "reference": "b59134c9ca64dcb9de6f7dbbcb9d5a75ed665a98"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/7a6a43fad8899e3be3c46471fa3802331620e36b",
-                "reference": "7a6a43fad8899e3be3c46471fa3802331620e36b",
+                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/b59134c9ca64dcb9de6f7dbbcb9d5a75ed665a98",
+                "reference": "b59134c9ca64dcb9de6f7dbbcb9d5a75ed665a98",
                 "shasum": ""
             },
             "require": {
@@ -151,9 +151,9 @@
             "support": {
                 "forum": "https://forums.aws.amazon.com/forum.jspa?forumID=80",
                 "issues": "https://github.com/aws/aws-sdk-php/issues",
-                "source": "https://github.com/aws/aws-sdk-php/tree/3.263.14"
+                "source": "https://github.com/aws/aws-sdk-php/tree/3.268.16"
             },
-            "time": "2023-04-20T18:21:44+00:00"
+            "time": "2023-04-21T21:37:05+00:00"
         },
         {
             "name": "brick/math",
@@ -9508,5 +9508,5 @@
         "php": "^8.0.2"
     },
     "platform-dev": [],
-    "plugin-api-version": "2.1.0"
+    "plugin-api-version": "2.3.0"
 }
diff --git a/config/filesystems.php b/config/filesystems.php
index 4b8e02e..5f66356 100644
--- a/config/filesystems.php
+++ b/config/filesystems.php
@@ -31,10 +31,7 @@ return [
     'disks' => [
         'local' => [
             'driver' => 'local',
-            'root' => storage_path('app/uploads'),
-            'throw' => false,
-            'url' => env('STORAGE_LOCAL_URL'),
-            'public' => true,
+            'root' => storage_path('app'),
         ],
 
         'cdn' => [
diff --git a/package-lock.json b/package-lock.json
index 5cf87f7..f6909f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -475,9 +475,9 @@
             }
         },
         "node_modules/@eslint/js": {
-            "version": "8.38.0",
-            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
-            "integrity": "sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==",
+            "version": "8.39.0",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz",
+            "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==",
             "dev": true,
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -729,9 +729,9 @@
             "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
         },
         "node_modules/@types/node": {
-            "version": "18.15.12",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.12.tgz",
-            "integrity": "sha512-Wha1UwsB3CYdqUm2PPzh/1gujGCNtWVUYF0mB00fJFoR4gTyWTDPjSm+zBF787Ahw8vSGgBja90MkgFwvB86Dg=="
+            "version": "18.15.13",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.13.tgz",
+            "integrity": "sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q=="
         },
         "node_modules/@types/semver": {
             "version": "7.3.13",
@@ -1607,9 +1607,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001480",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz",
-            "integrity": "sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==",
+            "version": "1.0.30001481",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz",
+            "integrity": "sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -1936,9 +1936,9 @@
             "dev": true
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.368",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.368.tgz",
-            "integrity": "sha512-e2aeCAixCj9M7nJxdB/wDjO6mbYX+lJJxSJCXDzlr5YPGYVofuJwGN9nKg2o6wWInjX6XmxRinn3AeJMK81ltw==",
+            "version": "1.4.369",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.369.tgz",
+            "integrity": "sha512-LfxbHXdA/S+qyoTEA4EbhxGjrxx7WK2h6yb5K2v0UCOufUKX+VZaHbl3svlzZfv9sGseym/g3Ne4DpsgRULmqg==",
             "peer": true
         },
         "node_modules/emoji-regex": {
@@ -2032,15 +2032,15 @@
             }
         },
         "node_modules/eslint": {
-            "version": "8.38.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.38.0.tgz",
-            "integrity": "sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==",
+            "version": "8.39.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.39.0.tgz",
+            "integrity": "sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==",
             "dev": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.2.0",
                 "@eslint-community/regexpp": "^4.4.0",
                 "@eslint/eslintrc": "^2.0.2",
-                "@eslint/js": "8.38.0",
+                "@eslint/js": "8.39.0",
                 "@humanwhocodes/config-array": "^0.11.8",
                 "@humanwhocodes/module-importer": "^1.0.1",
                 "@nodelib/fs.walk": "^1.2.8",
@@ -2050,7 +2050,7 @@
                 "debug": "^4.3.2",
                 "doctrine": "^3.0.0",
                 "escape-string-regexp": "^4.0.0",
-                "eslint-scope": "^7.1.1",
+                "eslint-scope": "^7.2.0",
                 "eslint-visitor-keys": "^3.4.0",
                 "espree": "^9.5.1",
                 "esquery": "^1.4.2",
@@ -3473,9 +3473,9 @@
             }
         },
         "node_modules/rollup": {
-            "version": "3.20.6",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.6.tgz",
-            "integrity": "sha512-2yEB3nQXp/tBQDN0hJScJQheXdvU2wFhh6ld7K/aiZ1vYcak6N/BKjY1QrU6BvO2JWYS8bEs14FRaxXosxy2zw==",
+            "version": "3.20.7",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.7.tgz",
+            "integrity": "sha512-P7E2zezKSLhWnTz46XxjSmInrbOCiul1yf+kJccMxT56vxjHwCbDfoLbiqFgu+WQoo9ij2PkraYaBstgB2prBA==",
             "bin": {
                 "rollup": "dist/bin/rollup"
             },
diff --git a/public/uploadabiwAz b/public/uploadabiwAz
new file mode 100644
index 0000000..00313cc
Binary files /dev/null and b/public/uploadabiwAz differ
diff --git a/resources/css/utils.scss b/resources/css/utils.scss
index 1c796ce..dda1119 100644
--- a/resources/css/utils.scss
+++ b/resources/css/utils.scss
@@ -114,7 +114,7 @@
 }
 
 .flex-row-reverse {
-    flex-direction: row-reverse;
+    flex-direction: row-reverse !important;
 }
 
 .flex-column {
diff --git a/resources/js/components/SMButton.vue b/resources/js/components/SMButton.vue
index 69ac127..4b6bbf7 100644
--- a/resources/js/components/SMButton.vue
+++ b/resources/js/components/SMButton.vue
@@ -8,6 +8,7 @@
             props.size,
             { 'button-block': block },
             { 'button-dropdown': dropdown },
+            { 'button-loading': loading },
         ]"
         ref="buttonRef"
         :style="{ minWidth: minWidth }"
@@ -146,8 +147,10 @@ if (props.form !== undefined) {
     watch(
         () => props.form.loading(),
         (newValue) => {
-            loading.value = newValue;
             disabled.value = newValue;
+            if (buttonType === "submit") {
+                loading.value = newValue;
+            }
         }
     );
 }
@@ -265,7 +268,7 @@ const handleClickItem = (item: string) => {
 
     &:disabled,
     &.primary:disabled {
-        background-color: var(--base-color-dark);
+        background-color: var(--base-color-dark) !important;
         box-shadow: none;
     }
 
diff --git a/resources/js/components/SMImage.vue b/resources/js/components/SMImage.vue
new file mode 100644
index 0000000..b0327c0
--- /dev/null
+++ b/resources/js/components/SMImage.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="image">
+        <SMLoading v-if="imgLoaded == false && imgError == false" />
+        <img
+            v-if="imgError == false"
+            :src="src"
+            @load="imgLoaded = true"
+            @error="imgError = true" />
+        <div v-if="imgError == true" class="image-error">
+            <ion-icon name="alert-circle-outline"></ion-icon>
+            <p>Error loading image</p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import SMLoading from "./SMLoading.vue";
+
+defineProps({
+    src: {
+        type: String,
+        required: true,
+    },
+});
+
+const imgLoaded = ref(false);
+const imgError = ref(false);
+</script>
+
+<style lang="scss">
+.image {
+    display: flex;
+    flex-basis: 300px;
+
+    img {
+        max-height: 100%;
+        max-width: 100%;
+        object-fit: contain;
+        border-radius: 8px;
+    }
+
+    .image-error {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        ion-icon {
+            font-size: 300%;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+}
+</style>
diff --git a/resources/js/components/SMLoading.vue b/resources/js/components/SMLoading.vue
index 791e0d7..0967e99 100644
--- a/resources/js/components/SMLoading.vue
+++ b/resources/js/components/SMLoading.vue
@@ -1,6 +1,9 @@
 <template>
-    <div class="loading-container">
-        <SMLoadingIcon v-bind="{ large: props.large }" />
+    <div :class="['loading-background', { overlay: props.overlay }]">
+        <div :class="{ 'loading-box': props.overlay }">
+            <SMLoadingIcon v-bind="{ large: props.large }" />
+            <p v-if="props.text" class="loading-text">{{ props.text }}</p>
+        </div>
     </div>
 </template>
 
@@ -13,14 +16,54 @@ const props = defineProps({
         default: false,
         required: false,
     },
+    text: {
+        type: String,
+        default: "",
+        required: false,
+    },
+    overlay: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
 });
 </script>
 
 <style lang="scss">
-.loading-container {
+.loading-background {
     display: flex;
     flex-grow: 1;
     align-items: center;
     justify-content: center;
+
+    &.overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 10000;
+        background-color: rgba(0, 0, 0, 0.4);
+        backdrop-filter: blur(2px);
+        -webkit-backdrop-filter: blur(2px);
+    }
+
+    div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .loading-box {
+        background-color: #fff;
+        padding: 48px 48px 16px 48px;
+        border-radius: 10px;
+        box-shadow: var(--base-shadow);
+
+        .loading-text {
+            font-size: 150%;
+        }
+    }
 }
 </style>
diff --git a/resources/js/components/SMTable.vue b/resources/js/components/SMTable.vue
index e9e746a..3cb075a 100644
--- a/resources/js/components/SMTable.vue
+++ b/resources/js/components/SMTable.vue
@@ -17,17 +17,11 @@
                     :data-title="header['text']"
                     :key="`item-row-${index}-${header['value']}`">
                     <template v-if="slots[`item-${header['value']}`]">
-                        <slot
-                            :name="`item-${header['value']}`"
-                            v-bind="item as any">
+                        <slot :name="`item-${header['value']}`" v-bind="item">
                         </slot>
                     </template>
                     <template v-else>
-                        {{
-                            header["value"]
-                                .split(".")
-                                .reduce((item, key) => item[key], item)
-                        }}
+                        {{ getItemValue(item, header["value"]) }}
                     </template>
                 </td>
             </tr>
@@ -57,6 +51,22 @@ const slots = useSlots();
 const handleRowClick = (item) => {
     emits("rowClick", item);
 };
+
+const getItemValue = (data: unknown, key: string): string => {
+    if (typeof data === "object" && data !== null) {
+        return key.split(".").reduce((item, key) => item[key], data);
+    }
+
+    return "";
+};
+
+const hasClassLong = (text: unknown): boolean => {
+    if (typeof text == "string") {
+        return text.length >= 35;
+    }
+
+    return false;
+};
 </script>
 
 <style lang="scss">
@@ -81,6 +91,10 @@ const handleRowClick = (item) => {
     td {
         font-size: 85%;
         background-color: #fff;
+
+        &.long {
+            font-size: 75%;
+        }
     }
 
     tbody {
@@ -127,16 +141,19 @@ const handleRowClick = (item) => {
             border: none;
             border-bottom: 1px solid #eee;
             position: relative;
-            padding: 8px 12px 8px 50%;
+            padding: 8px 12px 8px 40%;
             white-space: normal;
             text-align: left;
 
             &:before {
                 position: absolute;
-                padding: 8px 12px;
+                display: flex;
+                align-items: center;
+                padding-left: 12px;
                 top: 0;
+                bottom: 0;
                 left: 0;
-                width: 45%;
+                width: 35%;
                 white-space: nowrap;
                 text-align: left;
                 font-weight: 600;
diff --git a/resources/js/components/SMToast.vue b/resources/js/components/SMToast.vue
index 43089f7..09d58d2 100644
--- a/resources/js/components/SMToast.vue
+++ b/resources/js/components/SMToast.vue
@@ -122,11 +122,11 @@ onMounted(() => {
         }
     }
 
-    &.success .sm-toast-inner {
+    &.success .toast-inner {
         border-left-color: var(--success-color);
     }
 
-    &.danger .sm-toast-inner {
+    &.danger .toast-inner {
         border-left-color: var(--danger-color);
     }
 }
diff --git a/resources/js/components/dialogs/SMDialogConfirm.vue b/resources/js/components/dialogs/SMDialogConfirm.vue
index dc57a88..198759e 100644
--- a/resources/js/components/dialogs/SMDialogConfirm.vue
+++ b/resources/js/components/dialogs/SMDialogConfirm.vue
@@ -1,6 +1,6 @@
 <template>
     <SMFormCard>
-        <h1>{{ props.title }}</h1>
+        <h3>{{ props.title }}</h3>
         <p v-html="computedSanitizedText"></p>
         <SMFormFooter>
             <template #left>
diff --git a/resources/js/helpers/api.ts b/resources/js/helpers/api.ts
index d3d9888..d7110b5 100644
--- a/resources/js/helpers/api.ts
+++ b/resources/js/helpers/api.ts
@@ -71,6 +71,8 @@ export const api = {
                 options.headers["Authorization"] = `Bearer ${userStore.token}`;
             }
 
+            options.method = options.method.toUpperCase() || "GET";
+
             if (options.body && typeof options.body === "object") {
                 if (options.body instanceof FormData) {
                     if (
@@ -82,6 +84,11 @@ export const api = {
                         // remove the "Content-Type" key from the headers object
                         delete options.headers["Content-Type"];
                     }
+
+                    if (options.method != "POST") {
+                        options.body.append("_method", options.method);
+                        options.method = "POST";
+                    }
                 } else if (
                     options.body instanceof Blob ||
                     options.body instanceof ArrayBuffer
@@ -94,7 +101,9 @@ export const api = {
             }
 
             if (
-                (options.method.toUpperCase() || "GET") == "POST" &&
+                (options.method == "POST" ||
+                    options.method == "PUT" ||
+                    options.method == "PATCH") &&
                 options.progress
             ) {
                 const xhr = new XMLHttpRequest();
diff --git a/resources/js/helpers/form.ts b/resources/js/helpers/form.ts
index 00e05ec..2120c91 100644
--- a/resources/js/helpers/form.ts
+++ b/resources/js/helpers/form.ts
@@ -167,7 +167,7 @@ type FormControlSetValidation = (
 type FormControlIsValid = () => boolean;
 
 export interface FormControlObject {
-    value: string;
+    value: unknown;
     validate: () => Promise<ValidationResult>;
     validation: FormControlValidation;
     clearValidations: FormControlClearValidations;
diff --git a/resources/js/helpers/utils.ts b/resources/js/helpers/utils.ts
index 0299441..8c5c9da 100644
--- a/resources/js/helpers/utils.ts
+++ b/resources/js/helpers/utils.ts
@@ -3,19 +3,23 @@ import { extractFileNameFromUrl } from "./url";
 /**
  * Tests if an object or string is empty.
  *
- * @param {object|string} objOrString The object or string.
+ * @param {unknown} value The object or string.
  * @returns {boolean} If the object or string is empty.
  */
-export const isEmpty = (objOrString: unknown): boolean => {
-    if (objOrString == null) {
-        return true;
-    } else if (typeof objOrString === "string") {
-        return objOrString.length == 0;
+export const isEmpty = (value: unknown): boolean => {
+    if (typeof value === "string") {
+        return value.trim().length === 0;
     } else if (
-        typeof objOrString == "object" &&
-        Object.keys(objOrString).length === 0
+        value instanceof File ||
+        value instanceof Blob ||
+        value instanceof Map ||
+        value instanceof Set
     ) {
-        return true;
+        return value.size === 0;
+    } else if (value instanceof FormData) {
+        return [...value.entries()].length === 0;
+    } else if (typeof value === "object") {
+        return !value || Object.keys(value).length === 0;
     }
 
     return false;
diff --git a/resources/js/helpers/validate.ts b/resources/js/helpers/validate.ts
index 73db3cb..10b9208 100644
--- a/resources/js/helpers/validate.ts
+++ b/resources/js/helpers/validate.ts
@@ -1,8 +1,9 @@
 import { bytesReadable } from "../helpers/types";
 import { SMDate } from "./datetime";
+import { isEmpty } from "../helpers/utils";
 
 export interface ValidationObject {
-    validate: (value: any) => Promise<ValidationResult>;
+    validate: (value: unknown) => Promise<ValidationResult>;
 }
 
 export interface ValidationResult {
@@ -744,9 +745,9 @@ export function Required(
 
     return {
         ...options,
-        validate: function (value: string): Promise<ValidationResult> {
+        validate: function (value: unknown): Promise<ValidationResult> {
             return Promise.resolve({
-                valid: value.length > 0,
+                valid: !isEmpty(value),
                 invalidMessages: [
                     typeof this.invalidMessage === "string"
                         ? this.invalidMessage
@@ -831,8 +832,11 @@ export function FileSize(
     return {
         ...options,
         validate: function (value: File): Promise<ValidationResult> {
+            const isValid =
+                value instanceof File ? value.size < options.size : true;
+
             return Promise.resolve({
-                valid: value.size < options.size,
+                valid: isValid,
                 invalidMessages: [
                     typeof this.invalidMessage === "string"
                         ? this.invalidMessage
diff --git a/resources/js/views/Workshops.vue b/resources/js/views/Workshops.vue
index 0667242..be605fb 100644
--- a/resources/js/views/Workshops.vue
+++ b/resources/js/views/Workshops.vue
@@ -40,7 +40,10 @@
                 <div
                     class="thumbnail"
                     :style="{
-                        backgroundImage: `url('${event.hero.url}')`,
+                        backgroundImage: `url('${mediaGetVariantUrl(
+                            event.hero,
+                            'medium'
+                        )}')`,
                     }">
                     <div :class="['banner', event['bannerType']]">
                         {{ event["banner"] }}
@@ -87,6 +90,7 @@ import SMToolbar from "../components/SMToolbar.vue";
 import { api } from "../helpers/api";
 import { Event, EventCollection } from "../helpers/api.types";
 import { SMDate } from "../helpers/datetime";
+import { mediaGetVariantUrl } from "../helpers/media";
 import SMMastHead from "../components/SMMastHead.vue";
 import SMContainer from "../components/SMContainer.vue";
 import SMNoItems from "../components/SMNoItems.vue";
diff --git a/resources/js/views/dashboard/MediaEdit.vue b/resources/js/views/dashboard/MediaEdit.vue
index 94e3605..8e8de76 100644
--- a/resources/js/views/dashboard/MediaEdit.vue
+++ b/resources/js/views/dashboard/MediaEdit.vue
@@ -7,6 +7,13 @@
         <SMContainer class="flex-grow-1">
             <SMLoading v-if="pageLoading" large />
             <SMForm v-else :model-value="form" @submit="handleSubmit">
+                <SMRow>
+                    <SMColumn class="media-container">
+                        <!-- <div class="media-container"> -->
+                        <SMImage :src="imageUrl" />
+                        <!-- </div> -->
+                    </SMColumn>
+                </SMRow>
                 <SMRow>
                     <SMColumn>
                         <SMInput control="file" type="file" />
@@ -61,12 +68,15 @@
                         <SMInput type="textarea" control="description" />
                     </SMColumn>
                 </SMRow>
-                <SMRow class="px-2 justify-content-space-between">
+                <SMRow
+                    class="px-2 flex-row-reverse justify-content-space-between">
+                    <SMButton type="submit" label="Save" :form="form" />
                     <SMButton
+                        :form="form"
+                        v-if="route.params.id"
                         type="danger"
                         label="Delete"
                         @click="handleDelete" />
-                    <SMButton type="submit" label="Save" />
                 </SMRow>
             </SMForm>
         </SMContainer>
@@ -74,13 +84,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref } from "vue";
+import { computed, reactive, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { api } from "../../helpers/api";
 import { Form, FormControl } from "../../helpers/form";
 import { bytesReadable } from "../../helpers/types";
 import { And, FileSize, Required } from "../../helpers/validate";
-import { Media, MediaResponse } from "../../helpers/api.types";
+import { MediaResponse } from "../../helpers/api.types";
 import { openDialog } from "../../components/SMDialog";
 import DialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
 import SMButton from "../../components/SMButton.vue";
@@ -89,6 +99,9 @@ import SMInput from "../../components/SMInput.vue";
 import SMMastHead from "../../components/SMMastHead.vue";
 import SMLoading from "../../components/SMLoading.vue";
 import { toTitleCase } from "../../helpers/string";
+import { useToastStore } from "../../store/ToastStore";
+import SMColumn from "../../components/SMColumn.vue";
+import SMImage from "../../components/SMImage.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -116,6 +129,8 @@ const fileData = reactive({
     user: {},
 });
 
+const imageUrl = ref("");
+
 const handleLoad = async () => {
     if (route.params.id) {
         try {
@@ -142,6 +157,8 @@ const handleLoad = async () => {
                     : toTitleCase(data.medium.status);
 
             fileData.dimensions = data.medium.dimensions;
+
+            imageUrl.value = fileData.url;
         } catch (err) {
             pageError.value = err.status;
         }
@@ -152,51 +169,74 @@ const handleLoad = async () => {
 
 const handleSubmit = async () => {
     try {
-        let res = null;
-        // let data = {
-        //     title: formData.title.value,
-        //     slug: formData.slug.value,
-        //     user_id: formData.user_id.value,
-        //     content: formData.content.value
-        // }
+        form.loading(true);
+        let submitData = new FormData();
 
-        // if(route.params.id) {
-        //     res = await axios.put(`posts/${route.params.id}`, data);
-        // } else {
-        //     res = await axios.post(`posts`, data);
-        // }
-
-        let submitFormData = new FormData();
-        if (form.file.value instanceof File) {
-            submitFormData.append("file", form.file.value);
+        // add file if there is one
+        if (form.controls.file.value instanceof File) {
+            submitData.append("file", form.controls.file.value);
         }
 
-        submitFormData.append("permission", form.permission.value);
+        submitData.append("title", form.controls.title.value as string);
+        submitData.append(
+            "permission",
+            form.controls.permission.value as string
+        );
+        submitData.append(
+            "description",
+            form.controls.description.value as string
+        );
 
-        await api.post({
-            url: "/media",
-            body: submitFormData,
-            headers: {
-                "Content-Type": "multipart/form-data",
-            },
-            progress: (progressEvent) =>
-                (formLoadingMessage.value = `Uploading Files ${Math.floor(
-                    (progressEvent.loaded / progressEvent.total) * 100
-                )}%`),
+        if (route.params.id) {
+            await api.put({
+                url: "/media/{id}",
+                params: {
+                    id: route.params.id,
+                },
+                body: submitData,
+                headers: {
+                    "Content-Type": "multipart/form-data",
+                },
+            });
+        } else {
+            await api.post({
+                url: "/media",
+                body: submitData,
+                headers: {
+                    "Content-Type": "multipart/form-data",
+                },
+                // progress: (progressEvent) =>
+                //     (formLoadingMessage.value = `Uploading Files ${Math.floor(
+                //         (progressEvent.loaded / progressEvent.total) * 100
+                //     )}%`),
+            });
+        }
+
+        useToastStore().addToast({
+            title: route.params.id ? "Media Updated" : "Media Created",
+            content: route.params.id
+                ? "The media item has been updated."
+                : "The media item been created.",
+            type: "success",
         });
 
-        form.message("Your details have been updated", "success");
-    } catch (err) {
-        form.apiErrors(err);
+        router.push({ name: "dashboard-media-list" });
+    } catch (error) {
+        console.log(error);
+        useToastStore().addToast({
+            title: "Server error",
+            content: "An error occurred saving the media.",
+            type: "danger",
+        });
+    } finally {
+        form.loading(false);
     }
-
-    form.loading(false);
 };
 
-const handleDelete = async (item: Media) => {
+const handleDelete = async () => {
     let result = await openDialog(DialogConfirm, {
         title: "Delete File?",
-        text: `Are you sure you want to delete the file <strong>${item.title}</strong>?`,
+        text: `Are you sure you want to delete the file <strong>${form.controls.title.value}</strong>?`,
         cancel: {
             type: "secondary",
             label: "Cancel",
@@ -209,7 +249,7 @@ const handleDelete = async (item: Media) => {
 
     if (result) {
         try {
-            await api.delete(`media/${item.id}`);
+            await api.delete(`media/${route.params.id}`);
             router.push({ name: "media" });
         } catch (error) {
             pageError.value = error.status;
@@ -223,3 +263,14 @@ const computedFileSize = computed(() => {
 
 handleLoad();
 </script>
+
+<style lang="scss">
+.page-dashboard-media-edit {
+    .media-container {
+        max-height: 300px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+</style>
diff --git a/resources/js/views/dashboard/MediaList.vue b/resources/js/views/dashboard/MediaList.vue
index 008d0cc..2c27278 100644
--- a/resources/js/views/dashboard/MediaList.vue
+++ b/resources/js/views/dashboard/MediaList.vue
@@ -39,6 +39,11 @@
                 <template #item-size="item">
                     {{ bytesReadable(item.size) }}
                 </template>
+                <template #item-title="item"
+                    >{{ item.title }}<br /><span class="small"
+                        >({{ item.name }})</span
+                    ></template
+                >
                 <template #item-actions="item">
                     <SMButton
                         label="Edit"
@@ -86,7 +91,7 @@ const itemsPerPage = 25;
 const itemsPage = ref(parseInt((route.query.page as string) || "1"));
 
 const headers = [
-    { text: "Name", value: "title", sortable: true },
+    { text: "Title (Name)", value: "title", sortable: true },
     { text: "Size", value: "size", sortable: true },
     { text: "Uploaded By", value: "user.display_name", sortable: true },
     { text: "Actions", value: "actions" },
@@ -257,7 +262,8 @@ handleLoad();
 <style lang="scss">
 .page-dashboard-media-list {
     .table tr {
-        td:first-of-type {
+        td:first-of-type,
+        td:nth-of-type(2) {
             word-break: break-all;
         }
 
diff --git a/resources/js/views/dashboard/PostEdit.vue b/resources/js/views/dashboard/PostEdit.vue
index e366bd2..f4fd855 100644
--- a/resources/js/views/dashboard/PostEdit.vue
+++ b/resources/js/views/dashboard/PostEdit.vue
@@ -241,7 +241,6 @@ const handleSubmit = async () => {
 
         router.push({ name: "dashboard-post-list" });
     } catch (error) {
-        console.log(error);
         form.apiErrors(error);
     }
 };