file download component

components/ContentBuilder.vue

@@ -9,6 +9,7 @@
         <DynamicZoneFullImage v-else-if="item.__component == 'dynamic-zone.full-image'" :data="item" />
         <DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
         <DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :data="item" />
+        <DynamicZoneFileDownload v-else-if="item.__component == 'dynamic-zone.file-download'" :data="item" />
         <SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
         <br />
       </div>

components/dynamicZone/FileDownload.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="showComponent" class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
+    <h1 class="text-center">{{ data?.title }}</h1>
+    <iframe v-if="data.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
+    <NuxtPicture
+      v-if="data.file.mime.includes('image')"
+      loading="lazy"
+      class="w-full object-cover object-center mx-auto"
+      :src="baseUrl + data?.file.url"
+      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
+    />
+    <a
+      v-if="data.enable_download"
+      :href="baseUrl + data.file.url"
+      :download="data.file.name"
+      target="_blank"
+      class="w-fit text-primary underline"
+    >
+      Datei herunterladen
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneFileDownload from "../../types/component/dynamicZoneFileDownload";
+
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
+
+const props = defineProps({
+  data: Object as PropType<DynamicZoneFileDownload>,
+});
+
+const showComponent = computed(() => {
+  if (props.data.file.mime == "application/pdf" || props.data.file.mime.includes("image")) {
+    return true;
+  } else {
+    return props.data.enable_download;
+  }
+});
+</script>

types/collection/article.ts

@@ -1,4 +1,4 @@
-import type BaseImage from "../component/baseImage";
+import type BaseFile from "../component/baseFile";
 import type BaseCollection from "./baseCollection";
 
 export default interface Article extends BaseCollection {}

types/collection/baseCollection.ts

@@ -1,4 +1,4 @@
-import type BaseImage from "../component/baseImage";
+import type BaseFile from "../component/baseFile";
 import type ContentField from "../field/content";
 
 export default interface BaseCollection {
@@ -14,6 +14,6 @@ export default interface BaseCollection {
   description: string;
   date: string | undefined;
   content: ContentField | undefined;
-  image: BaseImage | undefined;
+  image: BaseFile | undefined;
-  attachment: Array<BaseImage>;
+  attachment: Array<BaseFile>;
 }

types/collection/vehicle.ts

@@ -1,4 +1,4 @@
-import type BaseImage from "../component/baseImage";
+import type BaseFile from "../component/baseFile";
 import type BaseCollection from "./baseCollection";
 
 export default interface Vehicle extends BaseCollection {

types/component/baseComponent.ts

@@ -4,6 +4,7 @@ import type DynamicZoneEmphasiseArticle from "./dynamicZoneEmphasiseArticle";
 import type DynamicZoneFullImage from "./dynamicZoneFullImage";
 import type DynamicZoneFullText from "./dynamicZoneFullText";
 import type DynamicZoneGallery from "./dynamicZoneGallery";
+import type DynamicZoneFileDownload from "./dynamicZoneFileDownload";
 import type SharedList from "./sharedList";
 
 export default interface BaseComponent {
@@ -18,7 +19,8 @@ export type ComponentNames =
   | "dynamic-zone.full-image"
   | "dynamic-zone.emphasise-article"
   | "dynamic-zone.dual-column-text"
-  | "dynamic-zone.column-image-text";
+  | "dynamic-zone.column-image-text"
+  | "dynamic-zone.file-download";
 
 export type ComponentTypes =
   | SharedList
@@ -27,4 +29,5 @@ export type ComponentTypes =
   | DynamicZoneFullImage
   | DynamicZoneEmphasiseArticle
   | DynamicZoneDualColumnText
-  | DynamicZoneColumnImageText;
+  | DynamicZoneColumnImageText
+  | DynamicZoneFileDownload;

types/component/baseFile.ts

@@ -1,4 +1,4 @@
-export default interface BaseImage {
+export default interface BaseFile {
   id: number;
   documentId: string;
   name: string;

types/component/dynamicZoneColumnImageText.ts

@@ -1,10 +1,10 @@
 import type ContentField from "../field/content";
 import type BaseComponent from "./baseComponent";
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 
 export default interface DynamicZoneColumnImageText extends BaseComponent {
   __component: "dynamic-zone.column-image-text";
   text: ContentField;
   image_left: boolean;
-  image: BaseImage;
+  image: BaseFile;
 }

types/component/dynamicZoneFileDownload.ts

@@ -0,0 +1,9 @@
+import type BaseComponent from "./baseComponent";
+import type BaseFile from "./baseFile";
+
+export default interface DynamicZoneFileDownload extends BaseComponent {
+  __component: "dynamic-zone.file-download";
+  enable_download: boolean;
+  title: string;
+  file: BaseFile;
+}

types/component/dynamicZoneFullImage.ts

@@ -1,7 +1,7 @@
 import type BaseComponent from "./baseComponent";
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 
 export default interface DynamicZoneFullImage extends BaseComponent {
   __component: "dynamic-zone.full-image";
-  image: BaseImage;
+  image: BaseFile;
 }

types/component/dynamicZoneGallery.ts

@@ -1,7 +1,7 @@
 import type BaseComponent from "./baseComponent";
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 
 export default interface DynamicZoneGallery extends BaseComponent {
   __component: "dynamic-zone.gallery";
-  images: Array<BaseImage>;
+  images: Array<BaseFile>;
 }

types/component/globalNavbar.ts

@@ -1,8 +1,8 @@
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 import type NavbarItem from "./itemsNavbarItem";
 
 export default interface Navbar {
   id: number;
-  logo: BaseImage;
+  logo: BaseFile;
   navbar_items: NavbarItem[];
 }

types/component/sharedHero.ts

@@ -1,7 +1,7 @@
-import type BaseImage from "./baseImage";
+import type BaseFile from "./baseFile";
 
 export default interface SharedHero {
   id: number;
   title: string;
-  banner: BaseImage;
+  banner: BaseFile;
 }

types/single/homepage.ts

@@ -1,4 +1,4 @@
-import type BaseImage from "../component/baseImage";
+import type BaseFile from "../component/baseFile";
 import type { ComponentTypes } from "../component/baseComponent";
 
 export default interface Homepage {
@@ -8,7 +8,7 @@ export default interface Homepage {
   updatedAt: string;
   publishedAt: string;
   locale: string;
-  backdrop: BaseImage;
+  backdrop: BaseFile;
   hide_backdrop: boolean;
   content: Array<ComponentTypes>;
 }