Solid file manager

As I wasn’t that happy with the interfaces I’ve found for managing the solid pods, I’ve decided to search for an open source file manager and connect it to Solid.

Live version: https://otto-aa.github.io/solid-filemanager/
Source Code: https://github.com/Otto-AA/solid-filemanager/

Current features are (updated):

  • view folder and files of your pod
  • open files/folders in new tab
  • upload files
  • create new files and folders
  • copy/move/rename files and folders
  • edit text based files (txt, html, …; no special editor features yet)
  • download files
  • .zip actions (compress, extract)
  • delete files and folders
  • filter current folder (search)

Drag & Drop support would be cool, but I’m not sure how hard it is to implement.

As I’m not 100% sure if everything works correctly and I’m sure many improvements could be done, feedback and maybe also help would be very welcome :slight_smile:
(Maybe don’t try it out with super-important stuff for now)

And if you like it, also consider supporting the creator of the open source file manager here: https://github.com/joni2back/react-filemanager/

11 Likes

You might want to add it to https://github.com/solid/solid-apps when you think it’s ready :slight_smile:

Yes, when I feel it is mature enough I will make a pull request there :blush:
But before I want to implement the missing features, test it properly and also check how good or even if it works in browsers besides Firefox. So this will take one or two weeks I guess

1 Like

I’ve done some improvements now (added “open in new tab” option, download and edit should work now, and some small bug fixes) and despite a bug with .json files (can’t move/copy/rename them) it seems pretty stable now.

I’ve tested it mainly in Firefox (65.0) and a bit in Chrome (72.0). If someone here could check it out in other browsers it would be really helpful.

There is no edit for .TTL
Edit do not work for .JSON
No disconnect option

Some test from Android phone

1 Like

Nice job!

I am having the following issues when using the demo at: https://otto-aa.github.io/solid-filemanager/build/.

  1. I provide https://solid.openlinksw.com:8445 as my preferred Identity Provider – but by default the File manager appears to use that as my Pod’s root or preferred storage location

  2. When logged in I have no way of logging out via the UI

You can negate the issues above by:

  1. Looking up the WebID-Profile doc of the logged in user for storage preferences via objects of ldp:inbox or pim:storage relations

  2. Adding an icon for indicating logged in and logged out status.

1 Like

Thanks for your feedback :+1:

I’ve added .ttl files to the editable files list, so that should work now. I’ve also thought about making all files editable per default, but I’m not sure about this.

Editing json files will have the same problem as moving, copying and renaming them (and probably also downloading). I will look into that this week.

I will add a logout function, but as one can simply reload the page to achieve this it is not a high priority for now. Edit: as two of you appear to have this issue… does reloading do the trick for you?

Reload does the trick yes/no I cannot change webID

1 Like

Thanks for explaining, I get the problem now. I’ve added the possibility to logout and login with a different WebId.

Post login, I always end up in the place depicted by the attached screenshot.

I’ve added the possibility to manually change the storage location after logging in now. Due to a lack of time it’s not tested properly now, but I hope it works now for you :slight_smile:

I will look into automatically fetching the storage location another time.

I’ve patched the copy method to send json as text and now coyping, moving, renaming and editing of them works fine (as far as I have tested)

Works better, but only via Firefox (rather than Chrome).

After successful login I am unable to explore folders by clicking on folder icons.

Screenshots:

Login

Usage

I can’t open the “CoolStuff” folder.

Strange, I’ve entered your public folder as storage location and was able to open CoolStuff without any problem (in Chrome 72.0).

Maybe the problem is, that you’ve entered the storage location with a “/” at the end which was not expected (but fixed now). Can you try it again after reloading the app?

If it doesn’t work, could you take a look into the browser console and the network requests done if any errors are shown there?

Are there any more bugs you’ve noticed or features you think are necessary?
If not, I would update the readme and request it to be added to the solid-apps list in the next few days.

You allow to change storage/location but if I do it and enter the pod I got error

Which error did you get? (And can you check the console and network requests for errors too?)

Here is the error I suppose it is because /root is not allowed, which should allways be the case when changing pod.

  • displayed error
    Error: <!doctype html> <html lang=“en”> <head> <meta charset=“utf-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1”> <title>No permission</title> <link rel=“stylesheet” href="/common/css/bootstrap.min.css"> <link rel=“stylesheet” href="/common/css/solid.css"> </head> <body> <div class=“container”> <div class=“page-header”> <h1>No permission to access this resource</h1> </div> <div class=“alert alert-danger”> <p> You are currently logged in as <code>https://alain.bourgeoa.ga/profile/card#me</code>, but do not have permission to access <code>https://bourgeoa.solid.community/</code>. </p> <p> <button id=“logout” type=“button” class=“btn btn-danger”>Log out</button> </p> </div> </div> </div> <script src="/common/js/solid-auth-client.bundle.js"></script> <script src="/common/js/auth-buttons.js"></script> </body> </html>

  • console error
    GET https://bourgeoa.solid.community/ 401 (Unauthorized)
    bourgeoa.solid.community/:1 GET https://bourgeoa.solid.community/ 403 (Forbidden)
    ApiHandler.js:12 handleFetchError
    ApiHandler.js:16 url: https://bourgeoa.solid.community/
    (anonymous) @ ApiHandler.js:16
    x @ runtime.js:63
    (anonymous) @ runtime.js:282
    e.(anonymous function) @ runtime.js:116
    r @ asyncToGenerator.js:3
    s @ asyncToGenerator.js:25
    Promise.then (async)
    r @ asyncToGenerator.js:13
    s @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    (anonymous) @ ApiHandler.js:9
    Promise.catch (async)
    de @ ApiHandler.js:54
    (anonymous) @ Actions.js:123
    (anonymous) @ index.js:8
    (anonymous) @ SolidLogin.jsx:91
    value @ SolidLogin.jsx:31
    (anonymous) @ react-dom.production.min.js:49
    d @ react-dom.production.min.js:69
    (anonymous) @ react-dom.production.min.js:73
    E @ react-dom.production.min.js:140
    C @ react-dom.production.min.js:168
    T @ react-dom.production.min.js:158
    N @ react-dom.production.min.js:232
    kn @ react-dom.production.min.js:1713
    Aa @ react-dom.production.min.js:5400
    De @ react-dom.production.min.js:660
    Cn @ react-dom.production.min.js:1755
    La @ react-dom.production.min.js:5428
    On @ react-dom.production.min.js:1732
    ApiHandler.js:17 status: 403
    (anonymous) @ ApiHandler.js:17
    x @ runtime.js:63
    (anonymous) @ runtime.js:282
    e.(anonymous function) @ runtime.js:116
    r @ asyncToGenerator.js:3
    s @ asyncToGenerator.js:25
    Promise.then (async)
    r @ asyncToGenerator.js:13
    s @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    (anonymous) @ ApiHandler.js:9
    Promise.catch (async)
    de @ ApiHandler.js:54
    (anonymous) @ Actions.js:123
    (anonymous) @ index.js:8
    (anonymous) @ SolidLogin.jsx:91
    value @ SolidLogin.jsx:31
    (anonymous) @ react-dom.production.min.js:49
    d @ react-dom.production.min.js:69
    (anonymous) @ react-dom.production.min.js:73
    E @ react-dom.production.min.js:140
    C @ react-dom.production.min.js:168
    T @ react-dom.production.min.js:158
    N @ react-dom.production.min.js:232
    kn @ react-dom.production.min.js:1713
    Aa @ react-dom.production.min.js:5400
    De @ react-dom.production.min.js:660
    Cn @ react-dom.production.min.js:1755
    La @ react-dom.production.min.js:5428
    On @ react-dom.production.min.js:1732
    ApiHandler.js:29 errorMessage: <!doctype html>

No permission

No permission to access this resource

You are currently logged in as https://alain.bourgeoa.ga/profile/card#me, but do not have permission to access https://bourgeoa.solid.community/.

Log out

(anonymous) @ ApiHandler.js:29
x @ runtime.js:63
(anonymous) @ runtime.js:282
e.(anonymous function) @ runtime.js:116
r @ asyncToGenerator.js:3
s @ asyncToGenerator.js:25
Promise.then (async)
r @ asyncToGenerator.js:13
s @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
(anonymous) @ ApiHandler.js:9
Promise.catch (async)
de @ ApiHandler.js:54
(anonymous) @ Actions.js:123
(anonymous) @ index.js:8
(anonymous) @ SolidLogin.jsx:91
value @ SolidLogin.jsx:31
(anonymous) @ react-dom.production.min.js:49
d @ react-dom.production.min.js:69
(anonymous) @ react-dom.production.min.js:73
E @ react-dom.production.min.js:140
C @ react-dom.production.min.js:168
T @ react-dom.production.min.js:158
N @ react-dom.production.min.js:232
kn @ react-dom.production.min.js:1713
Aa @ react-dom.production.min.js:5400
De @ react-dom.production.min.js:660
Cn @ react-dom.production.min.js:1755
La @ react-dom.production.min.js:5428
On @ react-dom.production.min.js:1732
ApiHandler.js:30 error: [object Response]

Sorry, I don’t fully understand the problem and can’t fix it right away.

To sum the error up: As the displayed error states, you have logged in with https://alain.bourgeoa.ga/profile/card#me. Then you specify https://bourgeoa.solid.community/ as storage location, but when the app tries to GET it you receive an 401 - Unauthorized response.

So here are some thoughts from my side:
First of all, the most obvious reason for this would be, that your logged in account doesn’t have permissions to retrieve this folder. Do you have these permissions with other apps (e.g. the solid ide)? If no, what would you change in the current behavior of this app?

Do you mean, that you changed the storage location (pod), but did not login with the corresponding account prior to that? If yes, then login with the account for the pod first (I’ve updated [but not uploaded yet] the UI behavior a bit so this is more intuitive).

Are the issues you’ve described now resolved, @bourgeoa @kidehen ?

I would take a look if I can improve error notifications, else I would request it to be added to the solid-apps repository.

And thank you for helping to identify and fix issues :slight_smile: