Settings is not working.

[codeperl]

Hi @alexusmai, Thanks for writing such a nice piece of software and saving thousand of hours of developers.

To change the settings, I am following README documentation and so I am using this object:

{
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        Authorization: `Bearer ${window.localStorage.getItem('_token')}`,
    },
    baseUrl: import.meta.env.VITE_APP_LFM_AXIOS_BASE_URL,
    lang: 'en',
}

I use .env and .env.development files to configure baseUrl. in .env and .env.development file, my VITE_APP_LFM_AXIOS_BASE_URL=https://freemarketbackend.com:443/file-manager/

My vue app is in vuejs3 with vite and run using docker. I am using npm run dev. My Vue 3 app is running in a different domain:
https://www.freemarket.com:4431

After docker build is done, I tried to print VITE_APP_LFM_AXIOS_BASE_URL(baseUrl) and it gives me the correct result: https://freemarketbackend.com:443/file-manager/

But when the Vuejs 3 app is running via https://www.freemarket.com:4431/assets, the laravel file manager UI is shown but the request sent to:

https://www.freemarket.com:4431/initialize

The expected request is to run at:
https://freemarketbackend.com:443/file-manager/initialize

In "fm" vuex namespace, this set to: baseUrl=https://freemarketbackend.com:443/file-manager

Can you please help me to figure out if I miss any point?

So far I tried these ways:

1. <file-manager v-bind:settings="settings"></file-manager>
2. At main.js I use:

app.use(router)
    .use(store)
    .use(FileManager, {
        store,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            Authorization: `Bearer ${window.localStorage.getItem('_token')}`,
        },
        baseUrl: 'https://freemarketbackend.com:443/file-manager',
        lang: 'en',
    })
    .use(useAccordion)
    .use(VueProgressBar, options)
    .mount('#app');

Thanks in advance!

[codeperl]

Update: from my investigation. For "some causes", http/axios.js returns axios instance with axios.create() but can't set values from .env.development or .env files! I tried with multiple ways:

1. inside node_modules/laravel-file-manager/.env|.env.development(predefined files), I set values. It doesn't effect baseURL.
2. To override those pre-defined files, I create app specific .env|.env.development files. This doesn't work too!

Only way to make it work is to set something like this inside http/axios.js:

import axios from 'axios';

// set new axios instance
export default axios.create(**{
    baseURL: import.meta.env.VITE_APP_LFM_AXIOS_BASE_URL
}**);

All other things ie. inside vuex the baseURL are set correctly. As I stated in last comment. Only this seems the issue. May be there is better way to solve this. But here are my 2 cents.

Regards

[codeperl]

Today, I find a solution. I just forked this library and for temporary fix I followed this path:

1. Saving the settings in localstorage with encryption.
2. Set the baseURL and headers of axios by decrypting the saved localstorage value.

Seems it is working fine.

Currently facing CORS issue. But I think it's a different case.

[iamsubingyawali]

@alexusmai Same issue. Settings are not getting applied. Why can't I just put hardcoded values and pass it to the settings props? Below code didn't work for me.

<template>
    <div>
        <file-manager v-bind:settings="settings"></file-manager>
    </div>
</template>
<script>
export default {
    computed: {
        settings(){
            return {
                headers: {
                    Authorization: 'Bearer MyToken',
                },
                baseUrl: '/api/file-manager/',
            }
        }
    }
}
</script>

It is neither setting the headers nor using the specified baseURL. When I tried to create a directory with these settings, it is sending requests to http://127.0.0.1:8000/create-directory without specified headers, while it should have sent to https://127.0.0.1:8000/api/file-manager/create-directory with auth header. What am I missing here?

I tried creating environment variable for URL as well, but it too didn't work.

I don't think that using local storage or modifying package config code is a good idea as they can be very unreliable and temporary.