Issue when creating folders / files

[alessandro-de-marco]

Hi,
I was looking at a Vue component for File Explorer and I bumped into your product and I really liked it.
I managed to include it into my Vue project, but I am facing an issue when I create a folder. Once the folder is created, the main content window doesn't seem to refresh, forcing me to manually refresh it.
I looked at the code and I saw that inside Vuefinder.vue you have a method called "updateItems" which I believe it suppose to refresh the content, but it doesn't.
I experimented a little bit with the code and If I add the following line inside the ModalNewFolder.vue component, when the folder is created, the content is refreshed, but not sure if there is a better way to do it that does not involve adding it in every dialog

app.emitter.emit('vf-fetch',{params:{q: 'index', adapter: app.adapter}});

Please do let me know

[n1crack]

thanks, I'm trying to get the library better and better
Do you have any javascript errors in the browsers console? When you inspect the page, after creating a new folder, what is the content of the ajax request that returns ?

[alessandro-de-marco]

Well done for what you have done so far.
I do not get any console error when I try to create the folder. If I can give some suggestion, it would be ideal to add an event listener to the VueFinder component so that the person can customise actions based on that.
Also, I. can see you have 'transformRequest' that allow someone to manipulate the request information before submitting them, but you do not have anything related to the response, which would be ideal to have, as I heavily use API endpoints and I need the response to be in a certain format to accommodate my needs. At the moment, once I perform an action, I have no way to perform any customisation based on that.
It would also ideal to have the ability to attach ids to folders, as I am using aws, but I also store the folder in my own database and it would be more flexible if we could do that.

I would be willing to share what I am doing with you if that helps you.

[n1crack]

I have tested creating a new folder but I can confirm it is refreshed as expected. I'm not sure whats going on in your setup yet.

transformRequest is helpful when you need some other parameters for the backend, with the request object itself its possible to add
custom headers also. However, It is a good idea to add more events to the library for the outside of the component. For now only "select" event is available for getting the selected items, but I think we can add more events to with the request/response data.

Usually the paths and filenames are saved to the databases, instead of ids. I'm not sure how can we improve this.

[alessandro-de-marco]

that is indeed very odd that it works on yours. I did try to clone the repo locally and tried it using the out of the code codebase and even then it wasn't updating the main window after creation. (using my backend as the one listed live does not allow the creation of any folder, so I cannot test it using the existing live demo). I don't know if you would be up to connect directly so that I could perhaps show you?

regarding the response, I cannot currently see a way to retrieve whatever we are getting back from the backend, as I believe the product will expect something fixed. If I return a json array with extra information from my frontend, currently I cannot see a way to get them. Perhaps, if the component allow to retrieve whatever is sent back, the user could then potentially have the freedom to use that data however see it fit.

Another thing I was trying to do (which I couldn't find yet) is whether I can or cannot change the request method for API purposes. right now, I can only see GET and POST, but since my system is api based, I also need a way to send PATCH / PUT / DELETE methods depending on the action.
I tried to edit the 'request.method' and 'request.params.m' but no luck there.

[n1crack]

The existing live demo is using readonly storage, you should remove "new ReadOnlyFilesystemAdapter" part to test it locally.

https://github.com/n1crack/vuefinder.ozdemir.be/blob/1610affbdea3098636d141cbaec6fcc70232c23c/routes/web.php#L14-L28

You can inspect the webpage and can see the returned data. Are you sure the items are created/updated and not displaying at the front ? Or maybe there is a permission issue that prevents it ? you can check the returned data just like shown below.

I want to add, since you are using mostly API, the current version of the api has some issues with stateless authorization. We have a topic here #45 for this.

On the other hand you can post some code examples and screenshots, maybe I can figure out what is wrong.

[alessandro-de-marco]

at the moment, to compensate for the lack of method manipulation, I have this:

const request = {
      baseUrl: fileModel.getFullUrl(),
      headers: { Authorization: `Bearer ${authStore.token}` },
      transformRequest: (req) => {
        if (req.method === 'get') {
          manageGet(req);
        } else if (req.method === 'post') {
          if (req.params.q === 'rename') {
            managePatch(req);
          } else if (req.params.q === 'delete') {
            manageDelete(req);
          } else {
            managePost(req);
          }
        }
        return req;
      },
    };
  
const managePost = (request) => {
      request.body = {
        data: {
          type: 'file',
          attributes: {
            is_directory: request.params.q === 'newfolder',
            owner: 'user',
            filename: request.body.name,
            file_path: request.params?.path,
            mime_type: '',
            is_public: true,
            s3_metadata: {},
          },
          relationships: {
            user: {
              data: {
                type: 'user',
                id: props.user.id,
              },
            },
          },
        },
      };
    };

I have to send data to the backend in a certain format, as I have listeners and DTO that check validations and so fourth, so I have to send data in a certain way.

Regarding the creation of folder, the actual creation works, because as soon as I hit the button "create", the modal closes, but if I hit the 'refresh' button, I can see the newly created folder.

I am also attaching a screenshot of a newly created folder and the data I send back to the frontend (although I currently do not have any way to retrieve that data)

[n1crack]

Yea, it seems after the new folder is created, the response is different somehow. The returned json should be in this format:

It can't process the response that you show.

[alessandro-de-marco]

the only differences in the response is 'adapter' and 'direname', where I manually remove the prefix.
I believe that an improvement could be to allow it to be as flexible as possible with a configuration.
somehow, something is silently failing the to update the main container

[alessandro-de-marco]

Hey,
I have been playing around with the tool and I did make some changes that you might find interesting, but of course, feel free to scrap them all if you do not think are inline with how you want your tool to work.

The changes I did was been a bit rushed and did not spend time to quality check them or adding all condition checks as they are mainly proof of concept.
Here is what I did:

• I bypassed your internal way of handling files/upload and gave that task to the end user. I added additional props and slots so that the user can customise how they want the Explorer to act and displayed.
• I added props that allow user to add folder colours depending on ownership (as I actually needed it for my own purpose, since I needed to identify between system folders from user created ones);
• I added 'readonly' property so that you can lock a folder from been modified. This option though is nt controlled internally, but rather managed by the end user (basically, when the user select the folder and apply an action, that action event is handled by the user in their own way and in however they see it fit).
• all actions are handled in the same manner, including modal windows and upload. the reason being is that, for example, users might have their own UI / UX they want to keep, rather then using the tool internal one.
• I added an additional prop 'items' so that the user can have full control over the items, as the request will be handled entirely by the user and therefore they can also control the response.

I changed 'basename' with 'filename' in Explorer.vue component, but of course feel free to discard the change.
There are things I am sure you can improve (as I am not an expert on node/vue, but I hope to have given you some ideas t make it better and more flexible.|

p.s.
I tried to create a new branch in. yourrepository, but I couldn't do it, so I neded up fork it into another repository on my account. Here is the link for you to see the changes and do whatever you want to do with it.

https://github.com/alessandro-de-marco/vuefinder/tree/feature/open-tool-to-external-input

Alessandro

[n1crack]

thanks,

I haven't looked at all the code, but I like the general idea.,

• external api can be useful. I'll think about it.
• I didn't get the readonly part. I think it should be set from the backend, isn't it? We can add an indicator to show it is readonly or not.
• about the folder colors, It can be set from backend too. we can add "class" key to the items, so the user can select the items via css,

I'm not saying they should be like this. Just brainstorming..

[alessandro-de-marco]

Hi,
yes the readonly I was mentioning is indeed set in the backend, but I added a visual representation to show if a folder is readonly. I added a lock, but of course it can be changed however.

Regarding colours, it is also set in the backend. in my data response, there is a property called ownership that can be set however the user see it fit.
In the frontend, you only pass a prop that define the association between the owner and the class.
the prop accept something like this;
[{name: ‘system’, class:’fill-gray-500, stroke-gray-500}]