image upload and keep if not changed

This commit is contained in:
Julian Krauser 2025-04-30 10:43:11 +02:00
parent 91ede95530
commit 939c982c40
2 changed files with 16 additions and 8 deletions

View file

@ -12,14 +12,14 @@
>
Kein eigenes Icon ausgewählt
</div>
<img ref="icon_img" class="hidden w-full h-20 object-contain" />
<img ref="icon_img" class="hidden w-full h-10 object-contain" />
<XMarkIcon
v-if="enableEdit && (icon != '' || overwriteIcon)"
class="h-5 w-5 cursor-pointer"
@click="resetImage('icon')"
/>
</div>
<input class="hidden!" type="file" ref="icon" accept="image/*" @change="previewImage('icon')" />
<input class="hidden!" type="file" ref="icon" accept="image/png" @change="previewImage('icon')" />
</div>
<div class="w-full">
<p>Vereins-Logo</p>
@ -33,14 +33,14 @@
>
Kein eigenes Logo ausgewählt
</div>
<img ref="logo_img" class="hidden w-full h-20 object-contain" />
<img ref="logo_img" class="hidden w-full h-10 object-contain" />
<XMarkIcon
v-if="enableEdit && (logo != '' || overwriteLogo)"
class="h-5 w-5 cursor-pointer"
@click="resetImage('logo')"
/>
</div>
<input class="hidden!" type="file" ref="logo" accept="image/*" @change="previewImage('logo')" />
<input class="hidden!" type="file" ref="logo" accept="image/png" @change="previewImage('logo')" />
</div>
</BaseSetting>
</template>
@ -135,11 +135,15 @@ export default defineComponent({
return this.uploadImage([
{
key: "club.icon",
value: (this.$refs.icon as HTMLInputElement).files?.[0],
value:
(this.$refs.icon as HTMLInputElement).files?.[0] ??
(this.icon != "" && !this.overwriteIcon ? "keep" : undefined),
},
{
key: "club.logo",
value: (this.$refs.logo as HTMLInputElement).files?.[0],
value:
(this.$refs.logo as HTMLInputElement).files?.[0] ??
(this.logo != "" && !this.overwriteLogo ? "keep" : undefined),
},
]);
},

View file

@ -74,10 +74,14 @@ export const useSettingStore = defineStore("setting", {
return res;
});
},
async uploadImage(data: { key: "club.logo" | "club.icon"; value?: File }[]): Promise<AxiosResponse<any, any>> {
async uploadImage(
data: { key: "club.logo" | "club.icon"; value?: File | "keep" }[]
): Promise<AxiosResponse<any, any>> {
const formData = new FormData();
for (let entry of data) {
if (entry.value) formData.append(entry.key, entry.value);
if (entry.value) {
formData.append(typeof entry.value == "string" ? entry.key : entry.key.split(".")[1], entry.value);
}
}
return await http
.put("/admin/setting/images", formData, {