openable and downloadable files files

Author: AzGasim

packages/media/resources/lang/de/fields.php

@@ -26,6 +26,7 @@
     'delete_file' => 'Datei löschen',
     'yes_delete' => 'Ja, löschen',
     'cancel' => 'Abbrechen',
+    'download_file' => 'Datei herunterladen',
 
     // Notifications
     'delete_error' => 'Fehler beim Löschen',

packages/media/resources/lang/en/fields.php

@@ -26,6 +26,7 @@
     'delete_file' => 'Delete File',
     'yes_delete' => 'Yes, Delete',
     'cancel' => 'Cancel',
+    'download_file' => 'Download File',
 
     // Notifications
     'delete_error' => 'Error Deleting',

packages/media/resources/views/forms/components/image-display.blade.php

@@ -6,24 +6,27 @@
             }
         </style>
         <div class="flex justify-center">
-            <a href="{{ $getState() }}" target="_blank" class="flex justify-center">
-                @php
-                    $mimeTypeIcon = $getMimeTypeIcon();
-                @endphp
+            @php
+                $mimeTypeIcon = $getMimeTypeIcon();
+                $isImage = str_starts_with($getRecord()->mime_type, 'image/');
+            @endphp
 
-                @if($mimeTypeIcon)
-                    <div class="flex flex-col justify-between items-center w-full">
+            @if($mimeTypeIcon)
+                <div class="flex flex-col justify-between items-center w-full">
+                    <a href="{{ $getState() }}" target="_blank">
                         <img src="{{ $mimeTypeIcon['icon'] }}" class="w-16 h-16" alt="{{ $mimeTypeIcon['label'] }}">
-                        <div
-                            class="text-xs text-gray-700 w-full mt-2 overflow-hidden text-ellipsis whitespace-normal break-words px-2">
-                            {{ $getRecord()->file_name }}
-                        </div>
+                    </a>
+                    <div
+                        class="text-xs text-gray-700 w-full mt-2 overflow-hidden text-ellipsis whitespace-normal break-words px-2 text-center">
+                        {{ $getRecord()->file_name }}
                     </div>
-                @else
+                </div>
+            @else
+                <a href="{{ $getState() }}" target="_blank">
                     <img src="{{ $getState() }}" class="rounded-lg shadow-lg custom-image-width h-auto border border-gray-300"
                         alt="{{ $getRecord()->title ?? '' }}">
-                @endif
-            </a>
+                </a>
+            @endif
         </div>
     @endif
 </x-dynamic-component>