Solid-IDE and Solid-file-client now do uploads

1

With many thanks to @A_A and @bourgeoa, I’m glad to announce that Solid-IDE and solid-file-client now support file uploads (including binary files like *.mp3, *.png) and selecting multiple files at a time.

With Solid-IDE, select the green folder icon next to the name of the folder to hold the uploads, then select “Choose Files”.

With solid-file-client in a node.js script, simply call the upload() method (see the README for details).

With solid-file-client in a browser script you can can upload using the updateFile() method. Here’s a complete working example.

<script
    src="https://cdn.jsdelivr.net/npm/solid-file-client/dist/browser/solid-file-client.bundle.js">
</script>
<style>
input[type="file"] {
    background-color:#c0c0c0 !important;
}
</style>
<input id="targetFolder" placeholder="folder to hold uploads"><br>
<input type="file" id="fileArea" multiple>
<input type="button" value="upload" onclick="javascript:upload()">

<script>
function upload() {
    SolidFileClient.popupLogin().then( ()=>{
        const folder = document.getElementById('targetFolder').value;
        const fileInput = document.getElementById('fileArea');
        const files = fileInput.files;
        for(var i=0;i<files.length;i++){
            var URI = folder + files[i].name;
            var content = files[i];
            SolidFileClient.updateFile(URI, content).then( res=> {
                console.log(res);
            }, err=>{console.log("upload error : "+err)});
        }
    }, err=>{console.log("login error : "+err)});
}
</script>

P.S. @TheodoraPetkova - at last! :slight_smile:

10 Likes
2

This is phenomenal work! :slight_smile:

2 Likes
3

Wow. Wonderful. First thanks for the ping! And next, gratitude for the effort you put for us, the code-illiterate :slight_smile: Looking forward to work with this :slight_smile: Yay!

3 Likes
4

That is awesome Jeff. Nice work! Will use this for sure.

1 Like
5

Looks really good - nice and simple - looking forwards to giving it a try

1 Like
6

Jeff, that was very nice - the following worked a treat in my demo app - just need to write a form to show how to submit user submitted content:

SolidFileClient.updateFile(‘https://domain/path/to/file/test.json’, “{‘name’:‘Test’}”)
.then( res=> {
console.log(res);
}, err=>{console.log("upload error : "+err)});

1 Like
7

Great stuff!

It would be nice if you also share a live example via a URI i.e., a click-and-experience demo :slight_smile:

Here’s what I am seeking, step-guide wise:

  1. Goto Solside - a simple IDE and file manager for Solid Data Stores
  2. Authenticate
  3. Upload files to Pod.

Following successful authentication and login, your app does a lookup against the WebID-Profile doc of the authenticated WebID (by way of URI dereference) and then determines associated storage preferences via objects of the following relations:

  1. ldp:inbox
  2. pim:storage

Here’s a screenshot of my current progress, based on the current system state.
BTW – should I be able to update via the IDE?

40%20PM
40%20PM1287×660 91.8 KB

8

@kidehen I’ve created an issue to remind myself to follow your excellent suggestion about ldp:inbox and pim:storage at https://github.com/jeff-zucker/solid-ide/issues/9. Yes, if you are logged in as the owner of a file, you should be able to edit and update the file with the “save edits” button. But you have discovered another problem – Solid-IDE lets you edit and save index.ttl if you go to it directly but if you go to it by default (as you have in your example, where you go to the folder address, omitting the index.ttl in the URL), then you do not see the file for editing, you see the LDP container file. So I’ve opened another issue to have Solid-IDE treat index.ttl the way it already treats index.html, allowing you to edit the index file that is called automatically by visiting a folder. See https://github.com/jeff-zucker/solid-ide/issues/10. Thanks much for pointing these issues out.

1 Like
9

Hi Jeff, thanks for this post.

Is it possible to do the opposite? lets say i want to upload a file from my solid POD to a normal server. I need a browser button which will let me to login and browse the SOLID POD stored files. It would be great if you could suggest ways to do this.

Mano

10

If you are on the non-Solid server comand line, you can use solid-shell or solid-file-client to download the file directly from an https:// URL on the pod to a file:// URL on the non-poid server. To do it from the web, I think you’d need a CGI on the non-pod server. Something like this: 1) read the file from the pod into a variable with something like solid-file-client.readFile 2) package the variable in a form 3) submit the form to the CGI on the non-pod server and let it retrieve the variable and store its contents as a file.

1 Like
11

For the copying part:
You need to somehow fetch the file from the POD and then post it to your server, right? If so, I’d suggest you to use solid-auth-client’s fetch. It should work for all kind of files (binary and text). Something like this (not tested):

// user is logged in
const url = prompt("please enter the url")
solidAuthClient.fetch(url)
  .then(response => response.blob())
  .then(blob => {
    // post it to your server with the blob as body
    fetch('https://yourserver.xyz/api/filename', {
      method: 'POST',
      body: blob
    })
  })

If you use the readFile method as suggested by @jeffz, make sure that it works for the kind of files you want to suppport. I’m not 100% sure if it works for binary and text files.

For the POD browsing part:
I am not aware of an easy way to add a button which lets the user select a file from its POD. Maybe there is something in the react SDK. If not, I would suggest you to tell the user to go the data browser (or the solid-filemanager) and copy the url of the file they want to your app. Implementing it yourself seems a bit overkill to me.

2 Likes