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:


#2

This is phenomenal work! :slight_smile:


#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!


#4

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


#5

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


#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)});


#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 https://jeff-zucker.github.io/solid-ide/
  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?


#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.