Automatic file extension for blob downloads

Author: GusevPM

components/modals/BlobModal.vue

@@ -19,6 +19,8 @@ const props = defineProps({
 	show: Boolean,
 })
 
+const supportedContentTypeForPreview = ["image/png", "image/jpeg", "video/mp4", "text/plain; charset=utf-8"]
+
 const isLoading = ref(true)
 const isStopped = ref(false)
 const blob = ref({})
@@ -121,12 +123,18 @@ const handleDownload = () => {
 			.map((e) => parseInt(e, 16)),
 	)
 
+	let extension = "bin"
+	if (supportedContentTypeForPreview.includes(blob.value?.content_type)) {
+		const ct = blob.value.content_type.split(";")[0].split("/")[1]
+		extension = ct === "plain" ? "txt" : ct
+	}
+
 	const a = window.document.createElement("a")
 	a.href = window.URL.createObjectURL(new Blob([byteArray], { type: "application/octet-stream" }))
 	a.download = `${getNamespaceID(cacheStore.selectedBlob.namespace_id)}_${cacheStore.selectedBlob.commitment.slice(
 		cacheStore.selectedBlob.commitment.length - 8,
 		cacheStore.selectedBlob.commitment.length,
-	)}.bin`
+	)}.${extension}`
 	document.body.appendChild(a)
 	a.click()
 	document.body.removeChild(a)

pages/blob.vue

@@ -100,7 +100,7 @@ cacheStore.current.blob = {
 }
 
 onMounted(() => {
-	if (!supportedContentTypeForPreview.includes(blob.content_type)) cards.value.preview = false
+	if (!supportedContentTypeForPreview.includes(blob.value?.content_type)) cards.value.preview = false
 
 	innerWidth.value = window.innerWidth
 	if (innerWidth.value <= 1020) {
@@ -177,12 +177,18 @@ const handleDownload = () => {
 			.map((e) => parseInt(e, 16)),
 	)
 
+	let extension = "bin"
+	if (supportedContentTypeForPreview.includes(blob.value?.content_type)) {
+		const ct = blob.value.content_type.split(";")[0].split("/")[1]
+		extension = ct === "plain" ? "txt" : ct
+	}
+
 	const a = window.document.createElement("a")
 	a.href = window.URL.createObjectURL(new Blob([byteArray], { type: "application/octet-stream" }))
 	a.download = `${metadata.value.namespace.namespace_id}_${blob.value.commitment.slice(
 		blob.value.commitment.length - 8,
 		blob.value.commitment.length,
-	)}.bin`
+	)}.${extension}`
 	document.body.appendChild(a)
 	a.click()
 	document.body.removeChild(a)

pages/stats/[metric].vue

@@ -41,7 +41,10 @@ if (!series.value.page) {
 	router.push("/stats")
 }
 
-const metricName = computed(() => capitalizeAndReplaceUnderscore(series.value?.page))
+const metricName = computed(() => {
+	if (series.value.page === "tvs") return series.value.title
+	return capitalizeAndReplaceUnderscore(series.value?.page)
+})
 
 // defineOgImage({
 // 	title: "Rollup",

services/constants/stats.js

@@ -114,7 +114,7 @@ export const STATS_SERIES = [
 			{
 				subGroup: 'economy',
 				name: 'tvs',
-				title: 'TVS',
+				title: 'Total Value Secured',
 				page: 'tvs',
 				units: 'usd',
 			},