From e8bb6848bbcc00a9f45aeadd27f633a9d816173f Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Fri, 8 Aug 2025 18:55:17 +0200
Subject: [PATCH 1/4] Allow to show video / audio preview on upload

---
 demo/app/Sharp/Posts/PostForm.php             |   6 +-
 demo/app/Sharp/Posts/PostShow.php             |   2 +-
 .../form/components/fields/upload/Upload.vue  | 123 ++++++++++--------
 resources/js/show/components/fields/File.vue  |  88 +++++++------
 resources/js/types/generated.d.ts             |   2 +
 .../Form/Fields/FormUploadFieldValueData.php  |   1 +
 src/Data/Show/Fields/ShowFileFieldData.php    |   1 +
 .../Eloquent/Uploads/SharpUploadModel.php     |  15 +++
 ...arpUploadModelFormAttributeTransformer.php |  36 ++++-
 9 files changed, 175 insertions(+), 99 deletions(-)

diff --git a/demo/app/Sharp/Posts/PostForm.php b/demo/app/Sharp/Posts/PostForm.php
index bd0c6538f..7ea8fd4d9 100644
--- a/demo/app/Sharp/Posts/PostForm.php
+++ b/demo/app/Sharp/Posts/PostForm.php
@@ -126,8 +126,8 @@ public function buildFormFields(FieldsContainer $formFields): void
                     )
                     ->addItemField(
                         SharpFormUploadField::make('document')
-                            ->setMaxFileSize(1)
-                            ->setAllowedExtensions(['pdf', 'zip'])
+                            ->setMaxFileSize(2)
+                            ->setAllowedExtensions(['pdf', 'zip', 'mp4', 'mp3'])
                             ->setStorageDisk('local')
                             ->setStorageBasePath('data/posts/{id}')
                             ->addConditionalDisplay('!is_link'),
@@ -203,7 +203,7 @@ public function find($id): array
         return $this
             ->setCustomTransformer('author_id', fn ($value, Post $instance) => $instance->author)
             ->setCustomTransformer('cover', new SharpUploadModelFormAttributeTransformer())
-            ->setCustomTransformer('attachments[document]', new SharpUploadModelFormAttributeTransformer())
+            ->setCustomTransformer('attachments[document]', new SharpUploadModelFormAttributeTransformer(withPlayablePreview: true))
             ->transform(Post::with('cover', 'attachments', 'categories')->findOrFail($id));
     }
 
diff --git a/demo/app/Sharp/Posts/PostShow.php b/demo/app/Sharp/Posts/PostShow.php
index 25a4fa9fa..a2bcbc759 100644
--- a/demo/app/Sharp/Posts/PostShow.php
+++ b/demo/app/Sharp/Posts/PostShow.php
@@ -154,7 +154,7 @@ public function find(mixed $id): array
             ->setCustomTransformer('cover', new SharpUploadModelThumbnailUrlTransformer(500))
             ->setCustomTransformer(
                 'attachments[document]',
-                new SharpUploadModelFormAttributeTransformer(withThumbnails: true)
+                new SharpUploadModelFormAttributeTransformer(withPlayablePreview: true)
             )
             ->setCustomTransformer('attachments[link_url]', fn ($value, $instance) => $instance->is_link
                 ? sprintf('<a href="%s" alt="">%s</a>', $value, str($value)->limit(30))
diff --git a/resources/js/form/components/fields/upload/Upload.vue b/resources/js/form/components/fields/upload/Upload.vue
index 4840066ab..54be7fdc4 100644
--- a/resources/js/form/components/fields/upload/Upload.vue
+++ b/resources/js/form/components/fields/upload/Upload.vue
@@ -68,6 +68,7 @@
     }>();
     const form = useParentForm();
     const transformedImg = ref<string>();
+    const playablePreviewUrl = ref<string>();
     const uppyFile = ref<UppyFile<{}, {}>>();
     const isEditable = computed(() => {
         return props.value && canTransform(props.value.name, props.value.mime_type) && !props.hasError
@@ -135,6 +136,8 @@
                     const blob = await response.blob();
                     transformedImg.value = URL.createObjectURL(blob);
                 }
+            } else if(file.type?.startsWith('video/') || file.type?.startsWith('audio/')) {
+                playablePreviewUrl.value = URL.createObjectURL(file.data);
             }
         })
         .on('restriction-failed', (file, error) => {
@@ -350,6 +353,7 @@
             uppy.removeFile(uppyFile.value.id);
             uppyFile.value = null;
             transformedImg.value = null;
+            playablePreviewUrl.value = null;
             editModalImageUrl.value = null;
         }
     }
@@ -382,6 +386,9 @@
         if(!props.persistThumbnailUrl && transformedImg.value) {
             URL.revokeObjectURL(transformedImg.value);
         }
+        if(playablePreviewUrl.value) {
+            URL.revokeObjectURL(playablePreviewUrl.value);
+        }
         emit('uploading', false);
     });
 </script>
@@ -392,69 +399,83 @@
             <template v-if="value?.path || value?.uploaded || uppyFile">
                 <div :class="{ 'bg-background border rounded-md p-4': !asEditorEmbed }">
                     <div class="flex gap-4">
-                        <template v-if="transformedImg ?? value?.thumbnail ?? uppyFile?.preview">
-                            <div class="self-center group/img relative rounded-md overflow-hidden">
-                                <img class="rounded-md min-w-[50px] max-h-[150px] max-w-[150px] object-contain"
-                                    :class="uppyFile && !transformedImg && field.imageCropRatio ? 'object-cover aspect-(--ratio)' : ''"
-                                    :style="{
+                        <div class="flex-1 min-w-0 flex gap-4" :class="playablePreviewUrl ?? value?.playable_preview_url ? 'flex-col' : ''">
+                            <template v-if="transformedImg ?? value?.thumbnail ?? uppyFile?.preview">
+                                <div class="self-center group/img relative rounded-md overflow-hidden">
+                                    <img class="rounded-md min-w-[50px] max-h-[150px] max-w-[150px] object-contain"
+                                        :class="uppyFile && !transformedImg && field.imageCropRatio ? 'object-cover aspect-(--ratio)' : ''"
+                                        :style="{
                                         '--ratio': field.imageCropRatio ? `${field.imageCropRatio[0]} / ${field.imageCropRatio[1]}` : null
                                     }"
-                                    :src="transformedImg ?? value?.thumbnail ?? uppyFile.preview"
-                                    :alt="value?.name ?? uppyFile?.name"
-                                >
-                                <template v-if="isEditable && !props.field.readOnly">
-                                    <button class="absolute flex justify-center items-center gap-2 inset-0 bg-black/50 transition text-white text-xs font-medium opacity-0 group-hover/img:opacity-100" tabindex="-1" @click="onEdit">
-                                        {{ __('sharp::form.upload.edit_button') }}
-                                    </button>
+                                        :src="transformedImg ?? value?.thumbnail ?? uppyFile.preview"
+                                        :alt="value?.name ?? uppyFile?.name"
+                                    >
+                                    <template v-if="isEditable && !props.field.readOnly">
+                                        <button class="absolute flex justify-center items-center gap-2 inset-0 bg-black/50 transition text-white text-xs font-medium opacity-0 group-hover/img:opacity-100" tabindex="-1" @click="onEdit">
+                                            {{ __('sharp::form.upload.edit_button') }}
+                                        </button>
+                                    </template>
+                                </div>
+                            </template>
+                            <template v-else-if="playablePreviewUrl ?? value?.playable_preview_url">
+                                <template v-if="(uppyFile?.type ?? value?.mime_type)?.startsWith('video/')">
+                                    <video class="rounded-md max-h-[150px]" controls>
+                                        <source :src="playablePreviewUrl ?? value.playable_preview_url" :type="uppyFile?.type ?? value?.mime_type">
+                                    </video>
                                 </template>
-                            </div>
-                        </template>
-                        <template v-else>
-                            <FileIcon class="self-center size-4" :mime-type="value?.mime_type || uppyFile?.type" />
-                        </template>
-                        <div class="flex-1 min-w-0">
-                            <div class="text-sm truncate">
-                                <template v-if="value?.path">
-                                    <TooltipProvider>
-                                        <Tooltip :delay-duration="0" disable-hoverable-content>
-                                            <TooltipTrigger as-child>
-                                                <a class="text-foreground underline underline-offset-4 decoration-foreground/20 hover:decoration-foreground"
-                                                    :href="route('code16.sharp.download.show', {
+                                <template v-else-if="(uppyFile?.type ?? value?.mime_type)?.startsWith('audio/')">
+                                    <audio controls>
+                                        <source :src="playablePreviewUrl ?? value.playable_preview_url" :type="uppyFile?.type ?? value?.mime_type">
+                                    </audio>
+                                </template>
+                            </template>
+                            <template v-else>
+                                <FileIcon class="self-center size-4" :mime-type="value?.mime_type || uppyFile?.type" />
+                            </template>
+                            <div class="flex-1 min-w-0">
+                                <div class="text-sm truncate">
+                                    <template v-if="value?.path">
+                                        <TooltipProvider>
+                                            <Tooltip :delay-duration="0" disable-hoverable-content>
+                                                <TooltipTrigger as-child>
+                                                    <a class="text-foreground underline underline-offset-4 decoration-foreground/20 hover:decoration-foreground"
+                                                        :href="route('code16.sharp.download.show', {
                                                         entityKey: form.entityKey,
                                                         instanceId: form.instanceId,
                                                         disk: value.disk,
                                                         path: value.path,
                                                     })"
-                                                    :download="value?.name"
-                                                >
-                                                    {{ value?.name }}
-                                                </a>
-                                            </TooltipTrigger>
+                                                        :download="value?.name"
+                                                    >
+                                                        {{ value?.name }}
+                                                    </a>
+                                                </TooltipTrigger>
 
-                                            <TooltipContent class="pointer-events-none" :side-offset="10">
-                                                {{ __('sharp::form.upload.download_tooltip') }}
-                                            </TooltipContent>
-                                        </Tooltip>
-                                    </TooltipProvider>
+                                                <TooltipContent class="pointer-events-none" :side-offset="10">
+                                                    {{ __('sharp::form.upload.download_tooltip') }}
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
+                                    </template>
+                                    <template v-else>
+                                        {{ value?.name ?? uppyFile?.name }}
+                                    </template>
+                                </div>
+                                <template v-if="value?.size ?? uppyFile?.size">
+                                    <div class="mt-2 text-xs text-muted-foreground">
+                                        {{ filesizeLabel(value?.size ?? uppyFile.size) }}
+                                    </div>
                                 </template>
-                                <template v-else>
-                                    {{ value?.name ?? uppyFile?.name }}
+                                <template v-if="legend">
+                                    <div class="mt-2 text-xs">{{ legend }}</div>
                                 </template>
-                            </div>
-                            <template v-if="value?.size ?? uppyFile?.size">
-                                <div class="mt-2 text-xs text-muted-foreground">
-                                    {{ filesizeLabel(value?.size ?? uppyFile.size) }}
-                                </div>
-                            </template>
-                            <template v-if="legend">
-                                <div class="mt-2 text-xs">{{ legend }}</div>
-                            </template>
-                            <template v-if="uppyFile?.progress.percentage < 100 && !hasError">
-                                <div class="mt-2">
-                                    <div class="bg-primary h-0.5 transition-all" :style="{ width: `${uppyFile.progress.percentage}%` }" role="progressbar">
+                                <template v-if="uppyFile?.progress.percentage < 100 && !hasError">
+                                    <div class="mt-2">
+                                        <div class="bg-primary h-0.5 transition-all" :style="{ width: `${uppyFile.progress.percentage}%` }" role="progressbar">
+                                        </div>
                                     </div>
-                                </div>
-                            </template>
+                                </template>
+                            </div>
                         </div>
                         <DropdownMenu :modal="false">
                             <DropdownMenuTrigger as-child>
diff --git a/resources/js/show/components/fields/File.vue b/resources/js/show/components/fields/File.vue
index 2f251882c..ec1b76830 100644
--- a/resources/js/show/components/fields/File.vue
+++ b/resources/js/show/components/fields/File.vue
@@ -25,52 +25,66 @@
     <ShowFieldLayout v-bind="props">
         <div class="flex gap-4 p-4 border rounded-md max-w-[600px]">
             <template v-if="value">
-                <template v-if="value.thumbnail">
-                    <div class="self-center">
-                        <img class="rounded-sm min-w-[40px] max-w-[100px] max-h-[100px] object-contain"
-                            :src="value.thumbnail"
-                            :alt="field.label"
-                        >
-                    </div>
-                </template>
-                <template v-else>
-                    <FileIcon class="self-center size-4" :mime-type="value.mime_type" />
-                </template>
-                <div class="flex-1 min-w-0 flex flex-col">
-                    <div class="truncate text-sm font-medium">
-                        <TooltipProvider>
-                            <Tooltip :delay-duration="0" disable-hoverable-content>
-                                <TooltipTrigger as-child>
-                                    <a class="text-foreground underline underline-offset-4 decoration-foreground/20 hover:underline hover:decoration-foreground"
-                                        :href="route('code16.sharp.download.show', {
+                <div class="flex-1 min-w-0 flex gap-4" :class="value.playable_preview_url ? 'flex-col' : ''">
+                    <template v-if="value.thumbnail">
+                        <div class="self-center">
+                            <img class="rounded-sm min-w-[40px] max-w-[100px] max-h-[100px] object-contain"
+                                :src="value.thumbnail"
+                                :alt="field.label"
+                            >
+                        </div>
+                    </template>
+                    <template v-else-if="value.playable_preview_url">
+                        <template v-if="value.mime_type?.startsWith('video/')">
+                            <video class="rounded-md max-h-[150px]" controls preload="metadata">
+                                <source :src="value.playable_preview_url" :type="value.mime_type">
+                            </video>
+                        </template>
+                        <template v-else-if="value.mime_type?.startsWith('audio/')">
+                            <audio controls preload="metadata">
+                                <source :src="value.playable_preview_url" :type="value.mime_type">
+                            </audio>
+                        </template>
+                    </template>
+                    <template v-else>
+                        <FileIcon class="self-center size-4" :mime-type="value.mime_type" />
+                    </template>
+                    <div class="flex flex-col flex-1 min-w-0">
+                        <div class="truncate text-sm font-medium">
+                            <TooltipProvider>
+                                <Tooltip :delay-duration="0" disable-hoverable-content>
+                                    <TooltipTrigger as-child>
+                                        <a class="text-foreground underline underline-offset-4 decoration-foreground/20 hover:underline hover:decoration-foreground"
+                                            :href="route('code16.sharp.download.show', {
                                             entityKey: show.entityKey,
                                             instanceId: show.instanceId,
                                             disk: value.disk,
                                             path: value.path,
                                         })"
-                                        :download="value.name ?? ''"
-                                    >
-                                        {{ value.name }}
-                                    </a>
-                                </TooltipTrigger>
+                                            :download="value.name ?? ''"
+                                        >
+                                            {{ value.name }}
+                                        </a>
+                                    </TooltipTrigger>
 
-                                <TooltipContent class="pointer-events-none" :side-offset="10">
-                                    {{ __('sharp::form.upload.download_tooltip') }}
-                                </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
-                    </div>
-                    <template v-if="legend">
-                        <div class="mt-2 text-muted-foreground text-sm">
-                            {{ legend }}
+                                    <TooltipContent class="pointer-events-none" :side-offset="10">
+                                        {{ __('sharp::form.upload.download_tooltip') }}
+                                    </TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
                         </div>
-                    </template>
-                    <div class="pt-2 flex gap-4 text-sm">
-                        <template v-if="value.size">
-                            <div class="text-xs text-muted-foreground">
-                                {{ filesizeLabel(value.size) }}
+                        <template v-if="legend">
+                            <div class="mt-2 text-muted-foreground text-sm">
+                                {{ legend }}
                             </div>
                         </template>
+                        <div class="pt-2 flex gap-4 text-sm">
+                            <template v-if="value.size">
+                                <div class="text-xs text-muted-foreground">
+                                    {{ filesizeLabel(value.size) }}
+                                </div>
+                            </template>
+                        </div>
                     </div>
                 </div>
                 <DropdownMenu :modal="false">
diff --git a/resources/js/types/generated.d.ts b/resources/js/types/generated.d.ts
index ce0239daa..2fbc15ffa 100644
--- a/resources/js/types/generated.d.ts
+++ b/resources/js/types/generated.d.ts
@@ -616,6 +616,7 @@ export type FormUploadFieldValueData = {
   mime_type: string;
   size: number;
   thumbnail: string | null;
+  playable_preview_url: string | null;
   uploaded: boolean | null;
   transformed: boolean | null;
   not_found: boolean | null;
@@ -834,6 +835,7 @@ export type ShowFileFieldData = {
     name: string;
     path: string;
     thumbnail: string;
+    playable_preview_url: string;
     size: number;
     mime_type: string;
   };
diff --git a/src/Data/Form/Fields/FormUploadFieldValueData.php b/src/Data/Form/Fields/FormUploadFieldValueData.php
index 061733d7b..50000bba9 100644
--- a/src/Data/Form/Fields/FormUploadFieldValueData.php
+++ b/src/Data/Form/Fields/FormUploadFieldValueData.php
@@ -19,6 +19,7 @@ public function __construct(
         public string $mime_type,
         public int $size,
         public ?string $thumbnail,
+        public ?string $playable_preview_url,
         public ?bool $uploaded,
         public ?bool $transformed,
         public ?bool $not_found,
diff --git a/src/Data/Show/Fields/ShowFileFieldData.php b/src/Data/Show/Fields/ShowFileFieldData.php
index a7dac04bf..217fa47a4 100644
--- a/src/Data/Show/Fields/ShowFileFieldData.php
+++ b/src/Data/Show/Fields/ShowFileFieldData.php
@@ -19,6 +19,7 @@ final class ShowFileFieldData extends Data
         'name' => 'string',
         'path' => 'string',
         'thumbnail' => 'string',
+        'playable_preview_url' => 'string',
         'size' => 'int',
         'mime_type' => 'string',
     ])]
diff --git a/src/Form/Eloquent/Uploads/SharpUploadModel.php b/src/Form/Eloquent/Uploads/SharpUploadModel.php
index d12621360..d7d8605e8 100644
--- a/src/Form/Eloquent/Uploads/SharpUploadModel.php
+++ b/src/Form/Eloquent/Uploads/SharpUploadModel.php
@@ -5,6 +5,7 @@
 use Code16\Sharp\Form\Eloquent\Uploads\Thumbnails\Thumbnail;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\MorphTo;
+use Illuminate\Support\Facades\Storage;
 
 class SharpUploadModel extends Model
 {
@@ -86,4 +87,18 @@ public function thumbnail(?int $width = null, ?int $height = null, array $modifi
             ->setAppendTimestamp()
             ->make($width, $height);
     }
+
+    public function playablePreviewUrl(): string
+    {
+        $path = $this->file_name;
+        $thumbnailDisk = Storage::disk(sharp()->config()->get('uploads.thumbnails_disk'));
+
+        if (! $thumbnailDisk->exists($this->file_name)) {
+            if (Storage::disk($this->disk)->exists($path)) {
+                Storage::disk('public')->writeStream($path, Storage::disk($this->disk)->readStream($path));
+            }
+        }
+
+        return $thumbnailDisk->url($path);
+    }
 }
diff --git a/src/Form/Eloquent/Uploads/Transformers/SharpUploadModelFormAttributeTransformer.php b/src/Form/Eloquent/Uploads/Transformers/SharpUploadModelFormAttributeTransformer.php
index 29fb2fda3..051c33c2b 100644
--- a/src/Form/Eloquent/Uploads/Transformers/SharpUploadModelFormAttributeTransformer.php
+++ b/src/Form/Eloquent/Uploads/Transformers/SharpUploadModelFormAttributeTransformer.php
@@ -20,7 +20,8 @@ class SharpUploadModelFormAttributeTransformer implements SharpAttributeTransfor
     public function __construct(
         protected bool $withThumbnails = true,
         protected int $thumbnailWidth = 200,
-        protected int $thumbnailHeight = 200
+        protected int $thumbnailHeight = 200,
+        protected bool $withPlayablePreview = false,
     ) {}
 
     public function dynamicInstance(): self
@@ -93,6 +94,7 @@ protected function transformUpload(SharpUploadModel $upload): array
                     'disk' => $upload->disk,
                     'mime_type' => $upload->mime_type,
                     'thumbnail' => $this->getThumbnailUrl($upload),
+                    'playable_preview_url' => $this->getPlayableMediaUrl($upload),
                     'size' => $upload->size,
                 ]
                 : [],
@@ -113,14 +115,34 @@ private function getThumbnailUrl(SharpUploadModel $upload): ?string
         }
 
         try {
-            $url = $upload->thumbnail($this->thumbnailWidth, $this->thumbnailHeight);
-
-            // Return relative URL if possible, to avoid CORS issues in multidomain case.
-            return Str::startsWith($url, config('app.url'))
-                ? Str::after($url, config('app.url'))
-                : $url;
+            return $this->getRelativeUrlIfPossible(
+                $upload->thumbnail($this->thumbnailWidth, $this->thumbnailHeight)
+            );
         } catch (DecoderException) {
             return null;
         }
     }
+
+    private function getPlayableMediaUrl(SharpUploadModel $upload): ?string
+    {
+        if (! $this->withPlayablePreview) {
+            return null;
+        }
+
+        if ($upload->mime_type && ! str($upload->mime_type)->startsWith(['video/', 'audio/'])) {
+            return null;
+        }
+
+        return $this->getRelativeUrlIfPossible(
+            $upload->playablePreviewUrl()
+        );
+    }
+
+    private function getRelativeUrlIfPossible(string $url): ?string
+    {
+        // Return relative URL if possible, to avoid CORS issues in multidomain case.
+        return Str::startsWith($url, config('app.url'))
+            ? Str::after($url, config('app.url'))
+            : $url;
+    }
 }

From 02b20a626b5dc6f17808fcb703a7ed50a9dc8855 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Fri, 22 Aug 2025 14:37:53 +0200
Subject: [PATCH 2/4] use temp urls

---
 demo/config/filesystems.php                    |  1 +
 src/Form/Eloquent/Uploads/SharpUploadModel.php | 11 +----------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/demo/config/filesystems.php b/demo/config/filesystems.php
index cf5abce76..a63ac647c 100644
--- a/demo/config/filesystems.php
+++ b/demo/config/filesystems.php
@@ -33,6 +33,7 @@
         'local' => [
             'driver' => 'local',
             'root' => storage_path('app'),
+            'serve' => true,
         ],
 
         'public' => [
diff --git a/src/Form/Eloquent/Uploads/SharpUploadModel.php b/src/Form/Eloquent/Uploads/SharpUploadModel.php
index d7d8605e8..46c274f99 100644
--- a/src/Form/Eloquent/Uploads/SharpUploadModel.php
+++ b/src/Form/Eloquent/Uploads/SharpUploadModel.php
@@ -90,15 +90,6 @@ public function thumbnail(?int $width = null, ?int $height = null, array $modifi
 
     public function playablePreviewUrl(): string
     {
-        $path = $this->file_name;
-        $thumbnailDisk = Storage::disk(sharp()->config()->get('uploads.thumbnails_disk'));
-
-        if (! $thumbnailDisk->exists($this->file_name)) {
-            if (Storage::disk($this->disk)->exists($path)) {
-                Storage::disk('public')->writeStream($path, Storage::disk($this->disk)->readStream($path));
-            }
-        }
-
-        return $thumbnailDisk->url($path);
+        return Storage::disk($this->disk)->temporaryUrl($this->file_name, now()->addMinutes(30));
     }
 }

From 4c787b5761073097be1cfe99c7b50ab073ddcd9a Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Fri, 22 Aug 2025 16:54:14 +0200
Subject: [PATCH 3/4] Add tests

---
 demo/app/Sharp/Posts/PostForm.php             |  2 +-
 ...arpUploadModelFormAttributeTransformer.php | 11 +++-
 .../Transformers/Fakes/FakePicturable.php     | 10 +++
 ...ploadModelFormAttributeTransformerTest.php | 66 +++++++++++++++++++
 .../Fields/Formatters/EditorFormatterTest.php |  3 +
 .../Fields/Formatters/TextFormatterTest.php   |  2 +
 6 files changed, 92 insertions(+), 2 deletions(-)

diff --git a/demo/app/Sharp/Posts/PostForm.php b/demo/app/Sharp/Posts/PostForm.php
index 7ea8fd4d9..ee2c40812 100644
--- a/demo/app/Sharp/Posts/PostForm.php
+++ b/demo/app/Sharp/Posts/PostForm.php
@@ -67,7 +67,7 @@ public function buildFormFields(FieldsContainer $formFields): void
                         SharpFormEditorUpload::make()
                             ->setStorageDisk('local')
                             ->setStorageBasePath('data/posts/{id}/embed')
-                            ->setMaxFileSize(1)
+                            ->setMaxFileSize(2)
                             ->setHasLegend()
                     )
                     ->setMaxLength(2000)
diff --git a/src/Form/Eloquent/Uploads/Transformers/SharpUploadModelFormAttributeTransformer.php b/src/Form/Eloquent/Uploads/Transformers/SharpUploadModelFormAttributeTransformer.php
index 051c33c2b..582fd779f 100644
--- a/src/Form/Eloquent/Uploads/Transformers/SharpUploadModelFormAttributeTransformer.php
+++ b/src/Form/Eloquent/Uploads/Transformers/SharpUploadModelFormAttributeTransformer.php
@@ -71,7 +71,16 @@ public function apply($value, $instance = null, $attribute = null)
             return $instance->$attribute
                 ->map(function ($upload) {
                     $array = $this->transformUpload($upload);
-                    $fileAttrs = ['name', 'path', 'disk', 'thumbnail', 'size', 'filters', 'mime_type'];
+                    $fileAttrs = [
+                        'name',
+                        'path',
+                        'disk',
+                        'thumbnail',
+                        'playable_preview_url',
+                        'size',
+                        'filters',
+                        'mime_type',
+                    ];
 
                     return array_merge(
                         ['file' => Arr::only($array, $fileAttrs) ?: null],
diff --git a/tests/Unit/Form/Eloquent/Uploads/Transformers/Fakes/FakePicturable.php b/tests/Unit/Form/Eloquent/Uploads/Transformers/Fakes/FakePicturable.php
index 4f19d695f..d63678a02 100644
--- a/tests/Unit/Form/Eloquent/Uploads/Transformers/Fakes/FakePicturable.php
+++ b/tests/Unit/Form/Eloquent/Uploads/Transformers/Fakes/FakePicturable.php
@@ -16,8 +16,18 @@ public function picture(): MorphOne
         return $this->morphOne(SharpUploadModel::class, 'model');
     }
 
+    public function video(): MorphOne
+    {
+        return $this->morphOne(SharpUploadModel::class, 'model');
+    }
+
     public function pictures(): MorphMany
     {
         return $this->morphMany(SharpUploadModel::class, 'model');
     }
+
+    public function songs(): MorphMany
+    {
+        return $this->morphMany(SharpUploadModel::class, 'model');
+    }
 }
diff --git a/tests/Unit/Form/Eloquent/Uploads/Transformers/SharpUploadModelFormAttributeTransformerTest.php b/tests/Unit/Form/Eloquent/Uploads/Transformers/SharpUploadModelFormAttributeTransformerTest.php
index a74cb47e9..19cd210b1 100644
--- a/tests/Unit/Form/Eloquent/Uploads/Transformers/SharpUploadModelFormAttributeTransformerTest.php
+++ b/tests/Unit/Form/Eloquent/Uploads/Transformers/SharpUploadModelFormAttributeTransformerTest.php
@@ -3,6 +3,8 @@
 use Code16\Sharp\Form\Eloquent\Uploads\SharpUploadModel;
 use Code16\Sharp\Form\Eloquent\Uploads\Transformers\SharpUploadModelFormAttributeTransformer;
 use Code16\Sharp\Tests\Unit\Form\Eloquent\Uploads\Transformers\Fakes\FakePicturable;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Carbon;
 use Illuminate\Support\Facades\Storage;
 
 beforeEach(function () {
@@ -35,6 +37,7 @@
             'disk' => 'local',
             'size' => $upload->size,
             'thumbnail' => $upload->thumbnail(200, 200),
+            'playable_preview_url' => null,
             'mime_type' => 'image/png',
         ],
         $transformer->apply('', $picturable, 'picture'),
@@ -73,6 +76,7 @@
             'size' => $upload->size,
             'mime_type' => 'image/png',
             'thumbnail' => $upload->thumbnail(200, 200),
+            'playable_preview_url' => null,
             'filters' => [
                 'crop' => [
                     'height' => .5,
@@ -116,6 +120,7 @@
                     'disk' => 'local',
                     'size' => $upload1->size,
                     'thumbnail' => $upload1->thumbnail(200, 200),
+                    'playable_preview_url' => null,
                     'mime_type' => 'image/png',
                 ],
                 'id' => $upload1->id,
@@ -126,6 +131,7 @@
                     'disk' => 'local',
                     'size' => $upload2->size,
                     'thumbnail' => $upload2->thumbnail(200, 200),
+                    'playable_preview_url' => null,
                     'mime_type' => 'image/png',
                 ],
                 'id' => $upload2->id,
@@ -175,6 +181,7 @@
                     'disk' => 'local',
                     'size' => $upload1->size,
                     'thumbnail' => $upload1->thumbnail(200, 200),
+                    'playable_preview_url' => null,
                     'filters' => $filters,
                     'mime_type' => 'image/png',
                 ],
@@ -186,6 +193,7 @@
                     'disk' => 'local',
                     'size' => $upload2->size,
                     'thumbnail' => $upload2->thumbnail(200, 200),
+                    'playable_preview_url' => null,
                     'mime_type' => 'image/png',
                 ],
                 'id' => $upload2->id,
@@ -193,6 +201,63 @@
         ]);
 });
 
+it('transforms an upload with playable preview', function () {
+    $this->freezeTime(function (Carbon $time) {
+        $upload = new SharpUploadModel([
+            'file_name' => UploadedFile::fake()->create('video.mp4', 120, 'video/mp4'),
+            'size' => 120,
+            'mime_type' => 'video/mp4',
+            'disk' => 'local',
+        ]);
+        $picturable = new FakePicturable(['id' => 1]);
+        $picturable->setRelation('video', $upload);
+
+        $transformer = new SharpUploadModelFormAttributeTransformer(withPlayablePreview: true);
+
+        expect($transformer->apply('', $picturable, 'video'))
+            ->toEqual([
+                'id' => $upload->id,
+                'name' => basename($upload->file_name),
+                'path' => $upload->file_name,
+                'disk' => 'local',
+                'size' => $upload->size,
+                'thumbnail' => null,
+                'playable_preview_url' => $upload->file_name.'?expiration='.$time->addMinutes(30)->timestamp,
+                'mime_type' => 'video/mp4',
+            ]);
+    });
+});
+
+it('transforms a list of upload with playable preview', function () {
+    $this->freezeTime(function (Carbon $time) {
+        $upload1 = new SharpUploadModel([
+            'file_name' => UploadedFile::fake()->create('audio.mp3', 120, 'audio/mp3'),
+            'size' => 120,
+            'mime_type' => 'audio/mp3',
+            'disk' => 'local',
+        ]);
+        $picturable = new FakePicturable(['id' => 1]);
+        $picturable->setRelation('songs', collect([$upload1]));
+
+        $transformer = new SharpUploadModelFormAttributeTransformer(withPlayablePreview: true);
+
+        expect($transformer->apply('', $picturable, 'songs'))->toEqual([
+            [
+                'file' => [
+                    'name' => basename($upload1->file_name),
+                    'path' => $upload1->file_name,
+                    'disk' => 'local',
+                    'size' => $upload1->size,
+                    'thumbnail' => null,
+                    'playable_preview_url' => $upload1->file_name.'?expiration='.$time->addMinutes(30)->timestamp,
+                    'mime_type' => 'audio/mp3',
+                ],
+                'id' => $upload1->id,
+            ],
+        ]);
+    });
+});
+
 describe('dynamicInstance', function () {
     it('allows to fake a sharpUpload and transform a single upload', function () {
         $file = createImage();
@@ -215,6 +280,7 @@
                 'disk' => 'local',
                 'size' => 120,
                 'thumbnail' => (new SharpUploadModel($uploadData))->thumbnail(200, 200),
+                'playable_preview_url' => null,
                 'filters' => [],
                 'mime_type' => 'image/png',
             ],
diff --git a/tests/Unit/Form/Fields/Formatters/EditorFormatterTest.php b/tests/Unit/Form/Fields/Formatters/EditorFormatterTest.php
index 135e4e120..4566d6d0e 100644
--- a/tests/Unit/Form/Fields/Formatters/EditorFormatterTest.php
+++ b/tests/Unit/Form/Fields/Formatters/EditorFormatterTest.php
@@ -155,6 +155,7 @@
                         '/storage/thumbnails/data/Posts/1/200-200_q-90/image.jpg?%s',
                         Storage::disk('public')->lastModified('/thumbnails/data/Posts/1/200-200_q-90/image.jpg')
                     ),
+                    'playable_preview_url' => null,
                     'size' => 120,
                     'mime_type' => 'image/jpeg',
                     'filters' => null,
@@ -168,6 +169,7 @@
                     'path' => 'data/Posts/1/doc.pdf',
                     'disk' => 'local',
                     'thumbnail' => null,
+                    'playable_preview_url' => null,
                     'size' => 120,
                     'mime_type' => 'application/pdf',
                     'filters' => null,
@@ -287,6 +289,7 @@
                         'path' => 'data/Posts/1/image.jpg',
                         'disk' => 'local',
                         'thumbnail' => $thumbnail,
+                        'playable_preview_url' => null,
                         'size' => 120,
                         'mime_type' => 'image/jpeg',
                         'filters' => null,
diff --git a/tests/Unit/Show/Fields/Formatters/TextFormatterTest.php b/tests/Unit/Show/Fields/Formatters/TextFormatterTest.php
index c6346a38f..4959e3a29 100644
--- a/tests/Unit/Show/Fields/Formatters/TextFormatterTest.php
+++ b/tests/Unit/Show/Fields/Formatters/TextFormatterTest.php
@@ -61,6 +61,7 @@
                         '/storage/thumbnails/data/Posts/1/200-200_q-90/image.jpg?%s',
                         Storage::disk('public')->lastModified('/thumbnails/data/Posts/1/200-200_q-90/image.jpg')
                     ),
+                    'playable_preview_url' => null,
                     'size' => 120,
                     'mime_type' => 'image/jpeg',
                     'filters' => null,
@@ -74,6 +75,7 @@
                     'path' => 'data/Posts/1/doc.pdf',
                     'disk' => 'local',
                     'thumbnail' => null,
+                    'playable_preview_url' => null,
                     'size' => 120,
                     'mime_type' => 'application/pdf',
                     'filters' => null,

From 3c3a6c2a43ea541c109e188a904f253892643210 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Fri, 22 Aug 2025 17:18:19 +0200
Subject: [PATCH 4/4] Add docs

---
 docs/guide/sharp-uploads.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/docs/guide/sharp-uploads.md b/docs/guide/sharp-uploads.md
index 942c62bc2..81d4b60b8 100644
--- a/docs/guide/sharp-uploads.md
+++ b/docs/guide/sharp-uploads.md
@@ -336,3 +336,26 @@ $this->addField(
 ```
 
 In this code, the `legend` designates a custom attribute.
+
+## Preview audio or video upload
+
+If the field allows to upload an audio or video file, you can display a preview of it by specifying the `withPlayablePreview` option:
+
+```php
+class MyForm extends SharpForm
+{
+    // ...
+    function find($id): array
+    {
+        return $this
+            ->setCustomTransformer(
+                'video', 
+                new SharpUploadModelFormAttributeTransformer(withPlayablePreview: true)
+            )
+            ->transform(Book::with('video')->findOrFail($id));
+    }
+```
+
+::: warning
+This feature is using Laravel's file [Temporary URL](https://laravel.com/docs/12.x/filesystem#temporary-urls) feature which only supports S3 & local driver.
+:::