diff --git a/app/Http/Controllers/MediaController.php b/app/Http/Controllers/MediaController.php
index 0363c79..4b55669 100644
--- a/app/Http/Controllers/MediaController.php
+++ b/app/Http/Controllers/MediaController.php
@@ -133,6 +133,11 @@ class MediaController extends Controller
                 if(!$request->has('title')) {
                     return response()->json([
                         'message' => 'The file ' . $file->getClientOriginalName() . ' has been uploaded',
+                        'file' => [
+                            'name' => $file->getClientOriginalName(),
+                            'size' => $file->getSize(),
+                            'mime_type' => $file->getMimeType()
+                        ]
                     ]);
                 }
             } catch(\Exception $e) {
@@ -151,7 +156,7 @@ class MediaController extends Controller
                 return response()->json([
                     'message' => 'Could not find the referenced file on the server.',
                     'errors' => [
-                        'file' => 'Could not find the referenced file on the server.'
+                        'file' => 'Could not find the referenced file on the server ('.$tempFileName.').'
                     ]
                 ], 422);
             }
diff --git a/resources/views/admin/media/edit.blade.php b/resources/views/admin/media/edit.blade.php
index 59ac7f3..d53ffc0 100644
--- a/resources/views/admin/media/edit.blade.php
+++ b/resources/views/admin/media/edit.blade.php
@@ -31,7 +31,7 @@ if(isset($medium) && ($medium->password !== null && $medium->password !== '')) {
                 <x-ui.password label="Password" name="password" value="{{ $password }}"/>
             </div>
 
-            <x-ui.file name="file" onchange="updateTitle" file-name="{{ $medium->name ?? '' }}" file-type="{{ $medium->mime_type ?? '' }}" file-size="{{ $medium->size ?? '' }}" file-url="{{ $medium?->thumbnail ?? '' }}" readonly="{{ isset($medium) }}" />
+            <x-ui.file name="file" onchange="updateTitle" value="{{ $medium->name ?? '' }}" readonly="{{ isset($medium) }}" />
 
             <div class="flex justify-end gap-4 mt-8">
                 @isset($medium)
diff --git a/resources/views/components/ui/file.blade.php b/resources/views/components/ui/file.blade.php
index dbed72c..eb0f6c0 100644
--- a/resources/views/components/ui/file.blade.php
+++ b/resources/views/components/ui/file.blade.php
@@ -1,4 +1,4 @@
-@props(['type' => 'text', 'name', 'label' => 'File', 'info', 'value' => '', 'fileName' => '', 'fileSize' => '', 'fileType' => '', 'fileUrl' => '', 'readonly' => false])
+@props(['type' => 'text', 'name', 'label' => 'File', 'info', 'value' => '', 'readonly' => false])
 
 @php
     $hasError = $errors->has($name);
@@ -11,10 +11,10 @@
     <div class="flex flex-col align-middle items-center">
         <i id="{{ $name }}_placeholder" class="fa-regular fa-image text-9xl text-gray-400"></i>
         <img class="hidden rounded-lg max-w-72 max-h-36 my-4" id="{{ $name }}_preview" alt="preview" />
-        <div id="{{ $name }}_name" class="text-sm text-gray-500">{{ $fileName }}</div>
-        <div id="{{ $name }}_size" class="text-xs text-gray-500">{{ $fileSize != '' ? \App\Helpers::bytesToString($fileSize) : '' }}</div>
+        <div id="{{ $name }}_name" class="text-sm text-gray-500"></div>
+        <div id="{{ $name }}_size" class="text-xs text-gray-500"></div>
         @if (!$readonly)
-            <label for="{{ $name }}" class="mt-4 bg-white border border-gray-300 hover:bg-gray-300 justify-center rounded-md text-gray-700 px-8 py-1.5 text-sm font-semibold leading-6 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition">Select File</label>
+            <label for="{{ $name }}_file" class="mt-4 bg-white border border-gray-300 hover:bg-gray-300 justify-center rounded-md text-gray-700 px-8 py-1.5 text-sm font-semibold leading-6 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition">Select File</label>
             <div class="text-xs text-gray-500 mb-4 mt-1">Max upload size: {{ \App\Helpers::bytesToString(\App\Helpers::getMaxUploadSize()) }}</div>
         @endif
     @if(isset($info) && $info !== '')
@@ -25,62 +25,81 @@
     @endif
     </div>
     @if (!$readonly)
-        <input class="hidden" value="" type="file" name="{{ $name }}" id="{{ $name }}" />
+        <input class="hidden" value="" type="file" name="{{ $name }}_file" id="{{ $name }}_file" />
     @endif
-{{--    <input class="hidden" type="text" id="{{ $name }}" name="{{ $name }}"></input>--}}
+    <input class="hidden" type="text" id="{{ $name }}" name="{{ $name }}" value="{{ $value }}" />
 </div>
 
 <script>
-    function updateDetails(fileName, fileType, fileSize, fileUrl) {
-        document.getElementById('{{ $name }}_name').innerText = fileName;
+    function updateDetails(media) {
+        document.getElementById('{{ $name }}').value = media.name;
+        document.getElementById('{{ $name }}_name').innerText = media.name;
+        document.getElementById('{{ $name }}_size').innerText = SM.bytesToString(media.size);
 
-        document.getElementById('{{ $name }}_size').innerText = SM.bytesToString(fileSize);
-
-        if(!fileType.startsWith('image/') && fileUrl.startsWith('data:')) {
-            const extension = fileName.split('.').pop();
+        if(!media.mime_type.startsWith('image/') && (!media.thumbnail || media.thumbnail.startsWith('data:'))) {
+            const extension = media.name.split('.').pop();
             document.getElementById('{{ $name }}_preview').src = '/thumbnails/' + extension + '.webp';
         } else {
-            document.getElementById('{{ $name }}_preview').src = fileUrl;
+            document.getElementById('{{ $name }}_preview').src = media.thumbnail;
         }
 
         document.getElementById('{{ $name }}_preview').classList.remove('hidden');
         document.getElementById('{{ $name }}_placeholder').classList.add('hidden');
     }
 
-    function updatePreview(event) {
+    function uploadFile(event) {
         const file = event.target.files[0];
 
-        {{--document.getElementById('{{ $name }}_input').value = '';--}}
-
-        const reader = new FileReader();
-        reader.onload = function(e) {
-            updateDetails(file.name, file.type, file.size, e.target.result);
-
-            document.getElementById('{{ $name }}_name').classList.add('italic');
-            const newFileInfo = document.createElement('i');
-            newFileInfo.classList.add('fa-solid', 'fa-info-circle', 'text-gray-500', 'ml-2');
-            newFileInfo.setAttribute('data-tooltip', 'The filename may change from the actual file name if a file with the same name already exists.');
-            document.getElementById('{{ $name }}_name').appendChild(newFileInfo);
-
-            if('{{ $onchange }}' !== '' && typeof window['{{ $onchange }}'] === 'function') {
-                window['{{ $onchange }}'](file, file.name);
-            }
+        if(file === undefined) {
+            return;
         }
-        reader.readAsDataURL(file);
+
+        SM.upload(event.target.files, (media) => {
+
+            const updatePageInfo = (media, thumbnail) => {
+                const file = {
+                    name: media.files[0].data.file.name,
+                    size: media.files[0].data.file.size,
+                    mime_type: media.files[0].data.file.mime_type,
+                    thumbnail: thumbnail
+                }
+
+                updateDetails(file);
+
+                document.getElementById('{{ $name }}_name').classList.add('italic');
+                const newFileInfo = document.createElement('i');
+                newFileInfo.classList.add('fa-solid', 'fa-info-circle', 'text-gray-500', 'ml-2');
+                newFileInfo.setAttribute('data-tooltip', 'The filename may change once saved to the server.');
+                document.getElementById('{{ $name }}_name').appendChild(newFileInfo);
+
+                if('{{ $onchange }}' !== '' && typeof window['{{ $onchange }}'] === 'function') {
+                    window['{{ $onchange }}'](file, file.name);
+                }
+            }
+
+            if(media.files[0].file.size < (1024 * 1024 * 4)) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    updatePageInfo(media, e.target.result);
+                }
+
+                reader.readAsDataURL(media.files[0].file);
+            } else {
+                updatePageInfo(media, '');
+            }
+        });
     }
 
     document.addEventListener('DOMContentLoaded', function() {
-        const fileInput = document.getElementById('{{ $name }}');
+        const fileInput = document.getElementById('{{ $name }}_file');
         if(fileInput) {
-            fileInput.addEventListener('change', updatePreview);
+            fileInput.addEventListener('change', uploadFile);
+        }
+
+        if('{{ $value }}' !== '') {
+            SM.mediaDetails('{{ $value }}', (media) => {
+                updateDetails(media);
+            });
         }
     });
-
-    if('{{ $fileName }}' !== '' && '{{ $fileSize }}' !== '' && '{{ $fileType }}' !== '' && '{{ $fileUrl }}' !== '') {
-        updateDetails('{{ $fileName }}', '{{ $fileType }}', '{{ $fileSize }}', '{{ $fileUrl }}');
-    } else if('{{ $value }}' !== '') {
-        SM.mediaDetails('{{ $value }}', (details) => {
-            updateDetails(details.name, details.mime_type, details.size, details.url);
-        });
-    }
 </script>