Fixing file manager by adding localstorage and configuring at init.js

Author: ashferd

package.json

@@ -1,6 +1,6 @@
 {
   "name": "laravel-frontend-file-manager",
-  "version": "3.0.17",
+  "version": "3.0.34",
   "description": "File manager for Laravel",
   "keywords": [
     "laravel",

src/FileManager.vue

@@ -87,12 +87,6 @@ export default {
     created() {
         // manual settings
         this.$store.commit('fm/settings/manualSettings', this.settings);
-        /**
-         * FIXME: Manual settings set the vuex settings store but to initiate axios, that value is not available
-         * in js files, I am using localstorage to manage those settings.
-         */
-        localstore.setStorage(localstore.axiosSettingType, this.settings);
-
         // initiate Axios
         this.$store.commit('fm/settings/initAxiosSettings');
         this.setAxiosConfig();
@@ -122,12 +116,18 @@ export default {
         }),
     },
     methods: {
+        storeAxiosConfig() {
+            localstore.setStorage(localstore.axiosSettingType, this.settings);
+        },
         /**
          * Axios default config
          */
         setAxiosConfig() {
-            // HTTP.defaults.baseURL = this.$store.getters['fm/settings/baseUrl'];
-            // HTTP.defaults.headers = this.$store.getters['fm/settings/headers'];
+            /** Original version **/
+            /*HTTP.defaults.baseURL = this.$store.getters['fm/settings/baseUrl'];
+            HTTP.defaults.headers = this.$store.getters['fm/settings/headers'];*/
+
+            /** Customized by Mohammad Ashrafuddin Ferdousi */
             let settings = localstore.getStorage(localstore.axiosSettingType);
 
             if(settings) {

src/components/manager/GridView.vue

@@ -34,7 +34,6 @@
                 v-on:dblclick="selectAction(file.path, file.extension)"
                 v-on:contextmenu.prevent="contextMenu(file, $event)"
             >
-                {{ files }}
                 <div class="fm-item-icon">
                     <i v-if="acl && file.acl === 0" class="bi bi-file-earmark-lock pb-2" />
                     <thumbnail v-else-if="thisImage(file.extension)" v-bind:disk="disk" v-bind:file="file"></thumbnail>

src/components/manager/Thumbnail.vue

@@ -70,10 +70,10 @@ export default {
             // if authorization required
             if (this.auth) {
                 GET.thumbnail(this.disk, this.file.path).then((response) => {
-                    const mimeType = response.headers['content-type'].toLowerCase();
+                    // FIXED: Mohammad Ashrafuddin Ferdousi
+                    const mimeType = response.data.headers['Content-Type'].toLowerCase();
                     //const imgBase64 = Buffer.from(response.data, 'binary').toString('base64');
-
-                    this.src = `data:${mimeType};base64,${response.data}`;
+                    this.src = `data:${mimeType};base64,${response.data.data}`;
                 });
             } else {
                 this.src = `${this.$store.getters['fm/settings/baseUrl']}thumbnails?disk=${

src/components/modals/views/PreviewModal.vue

@@ -131,10 +131,11 @@ export default {
             // if authorization required
             if (this.auth) {
                 GET.preview(this.selectedDisk, this.selectedItem.path).then((response) => {
-                    const mimeType = response.headers['content-type'].toLowerCase();
-                    const imgBase64 = Buffer.from(response.data, 'binary').toString('base64');
+                    // FIXED: Mohammad Ashrafuddin Ferdousi
+                    const mimeType = response.data.headers['Content-Type'].toLowerCase();
+                    // const imgBase64 = Buffer.from(response.data, 'binary').toString('base64');
 
-                    this.imgSrc = `data:${mimeType};base64,${imgBase64}`;
+                    this.imgSrc = `data:${mimeType};base64,${response.data.data}`;
                 });
             } else {
                 this.imgSrc = `${this.$store.getters['fm/settings/baseUrl']}preview?disk=${

src/init.js

@@ -1,5 +1,7 @@
 import store from './store';
 import FileManager from './FileManager.vue';
+import localstore from './mixins/localstore';
+import HTTP from './http/axios';
 
 export default {
     install: (app, options) => {
@@ -9,5 +11,17 @@ export default {
         app.component('file-manager', FileManager);
 
         options.store.registerModule('fm', store);
+
+        localstore.setStorage(localstore.axiosSettingType, options.settings);
+
+        let settings = options.settings;
+
+        if(settings) {
+            if(settings.baseURL)  HTTP.defaults.baseURL = settings.baseURL;
+            if(settings.withCredentials)  HTTP.defaults.withCredentials = settings.withCredentials;
+            if(settings.headers)  HTTP.defaults.headers = settings.headers;
+        } else {
+            throw `settings.baseURL: ${settings.baseURL}, settings.withCredentials: ${settings.withCredentials}, settings.headers: ${settings.headers} is set!`;
+        }
     },
 };