Uncaught (in promise) TypeError: Object prototype may only be an Object or null: undefined

1

On the front-end I use React.
I want to upload a file to a solid container.
I took this code as an example.

The difference is that I use solid-auth-fetcher for authorization. The code looks like this

const auth = require('solid-auth-cli')
const fc = new SolidFileClient(auth)
await fc.copyFile("file:///home/m0nte-cr1st0/fasf.jpg", "https://dimadmytruk23.inrupt.net/fasf.jpg" )

The user is already logged in at the time of the file upload.

However, I am getting the following error.

polyfills.js:139 Uncaught (in promise) TypeError: Object prototype may only be an Object or null: undefined
    at Function.setPrototypeOf (<anonymous>)
    at polyfills.js:139
    at patch (polyfills.js:141)
    at patch (graceful-fs.js:104)
    at Object.<anonymous> (graceful-fs.js:96)
    at Object../node_modules/graceful-fs/graceful-fs.js (graceful-fs.js:373)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:150)
    at Object../node_modules/solid-rest/node_modules/fs-extra/lib/fs/index.js (index.js:5)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:150)
    at Object../node_modules/solid-rest/node_modules/fs-extra/lib/index.js (index.js:5)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:150)
    at Object.<anonymous> (file.js:4)
    at Object../node_modules/solid-rest/src/file.js (file.js:214)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:150)
    at setRestHandlers (index.js:10)
    at Object.fetch (index.js:33)
    at SolidFileClient.fetch (SolidApi.js:140)
    at SolidFileClient.get (SolidApi.js:155)
    at SolidFileClient.copyFile (SolidApi.js:515)
    at Transcription.tsx:53

The file is there. The path is correct.

2

Hi Dmitry, as its author, @jeffz will know most about solid-file-client, but I’m quite sure that you’re unable to refer to local files (e.g. file://...) from scripts running in the browser, which I’m assuming is the case for you judging by your use of React?

4

Hi @Vincent . Thnx for answer.

I also have a base64 blob of this file.

5

TL;DR If you want to upload file using a browser app, you need to do it using one of the browser app auth packages and a file-upload input field. Here is a working example of uploading from local file to remote pod from a browser with solid-file-client.

Longer answer : Solid-File-Client is browser agnostic - it can run either inside a browser or on the command line but takes different auth libraries for the two usages. In the browser you may use any of solid-client-authn-browser, solid-auth-fetcher, or solid-auth-client. Outside the browser your auth should be solid-node-client (or now deprecated solid-auth-cli) or, if you don’t need to access file:/// URLs solid-client-authn-node.

Out of all those auth libraries, only solid-node-client and solid-auth-cli can work with file:// URLs and those auth packages only work outside a browser. I have a library that works with the browser’s Native File API but that only works on files in a browser sandbox that can’t be accessed outside the browser. AFAIK, there is no way to directly access a file:// URL from a browser other than possibly browser extensions.

6

Thank @jeffz . You have a really great library for working with files.

As I said, I use solid-auth-fetcher for authorization.
I managed to merge these two libraries.

const auth = require('solid-auth-fetcher')
const fc = new SolidFileClient(auth)

As I said above, I have a base64 string of an image. I successfully load it using the createFile method.

But I have problems with displaying data. I read them from a folder using the readFolder method. The data comes in the form of links. They are correct, there are images. But when I try to insert them into my website page in the img tag, I get an 401 error (user already logged in).

z6Cvanl6Pk.jpeg:1 GET https://dimadmytruk23.inrupt.net/screenshots/z6Cvanl6Pk.jpeg 401 (Unauthenticated)

7

A 401 error on a GET means that the user is unauthenticated to read the resource. If you want the resource to be readable by anyone, you need to set sharing on the resource to either Write or Append+Read - if the resource is only set to Append (for example in the /inbox/), that does not provide Read access.