otto-aa / solid-filemanager Goto Github PK

Renaming a folder will make it appear like a file.

When creating a new file via the "Create File" option, the app creates a file and opens it for editing. Creating works fine, yet the editor opens with weird content (instead of being empty).

Using an editor with syntax highlighting, usage of tabs, etc. would be more useful than the current textarea.

Drag & Drop would feel good for:

• Uploading files/folders
• Moving files/folders into other folders

Test on Android phone

Can you add to your app zip with acl and unzip with validity control for acl.

I took inspiration from your work to implement zip/unzip in solid-ide.
I improved the functions so as to zip with acl and unzip with validity control for acl

• zip with acl is done with the following

  const itemList = [
    ...folderData.files.map(item => [item.url, ...Object.values(item.links)]).flat(),
    ...folderData.folders.map(item => item.url),
    ...Object.entries(folderData.links).map(([type, item]) => item),
	  ]

• unzip with validity control, uses fc.rdf.query() to make the following controls :
  -- acl is a valid rdf turtle
  -- either webId or everybody has 'control'
  -- accessTo links to parent file or parentFolder

	// check for acl resource
      	if (!itemName.endsWith('.acl')) {
          await self.updateFile(path, itemName, blob, contentType) // path+'/'
      	} else {
      	// read .acl content as text and check acl content for Webid or public (authorization, Control, accessTo)
      	// groups are not checked for 'Control'
      	blob.text().then(async content => {
      	  this.aclErr = ''

      	  // check if webId has control (use of aclAgent() or aclControl())
      	  const webId = Object.fromEntries(new Map([[app.webId, '']]))
      	  self.aclControl(destination, relativePath, content, null, null , webId)
      	  .then( async res => {
      	    if(res === 'incorrect rdf') return self.acl = self.acl.concat([relativePath + ': ' + self.err])
      	    if (res === 'acl') return await self.updateFile(path, itemName, content, contentType).catch(err => self.err = err)
	    if (res === 'noAgent' || res === 'noControl') {
	      this.aclErr = 'no "Control" for webId or everybody'

	      // or check if everybody has control (use of aclAgent() or aclControl())
	      self.aclControl(destination, relativePath, content, null, { acl: 'accessTo' }, null)
	      .then( async res => {
	      if (res === 'acl') return await self.updateFile(path, itemName, content, contentType).catch(err => self.err = err)								
	      else { self.acl = self.acl.concat([relativePath + ' : ' + this.aclErr]) }
	      })
	    }
          })
          .catch(err => self.err = err)     

The controls uses an aclControl() function

this.aclControl = async (path, itemName, content, s, p ,o) => {
  try {
    // find acl block for an agent
    const aclControl = await fc.rdf.queryTurtle(path+itemName,content, s, { acl: 'mode'}, { acl : 'Control' }) //s, p, o)
    if(!aclControl.length) { return self.err = 'noControl' }

    await aclControl.map(async ({subject: item}) => {
    // check if agent has 'Control' (check if 'write' could be enough with atomic delete)
    const aclAgent = await fc.rdf.query(path+itemName, item, p, o) // { acl: 'mode'}, { acl : 'Control' })
    if(!aclAgent.length) { return self.err = 'noAgent' }
	
    // check if accessTo is correct
    obj = Object.fromEntries(new Map([[(path+itemName).split('.acl')[0], '']]))
    const aclAccessTo = await fc.rdf.query(path+itemName, item, { acl: 'accessTo' }, obj)
    if(!aclAccessTo.length) { self.acl = self.acl.concat([itemName + ' wrong accessTo resource']); return self.err = 'noAccessTo' }
    /* not used (not formally needed with NSS) : check for default and authorization
    // check for default for folder.acl
    if ((path+itemName).split('.acl')[0].endsWith('/')) {
    const aclDefault = await fc.rdf.query(path+itemName, item, { acl: 'default' }, obj)
    if(!aclDefault.length) { self.acl = self.acl.concat([itemName + ' folder should have acl:default'])} //; return self.err = 'noAuthorization' }
    }
			
    // check for authorization not a blocking error
    const aclAuthorization = await fc.rdf.query(path+itemName, item, null, { acl: 'Authorization' })
    if(!aclAuthorization.length) { self.acl = self.acl.concat([itemName + ' no acl:authorization'])} // ;       return self.err = 'noAuthorization' }
    */		
  })
  } catch( err) {
    self.err = err
    return 'incorrect rdf'
   }
   return 'acl' //self.updateFile(path, itemName, content, contentType).catch(err => self.err = err)
}

When trying to copy/move/rename a json file, the new file has the size 0B

I'm not sure if I used solid-filemanager with latest Firefox before but I just tried it and after clicking "Enter your pod" I get a popup "Error: the resource at https://thewebalyst.solid.community/ requires you to login" and no files are displayed. The same thing in Chrome works fine.

Looking in the Firefox console I see this:

Source map error: request failed with status 404
Resource URL: https://otto-aa.github.io/solid-filemanager/build/static/js/main.d5cd0f84.chunk.js
Source Map URL: main.d5cd0f84.chunk.js.map[Learn More]
Source map error: request failed with status 404
Resource URL: https://otto-aa.github.io/solid-filemanager/build/static/js/2.42dfee7f.chunk.js
Source Map URL: 2.42dfee7f.chunk.js.map[Learn More]
Failed to register/update a ServiceWorker for scope ‘https://otto-aa.github.io/solid-filemanager/build/’: Load failed with status 404 for script ‘https://otto-aa.github.io/solid-filemanager/build/service-worker.js’.
Request to access cookie or storage on “https://thewebalyst.solid.community/” was blocked because we are blocking all third-party storage access requests and content blocking is enabled. build
handleFetchError main.d5cd0f84.chunk.js:1:16326
url: https://thewebalyst.solid.community/ main.d5cd0f84.chunk.js:1:16443
status: 401 main.d5cd0f84.chunk.js:1:16480
errorMessage: <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Log in</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">
    <div class="pull-right">
      <button id="register" type="button" class="btn btn-primary">Register</button>
      <button id="login"    type="button" class="btn btn-success">Log in</button>
    </div>
    <h1>Log in to access this resource</h1>
  </div>

  <div class="alert alert-danger">
    <p>
      The resource you are trying to access
      (<code>https://thewebalyst.solid.community/</code>)
      requires you to log in.
    </p>
  </div>

</div>
</div>
<script src="/common/js/solid-auth-client.bundle.js"></script>
<script src="/common/js/auth-buttons.js"></script>
</body>
</html>
main.d5cd0f84.chunk.js:1:17148
error: [object Response] main.d5cd0f84.chunk.js:1:17190

In Chrome there are no messages in the browser console.

I tried disabling privacy related plugins in Firefox but didn't see any change.

When trying to move a folder, the folder got deleted, but not copied to the new location.

Copying big, non-text files only copied part of the file.

As described here the location of the webId and storage place aren't always the same. Therefore the storage location should be retrieved via the profile.

Using the edit function for a .txt file allows changing the text, but it couldn't be saved that way.

I filed a bug for solid-file-client which applies to your code as you also use folderUtils.js getStats().

See here: jeff-zucker/solid-file-client#30

BTW I'm finding solid-filemanager very useful for developing a fork of solid-auth-client which will work on both Solid and SAFE Network.

When starting the app it shows an error notification ("Error: Unknown error response from connector
"), likely because it already tries to fetch a folder despite being unable to do so.

@Otto-AA we have some issues opened on my fork which look like they may be general rather than specific to SAFE, so when you come back to this I suggest you grab any that you'd like to take up. @JPL1 is really helpful contributor!

See issues

The "Select files" input used for uploading files doesn't trigger the popup to choose files.

Hello @Otto-AA , I'm a young software engineer student that is interested in see how your code works. I would like you to ask you some things.

Maybe you are going to obviate this message but for trying I lose nothing. Well we were assigned to develop a web decentralised chat using the solid platform. The thing is that there is not that much documentation out there for us to learn to use Solid. Searching in google I found your "Solid file manager" repository and for a couple of hours I've been trying to understand how you code works and figure out how to translate it to what we need but with a really bad result. We have little JavaScript idea so even how "export" and "import" modules in js work is just a pain.

Our application is just much much easier that yours. We actually, just want to create folders for the chat conversations and then inside the files representing the conversation itself, so we are interested in how you create,delete and update this folders or files. Would you like to suggest us some tips or any help? For us would be like magic!
I have to apologise myself for even writing this,and as I said you are so free to delete this and jump over, we totally understand it, it's not your problem.
Thanks in advance so much for taking you time reading this
Regards:
Javi

Removing a folder with content is not working.

This would be useful for displaying files other than text and images.

Current Behavior

Currently the app is cached via a service worker, so the files only get loaded once and then remain the same. Loading a new version must be done manually (e.g. by a complete refresh). Also there's no way to find out the currently used version.

Expected behavior

The service worker should check for updates and display a notification if one is available. The user can then decided to update the app or stay with the old version.
There should be an info menu in which the user can view the version number and potentially update the app.

In combination with the editor, an option to create a new file in the current folder seems useful.

Hi,

This version works fine with Safari. But not working with google chrome. I am getting the following error message,

popup.html:24 TypeError: Cannot read property 'importKey' of undefined
at e.value (popup.html:24)
at Function.value (popup.html:24)
at Function.value (popup.html:24)
at popup.html:24
at Array.map ()
at Function.value (popup.html:24)
at popup.html:24
et @ popup.html:24
async function (async)
et @ popup.html:24
login @ popup.html:24
(anonymous) @ popup.html:24
async function (async)
(anonymous) @ popup.html:24
E @ popup.html:24

Adding an option to copy recursively copy a folder would be useful.

Solid recently had an update from legacy auth to the use of DPoP auth.

We noticed that your app still is using the old auth.

We'd like to encourage you to switch to the new auth using the Demonstrating Proof of Posession technology.

Our motivation for the update was using the standard OIDC-way.

• CSS is and will only use DPoP.
• For a transition period NSS is able to use both legacy and DPoP.
• SolidOS has been migrated and only uses DPoP.

Javascript libraries using the new authentication methods include :

• Inrupt's solid-client-authn-browser for the browser and solid-client-authn-node.
• and solid-node-client for nodejs.
• To obtain a token for nodejs app login, you will also need Inrupt's generate-oidc-token.

Some simple examples of javascript app using the DPoP auth can be found here

• https://github.com/0dataapp/hello/tree/main/solid.
• or https://github.com/jeff-zucker/solid-ide (simple migration).

The list of apps using the new DPoP authorization can be followed here dpop-status.

Just let us know if we can assist you on switching your app at https://gitter.im/solid/app-development or https://forum.solidproject.org

From solid team

Trying to install solid-plume, with solid-filemanager, it seems that some folder are unzip as Ressource/File instead of Container/Folder as described here happybeing/solid-plume#7 (comment)
Does anyone know why? Thxs

The Download button for files seems broken.

Proper error handling and notifications are necessary for a good user experience and also useful for bug reporting.

Hi,

I tried to login with the pod that was created with the 5.0.0 stable version. When i tried to login with that pod, it gave me authentication error. Wont it work with the latest version?

Instead of previewing the image, the data is displayed for editing