fixes and small changes

Author: alexusmai

.env

@@ -1 +1,2 @@
-VUE_APP_AXIOS_BASE_URL=
+VUE_APP_LFM_AXIOS_BASE_URL=
+VUE_APP_LFM_CSRF_TOKEN=

README.md

@@ -56,9 +56,17 @@ Vue.use(FileManager, {
     store, // required
     
     // not required params
-    headers: {'Authorization': 'Bearer ...'}, // add header
-    // OR
-    headers: {'X-CSRF-TOKEN': 'token'}, // overwrite default header Axios
+    
+    headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+        'Authorization': 'Bearer ...'
+    },
+    // default headers example
+    headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-CSRF-TOKEN': 'set laravel csrf token here...'
+    },
+    
     baseUrl: 'http://my_url:80/file-manager/', // overwrite base url Axios
     windowsConfig: 2,
     lang: 'de',     // set language
@@ -73,12 +81,6 @@ Vue.use(FileManager, {
 }
 ```
 
-In development mode you can change base url for application -  add this param in your laravel .env file
-
-```
-MIX_LFM_BASE_URL=http://my-url.loc/file-manager/
-```
-
 Now vue component is registered and you can use it in your app
 ```
 <file-manager></file-manager>
@@ -93,4 +95,14 @@ Don't forget add a csrf token to head block in your Laravel view and add bootstr
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
 ```
 
+You can use [environment variables](https://laravel.com/docs/mix#environment-variables)
+
+```
+// set baseUrl
+MIX_LFM_BASE_URL=http://my-url.loc/file-manager/
+
+// if you don't want to use csrf-token - you can off it
+MIX_LFM_CSRF_TOKEN=OFF
+```
+
 Warning! Package use axios (Promise) - use babel-polyfill for ie11

package.json

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

src/FileManager.vue

@@ -34,7 +34,7 @@
 /* eslint-disable import/no-duplicates, no-param-reassign */
 import { mapState } from 'vuex';
 // Axios
-import HTTP from './http/init-axios';
+import HTTP from './http/axios';
 import EventBus from './eventBus';
 // Components
 import Navbar from './components/blocks/Navbar.vue';
@@ -67,8 +67,8 @@ export default {
     }),
   },
   created() {
-    // init base url
-    this.$store.commit('fm/settings/initBaseUrl');
+    // initiate Axios settings - baseUrl and headers
+    this.$store.commit('fm/settings/initAxiosSettings');
 
     // add axios request interceptor
     this.requestInterceptor();
@@ -98,17 +98,10 @@ export default {
     requestInterceptor() {
       HTTP.interceptors.request.use((config) => {
         // overwrite base url
-        if (this.$store.getters['fm/settings/baseUrl'] !== config.baseURL) {
-          config.baseURL = this.$store.getters['fm/settings/baseUrl'];
-        }
+        config.baseURL = this.$store.getters['fm/settings/baseUrl'];
 
         // overwrite headers
-        const newHeaders = this.$store.state.fm.settings.headers;
-
-        if (newHeaders) {
-          Object.keys(newHeaders)
-            .forEach((key) => { config.headers[key] = newHeaders[key]; });
-        }
+        config.headers = this.$store.getters['fm/settings/headers'];
 
         // loading spinner +
         this.$store.commit('fm/messages/addLoading');

src/components/blocks/Navbar.vue

@@ -210,10 +210,16 @@ export default {
       this.$store.dispatch('fm/toClipboard', type);
 
       // show notification
-      if(type === 'cut') {
-          EventBus.$emit('addNotification', {status: 'success', message: 'Cut to clipboard!'});
-      } else if(type === 'copy') {
-          EventBus.$emit('addNotification', {status: 'success', message: 'Copied to clipboard!'});
+      if (type === 'cut') {
+        EventBus.$emit('addNotification', {
+          status: 'success',
+          message: this.lang.notifications.cutToClipboard,
+        });
+      } else if (type === 'copy') {
+        EventBus.$emit('addNotification', {
+          status: 'success',
+          message: this.lang.notifications.copyToClipboard,
+        });
       }
     },
 

src/components/manager/GridView.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="fm-grid">
         <div class="d-flex align-content-start flex-wrap">
-            <div class="fm-grid-item text-center" v-on:click="levelUp" v-if="!isRootPath">
+            <div v-if="!isRootPath" v-on:click="levelUp" class="fm-grid-item text-center" >
                 <div class="fm-item-icon">
                     <i class="fas fa-level-up-alt fa-5x pb-2"></i>
                 </div>
@@ -38,7 +38,7 @@
                     <template v-else-if="thisImage(file.extension)">
                         <img class="img-thumbnail"
                              v-bind:alt="file.filename"
-                             v-bind:src="createImgUrl(file.path)">
+                             v-bind:src="createImgUrl(file.path, file.timestamp)">
                     </template>
                     <template v-else>
                         <i class="far fa-5x pb-2"
@@ -105,10 +105,11 @@ export default {
     /**
      * Create url for image
      * @param path
+     * @param timestamp
      * @returns {string}
      */
-    createImgUrl(path) {
-      return `${this.$store.getters['fm/settings/baseUrl']}thumbnails?disk=${this.disk}&path=${path}`;
+    createImgUrl(path, timestamp) {
+      return `${this.$store.getters['fm/settings/baseUrl']}thumbnails?disk=${this.disk}&path=${path}&v=${timestamp}`;
     },
   },
 };

src/components/manager/mixins/manager.js

@@ -51,11 +51,12 @@ export default {
     },
 
     /**
-    * Check if current path is at root level
-    */
+     * Check if current path is at root level
+     * @return {boolean}
+     */
     isRootPath() {
       return this.$store.state.fm[this.manager].selectedDirectory === null;
-    }
+    },
   },
   methods: {
     /**
@@ -149,6 +150,10 @@ export default {
         this.$store.dispatch('fm/url', {
           disk: this.selectedDisk,
           path,
+        }).then((response) => {
+          if (response.data.result.status === 'success') {
+            this.$store.state.fm.fileCallback(response.data.url);
+          }
         });
 
         return;

src/components/modals/views/Preview.vue

@@ -72,6 +72,10 @@ export default {
       return this.$store.getters['fm/selectedItems'][0];
     },
 
+    /**
+     * Show modal footer
+     * @return boolean
+     */
     showFooter() {
       return this.canCrop(this.selectedItem.extension) && !this.showCropperModule;
     },
@@ -97,13 +101,21 @@ export default {
     canCrop(extension) {
       return this.$store.state.fm.settings.cropExtensions.includes(extension.toLowerCase());
     },
+
+    /**
+     * Set image URL
+     */
     setImgUrl() {
-	  this.imgUrl = `${this.$store.getters['fm/settings/baseUrl']}preview?disk=${this.selectedDisk}&path=${encodeURIComponent(this.selectedItem.path)}&v=${this.selectedItem.timestamp}`;
+      this.imgUrl = `${this.$store.getters['fm/settings/baseUrl']}preview?disk=${this.selectedDisk}&path=${encodeURIComponent(this.selectedItem.path)}&v=${this.selectedItem.timestamp}`;
     },
-	closeCropper() {
+
+    /**
+     * Close cropper
+     */
+    closeCropper() {
       this.showCropperModule = false;
       this.setImgUrl();
-	},
+    },
   },
 };
 </script>