Custom Connector

[Shawn Springstead]

I am trying to implement this for a php app I have, so I'm writing a custom api, and building my own connector.

The big difference for me is my files references are not stored in a database, so my file ids are actually file and directory names. I have it browsing and downloading files, but sub directories are giving my trouble. So he component renders and loads /api/files/, which returns a dir with an id of home, which prompts /api/files/home, which is my top level directory. Great, the files in home are all displayed.

Now when I go to subfolder 'test', it calls the api at /api/files/hometest. As I understand, the id is built by appending each parent id together, I'm guessing the id is always the same length and split apart? I don't really understand how this id would be useful normally. So for my use case, I would want the ids built with forward slashes between the parts, so it would look like /api/files/home/test.

I forked the node-v1 connector, built it, and imported it into my project:
import connector from 'Utils/file-connector'; and pass this connector object to the file navigator.

Now the problem I'm actually running into, is that I don't understand where this id is being created. In src/api.js I see functions like getIdForPath and getIdForPartPath that look like what I'm looking for but I'm certain these functions are never being called. I add a console log to one, and remove all it's contents so that it's just returning null, build it, and nothing changes, everything keeps running as normal, and no console outputs. I can see the changes I make in the diff of the lib output, I know it's building correctly, but these functions are definitely not being used. What is going on? Where does the id get built if not here? I'm very confused.

[Kirill Volkovich]

Hi, @SpringsTea!

Ids for children/parents resources are comming from API responces and not generating on client at all.

The getIdForPath function - just an utility function to use it outside of the connector. For example if you want to generate and pass a initialResourceId prop to FileNavigator component. Its specific for current @opuscapita/filemanager-server implementation and appropriate @opuscapita/react-filemanager-connector-node-v1.

If your server side don't have artificial ids, you don't need getIdForPath it at all. In your case id is equals with a real path on file system.

[Andrei Mourzenkov]

@SpringsTea

id is explained in docs and set here:

const resource = {
	id: path2id(userPath)
};

where path2id is an alias for this function.

So id for your top-level dir is base64-encoded /, id for your test subfolder is base64-encoded /test, etc.

I might as well just do

const resource = {
	id: userPath
};

I would not recommend doing the following though:

const resource = {
	id: serverFileSystemAbsolutePath
};

because your server file system structure gets revealed to the client.

[Shawn Springstead]

Ah, I see, I was confused. In the demo each nested file or dir has it's parents id concatenated, so I thought the manager was doing this. Thank you for the assistance, I have things running now.

Similar to the issue I thought I had, one change I have to make to support my php api is that downloading multiple items requires the url to be /download?items[]=filepath1&items[]=filepath2
PHP requires the [] to interpret the parameters as an array, otherwise it just takes the last item as a string.

So in api.js I changed downloadResources to items[]=resource.id and also in download.js I changed downloadUrl to also use items[]. When I download a single file, the url is correct /download?items[]=file
But when I download multiple files at a time, it changes back /download?items=file&items=file2

Does multi download not use connector functions to build the download url?

[Andrei Mourzenkov]

@SpringsTea Well, I change filemanager/packages/connector-node-v1/src/api.js line 109 from

(url, resource, num) => url + (num === 0 ? '' : '&') + `items=${resource.id}`,

to

(url, resource, num) => url + (num === 0 ? '' : '&') + `items[]=${resource.id}`,

After selecting two files and pressing Download button Chome DevTools Network tab shows

http://localhost:3020/download?items[]=L0RvY3VtZW50cy9lYXN5Y2hhaXIuZG9jeA&items[]=L0RvY3VtZW50cy9ncGwucGRm

and Node.js server gets req.originalUrl

/download?items[]=L0RvY3VtZW50cy9lYXN5Y2hhaXIuZG9jeA&items[]=L0RvY3VtZW50cy9ncGwucGRm

As you can see, multi download does use connector functions to build the download URL, and everything works like a charm.

[Kirill Volkovich]

@SpringsTea, did it help you?

[Shawn Springstead]

Hmm, I think I have found the problem. It was still not working even though I changed that line.
In my app build file I found both items[]= and items= present, even though in my connector build file only files[]= was present. I still had connector-node-v1 installed as a dependency, so even though at no point in my code was I importing it, the node connector was still being used for this feature instead of the one I was providing. I feel like this must be a bug.

So now I removed the node connector from my package.json and it is working correctly.
I've never used a package like this, so maybe you can tell me if I'm doing something wrong.
Without the node connector import, my app build would fail because the dependencies my forked connector needed were not present. Shouldn't that not happen since the lib files have already been built through webpack? I have fixed this by running npm i inside my forked connectors directory, but this seems really wrong to me. That means if I were to move the my app, I would have to install packages in the root dir, and for this connector.

[Kirill Volkovich]

Maybe you can prepare some git repo example where we can reproduce the bug?
It's hard to determine it without seeing any code.

[Shawn Springstead]

I replicated my setup and copied over the connector I am building
https://codesandbox.io/s/n4vw8r2q5p

but I am unable to replicate the issue, everything works fine. I'll just chalk it up to webpack shenanigans .
Thanks for the assistance.