Skip to content
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

File upload: use preview options #6611

Merged
merged 2 commits into from
Aug 12, 2024
Merged

File upload: use preview options #6611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
983825d
File upload: use preview options
distantnative Aug 11, 2024
ee7a11c
Keep the UploadItem component independent from the panel.upload module
bastianallgeier Aug 12, 2024
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
6 changes: 5 additions & 1 deletion config/fields/mixins/upload.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@
$uploads = [];
}

$uploads['accept'] = '*';
$uploads['accept'] = '*';

if ($preview = $this->image) {
$uploads['preview'] = $preview;
}

if ($template = $uploads['template'] ?? null) {
// get parent object for upload target
Expand Down
1 change: 1 addition & 0 deletions config/sections/files.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,7 @@
'multiple' => $multiple,
'max' => $max,
'api' => $this->parent->apiUrl(true) . '/files',
'preview' => $this->image,
'attributes' => [
// TODO: an edge issue that needs to be solved:
// if multiple users load the same section
Expand Down
49 changes: 43 additions & 6 deletions panel/lab/components/dialogs/5_upload/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
Open
</k-button>
</k-lab-example>
<k-lab-example :flex="true" label="Custom Preview">
<k-button icon="open" variant="filled" @click="openCustomPreview">
Open
</k-button>
</k-lab-example>
<k-lab-example :flex="true" label="Upload error">
<k-button icon="open" variant="filled" @click="openUploadError">
Open
Expand All @@ -16,6 +21,38 @@
<script>
export default {
methods: {
openCustomPreview() {
this.$panel.upload.open();
this.$panel.upload.files = [
{
back: "red",
cover: false,
name: "test-0",
extension: "jpg",
url: "https://picsum.photos/600/850",
type: "image/jpeg",
niceSize: "80kb"
},
{
back: "orange",
cover: false,
name: "test-1",
extension: "jpg",
niceSize: "80kb",
url: "https://picsum.photos/850/600",
type: "image/jpeg"
},
{
back: "green",
cover: false,
name: "test-2",
extension: "jpg",
niceSize: "80kb",
url: "https://picsum.photos/400/850",
type: "image/jpeg"
}
];
},
openEmpty() {
this.$panel.upload.reset();
this.$panel.upload.open();
Expand All @@ -28,7 +65,7 @@ export default {
extension: "jpg",
url: "https://picsum.photos/600/850",
type: "image/jpeg",
niceSize: "80kb",
niceSize: "80kb"
},
{
name: "test-1",
Expand All @@ -37,7 +74,7 @@ export default {
url: "https://picsum.photos/600/850",
type: "image/jpeg",
error:
"Thisisaverylongerrormessagethatcouldbreakthelayoutoftheuploaderandmaybeevenshouldbecauseotherwisewedon'tseeit.",
"Thisisaverylongerrormessagethatcouldbreakthelayoutoftheuploaderandmaybeevenshouldbecauseotherwisewedon'tseeit."
},
{
name: "test-2",
Expand All @@ -46,10 +83,10 @@ export default {
url: "https://picsum.photos/600/850",
type: "image/jpeg",
error:
"This one should wrap proplery because it has some spaces and isn't completely bonkers",
},
"This one should wrap proplery because it has some spaces and isn't completely bonkers"
}
];
},
},
}
}
};
</script>
13 changes: 13 additions & 0 deletions panel/lab/components/uploads/2_upload-item/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,19 @@
@rename="rename"
/>
</k-lab-example>
<k-lab-example label="Upload Item with custom preview settings">
<k-upload-item
:cover="false"
back="gray-400"
extension="jpeg"
type="image/jpeg"
name="test"
niceSize="128 kB"
url="https://picsum.photos/100/300"
@remove="remove"
@rename="rename"
/>
</k-lab-example>
<k-lab-example label="Progress">
<k-upload-item
:progress="80"
Expand Down
19 changes: 17 additions & 2 deletions panel/lab/components/uploads/3_upload-item-preview/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,24 @@
<template>
<k-lab-examples>
<k-lab-example label="Image with preview">
<k-lab-example label="Image">
<k-upload-item-preview
type="image/jpeg"
url="https://picsum.photos/200/200"
url="https://picsum.photos/100/200"
/>
</k-lab-example>
<k-lab-example label="Image & cover: false">
<k-upload-item-preview
:cover="false"
type="image/jpeg"
url="https://picsum.photos/100/200"
/>
</k-lab-example>
<k-lab-example label="Image & cover: false & back: white">
<k-upload-item-preview
back="white"
:cover="false"
type="image/jpeg"
url="https://picsum.photos/100/200"
/>
</k-lab-example>
<k-lab-example label="Image without preview">
Expand Down
1 change: 1 addition & 0 deletions panel/src/components/Forms/Field/FilesField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export default {
accept: this.uploads.accept,
max: this.max,
multiple: this.multiple,
preview: this.uploads.preview,
url: this.$panel.urls.api + "/" + this.endpoints.field + "/upload",
on: {
done: (files) => {
Expand Down
2 changes: 2 additions & 0 deletions panel/src/components/Uploads/UploadItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<template>
<li :data-completed="completed" class="k-upload-item">
<k-upload-item-preview
:back="back"
:color="color"
:cover="cover"
:icon="icon"
:type="type"
:url="url"
Expand Down
17 changes: 15 additions & 2 deletions panel/src/components/Uploads/UploadItemPreview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
<template>
<a :href="url" class="k-upload-item-preview" target="_blank">
<k-image v-if="isPreviewable" :cover="true" :src="url" back="pattern" />
<k-image
v-if="isPreviewable"
:cover="cover"
:src="url"
:back="back ?? 'pattern'"
/>
<k-icon-frame
v-else
:color="color ?? fallbackColor"
:icon="icon ?? fallbackIcon"
back="black"
:back="back ?? 'black'"
ratio="1/1"
/>
</a>
Expand All @@ -14,10 +19,18 @@
<script>
export const props = {
props: {
/**
* Preview back color
*/
back: String,
/**
* Preview icon color
*/
color: String,
cover: {
type: Boolean,
default: true
},
/**
* Preview icon type
*/
Expand Down
9 changes: 7 additions & 2 deletions panel/src/panel/upload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const defaults = () => {
files: [],
max: null,
multiple: true,
preview: {},
replacing: null,
url: null
};
Expand Down Expand Up @@ -105,6 +106,7 @@ export default (panel) => {
const url = URL.createObjectURL(file);

return {
...this.preview,
completed: false,
error: null,
extension: extension(file.name),
Expand Down Expand Up @@ -137,6 +139,9 @@ export default (panel) => {

const dialog = {
component: "k-upload-dialog",
props: {
preview: this.preview
},
on: {
cancel: () => this.cancel(),
submit: async () => {
Expand All @@ -147,10 +152,10 @@ export default (panel) => {
}
};

// when replacing a file, use decdicated dialog component
// when replacing a file, use dedicated dialog component
if (this.replacing) {
dialog.component = "k-upload-replace-dialog";
dialog.props = { original: this.replacing };
dialog.props.original = this.replacing;
}

panel.dialog.open(dialog);
Expand Down
Loading