laravel-vue-file-share/resources/js/Components/custom/FileIcon.vue

73 lines
2 KiB
Vue

<script setup>
import {
isImage,
isAudio,
isVideo,
isText,
isPdf,
isDoc,
isSpreadsheet,
isArchive,
} from "../../getMimeType.js";
// define props
const { file } = defineProps({
file: Object,
});
</script>
<template>
<span>
<img
src="../../../../public/images/folder-blue.svg"
class="w-10 h-10"
v-if="file.is_folder"
/>
<template v-else>
<img
v-if="isImage(file)"
src="../../../../public/images/image-x-generic.svg"
class="w-10 h-10"
/>
<img
v-else-if="isAudio(file)"
src="../../../../public/images/audio-x-generic.svg"
class="w-10 h-10"
/>
<img
v-else-if="isVideo(file)"
src="../../../../public/images/video-x-generic.svg"
class="w-10 h-10"
/>
<img
v-else-if="isPdf(file)"
src="../../../../public/images/application-pdf.svg"
class="w-10 h-10"
/>
<img
v-else-if="isText(file)"
src="../../../../public/images/text-x-generic.svg"
class="w-10 h-10"
/>
<img
v-else-if="isDoc(file)"
src="../../../../public/images/x-office-document.svg"
class="w-10 h-10"
/>
<img
v-else-if="isSpreadsheet(file)"
src="../../../../public/images/x-office-spreadsheet.svg"
class="w-10 h-10"
/>
<img
v-else-if="isArchive(file)"
src="../../../../public/images/ark.svg"
class="w-10 h-10"
/>
<img
v-else
src="../../../../public/images/application-octet-stream.svg"
class="w-10 h-10"
/>
</template>
</span>
</template>