feat: download directly

components/pages/posts/post/PostDownload.vue

@@ -2,18 +2,18 @@
   <div>
     <template v-if="isUserPremium">
 
-      <a :href="mediaUrl" class="flex items-center gap-2 my-2 link" download="" target="_blank">
+      <button class="flex items-center gap-2 my-2 link" type="button" @click="downloadMedia">
 
-        <DownloadIcon class="w-5 h-5 icon"/>
+        <DownloadIcon class="w-5 h-5 icon" />
 
         Download
-      </a>
+      </button>
     </template>
 
     <template v-else>
       <NuxtLink class="flex items-center gap-2 my-2 link" to="/premium">
 
-        <DownloadIcon class="w-5 h-5 icon"/>
+        <DownloadIcon class="w-5 h-5 icon" />
 
         Download
       </NuxtLink>
@@ -24,12 +24,17 @@
 <script>
 import { mapGetters } from 'vuex'
 import { DownloadIcon } from 'vue-feather-icons'
+import { ProxyHelper } from "~/assets/js/ProxyHelper";
 
 export default {
 
   components: { DownloadIcon },
 
   props: {
+    mediaName: {
+      type: String,
+      required: true,
+    },
     mediaUrl: {
       type: String,
       required: true,
@@ -39,5 +44,39 @@ export default {
   computed: {
     ...mapGetters('premium', ['isUserPremium']),
   },
+
+  methods: {
+    downloadBlobToDevice(blob, fileName) {
+      const BLOB_OBJECT_URL = URL.createObjectURL(blob)
+
+      const LINK = document.createElement('a')
+
+      LINK.href = BLOB_OBJECT_URL
+      LINK.target = '_blank'
+      LINK.download = fileName
+      LINK.style.display = 'none'
+
+      document.body.appendChild(LINK)
+      LINK.click()
+      document.body.removeChild(LINK)
+
+      URL.revokeObjectURL(BLOB_OBJECT_URL)
+    },
+
+    async downloadMedia() {
+
+      const PROXIED_MEDIA_URL = ProxyHelper.proxyUrl(this.mediaUrl);
+
+      const RESPONSE = await fetch(PROXIED_MEDIA_URL)
+
+      const RESPONSE_BLOB = await RESPONSE.blob()
+
+      const FILE_EXTENSION = RESPONSE.headers.get('content-type').split('/')[1]
+
+      const FILE_NAME = this.mediaName + '.' + FILE_EXTENSION
+
+      this.downloadBlobToDevice(RESPONSE_BLOB, FILE_NAME);
+    },
+  },
 }
 </script>