fix(files): svg extension support

components/views/files/rename/Rename.vue

@@ -9,7 +9,6 @@ export default Vue.extend({
   components: {
     SaveIcon,
   },
-
   props: {
     closeModal: {
       type: Function,
@@ -33,7 +32,7 @@ export default Vue.extend({
         ((this.text.lastIndexOf('.') - 1) >>> 0) + 1,
       )
       const input = this.$refs.inputGroup.$refs.input as HTMLInputElement
-      // if file extension is found, highlight everything except the extension
+      // if file extension is found, highlight everything except the [.ext]
       if (extString) {
         input.focus()
         input.setSelectionRange(0, this.text.length - extString.length)
@@ -43,6 +42,10 @@ export default Vue.extend({
     })
   },
   methods: {
+    /**
+     * @method rename
+     * @description attempt to rename child. Update textile files index if successful
+     */
     async rename() {
       try {
         this.$FileSystem.renameChild(this.ui.renameCurrentName, this.text)

components/views/files/view/View.vue

@@ -38,30 +38,52 @@ export default Vue.extend({
     ...mapState(['ui']),
   },
   /**
-   * if no file data available, pull encrypted file from textile bucket and save as blob
    */
   async mounted() {
+    this.load = true
+    // if no file data available, pull encrypted file from textile bucket
     if (!this.file.file) {
-      this.load = true
       const fsFil: Fil = this.$FileSystem.getChild(this.file.name) as Fil
       fsFil.file = await this.$TextileManager.bucket?.pullFile(
         this.file.id,
         this.file.name,
         this.file.type,
       )
-      this.load = false
     }
+    // file extension according to file name
     const fileExt = this.file.name
       .slice(((this.file.name.lastIndexOf('.') - 1) >>> 0) + 2)
       .toLowerCase()
-    // you only need the first 100 bytes or so to confirm file type
-    const dataExt = filetypeextension(
-      new Uint8Array(await this.file.file.slice(0, 100).arrayBuffer()),
-    )[0]
-    // data check will be undefined for .txt
+    // you only need the first 256 bytes or so to confirm file type
+    const buffer = new Uint8Array(
+      await this.file.file.slice(0, 256).arrayBuffer(),
+    )
+    // file extension according to byte data
+    const dataExt = filetypeextension(buffer)[0]
+
+    // magicbytes declares svg as xml, so we need to manually check
+    const decodedFile = new TextDecoder().decode(buffer)
+    if (decodedFile.includes('xmlns="http://www.w3.org/2000/svg"')) {
+      // if corrupted, set .svg extension
+      if (fileExt !== 'svg') {
+        this.name += '.svg'
+      }
+      this.load = false
+      return
+    }
+
+    // if corrupted txt file
+    if (!dataExt && fileExt !== 'txt') {
+      this.name += '.txt'
+      this.load = false
+      return
+    }
+
+    // if corrupted file with wrong extension, force the correct one
     if (fileExt !== dataExt && dataExt) {
       this.name += `.${dataExt}`
     }
+    this.load = false
   },
   methods: {
     /**

libraries/Files/TextileFileSystem.ts

@@ -41,10 +41,10 @@ export class TextileFileSystem extends FilSystem {
   /**
    * @method removeFile
    * @description Remove file/folder from bucket and file system
-   * @param {string} name file name
+   * @param {string} id id and path in bucket
    */
-  async removeFile(name: string) {
-    await this.bucket.removeFile(name)
+  async removeFile(id: string) {
+    await this.bucket.removeFile(id)
   }
 
   /**