Skip to content

Allow to show video / audio preview on upload #617

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aguingand merged 6 commits into from
Sep 1, 2025
Merged

Allow to show video / audio preview on upload #617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e8bb684
Allow to show video / audio preview on upload
aguingand Aug 8, 2025
02b20a6
use temp urls
aguingand Aug 22, 2025
1064ba1
Merge branch 'main' into upload-playable-preview
aguingand Aug 22, 2025
a44fcad
Merge branch 'main' into upload-playable-preview
aguingand Aug 22, 2025
4c787b5
Add tests
aguingand Aug 22, 2025
3c3a6c2
Add docs
aguingand Aug 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions demo/app/Sharp/Posts/PostForm.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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'),
Expand Down Expand Up @@ -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));
}

Expand Down
2 changes: 1 addition & 1 deletion demo/app/Sharp/Posts/PostShow.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
1 change: 1 addition & 0 deletions demo/config/filesystems.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
'local' => [
'driver' => 'local',
'root' => storage_path('app'),
'serve' => true,
],

'public' => [
Expand Down
23 changes: 23 additions & 0 deletions docs/guide/sharp-uploads.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
:::
123 changes: 72 additions & 51 deletions resources/js/form/components/fields/upload/Upload.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -350,6 +353,7 @@
uppy.removeFile(uppyFile.value.id);
uppyFile.value = null;
transformedImg.value = null;
playablePreviewUrl.value = null;
editModalImageUrl.value = null;
}
}
Expand Down Expand Up @@ -382,6 +386,9 @@
if(!props.persistThumbnailUrl && transformedImg.value) {
URL.revokeObjectURL(transformedImg.value);
}
if(playablePreviewUrl.value) {
URL.revokeObjectURL(playablePreviewUrl.value);
}
emit('uploading', false);
});
</script>
Expand All @@ -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>
Expand Down
Loading
Loading