File preview on model edit

1 files changed, 63 insertions, 0 deletions

diff --git a/components/FilePreview.vue b/components/FilePreview.vue
new file mode 100644
index 0000000..a738a93
--- /dev/null
+++ b/components/FilePreview.vue
@@ -0,0 +1,63 @@
+<template lang="pug">
+  .file-preview
+    img(
+      v-if="isImage(path)"
+      :src="baseAPI + '' + path"
+    )
+    model-stl(
+      v-else-if="isStl(path)"
+      :rotate="rotate"
+      :src="baseAPI + '' + path"
+      :backgroundColor="'#D1D5DB'"
+    )
+    model-obj(
+      v-else-if="isObj(path)"
+      :src="baseAPI + '' + path"
+      :backgroundColor="'#D1D5DB'"
+    )
+</template>
+
+<script>
+import { ModelStl, ModelObj } from "vue-3d-model";
+
+export default {
+  name: "FilePreview",
+  props: ["path"],
+  data() {
+    return {
+      baseAPI: "",
+      rotate: {
+        x: -Math.PI / 2,
+        y: 0,
+        z: 0,
+      },
+    };
+  },
+  components: {
+    ModelStl,
+    ModelObj,
+  },
+  created() {
+    this.baseAPI = this.$config.api;
+  },
+  methods: {
+    checkExt(path, ext) {
+      return path.indexOf("." + ext) > 0;
+    },
+    isImage(path) {
+      return (
+        this.checkExt(path, "png") ||
+        this.checkExt(path, "jpg") ||
+        this.checkExt(path, "jpeg") ||
+        this.checkExt(path, "webp")
+      );
+    },
+    isStl(path) {
+      return this.checkExt(path, "stl") || this.checkExt(path, "sla");
+    },
+    isObj(path) {
+      return this.checkExt(path, "obj") || this.checkExt(path, "octet-stream");
+    },
+  },
+};
+</script>