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

**URL:** <https://forum.solidproject.org/t/solid-ide-and-solid-file-client-now-do-uploads/1361>\
**Category:** General Discussion\
**Created:** [February 27, 2019, 9:12pm UTC](https://forum.solidproject.org/t/solid-ide-and-solid-file-client-now-do-uploads/1361 "2019-02-27T21:12:28Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeffz](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/jeffz/32/600_2.png) [@jeffz](https://forum.solidproject.org/u/jeffz)\
**Post date:** [February 27, 2019, 9:12pm UTC](https://forum.solidproject.org/t/solid-ide-and-solid-file-client-now-do-uploads/1361/1 "2019-02-27T21:12:28Z")

</div>

With many thanks to @A_A and @bourgeoa, I’m glad to announce that [Solid-IDE](https://jeff-zucker.github.io/solid-ide/) and [solid-file-client](https://github.com/jeff-zucker/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.

```auto
<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! 🙂

---

<div class="post-metadata">

**Author:** ![megoth](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/megoth/32/8_2.png) [@megoth](https://forum.solidproject.org/u/megoth)\
**Post date:** [February 27, 2019, 9:46pm UTC](https://forum.solidproject.org/t/solid-ide-and-solid-file-client-now-do-uploads/1361/2 "2019-02-27T21:46:45Z")

</div>

This is phenomenal work! 🙂

---

<div class="post-metadata">

**Author:** ![TheodoraPetkova](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/theodorapetkova/32/11_2.png) [@TheodoraPetkova](https://forum.solidproject.org/u/TheodoraPetkova)\
**Post date:** [February 28, 2019, 6:08am UTC](https://forum.solidproject.org/t/solid-ide-and-solid-file-client-now-do-uploads/1361/3 "2019-02-28T06:08:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![adventure](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/adventure/32/1152_2.png) [@adventure](https://forum.solidproject.org/u/adventure)\
**Post date:** [February 28, 2019, 2:11pm UTC](https://forum.solidproject.org/t/solid-ide-and-solid-file-client-now-do-uploads/1361/4 "2019-02-28T14:11:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![neilrae](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/neilrae/32/669_2.png) [@neilrae](https://forum.solidproject.org/u/neilrae)\
**Post date:** [February 28, 2019, 7:47pm UTC](https://forum.solidproject.org/t/solid-ide-and-solid-file-client-now-do-uploads/1361/5 "2019-02-28T19:47:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![neilrae](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/neilrae/32/669_2.png) [@neilrae](https://forum.solidproject.org/u/neilrae)\
**Post date:** [March 1, 2019, 10:21pm UTC](https://forum.solidproject.org/t/solid-ide-and-solid-file-client-now-do-uploads/1361/6 "2019-03-01T22:21:54Z")

</div>

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](https://domain/path/to/file/test.json)’, “{‘name’:‘Test’}”)  
.then( res=\> {  
console.log(res);  
}, err=\>{console.log("upload error : "+err)});

---

<div class="post-metadata">

**Author:** ![kidehen](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/kidehen/32/42_2.png) [@kidehen](https://forum.solidproject.org/u/kidehen)\
**Post date:** [March 3, 2019, 9:49pm UTC](https://forum.solidproject.org/t/solid-ide-and-solid-file-client-now-do-uploads/1361/7 "2019-03-03T21:49:44Z")

</div>

Great stuff!

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

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

1. Goto [Solside - a simple IDE and file manager for Solid Data Stores](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?

 ![40%20PM](https://europe1.discourse-cdn.com/flex017/uploads/solidproject/original/1X/93beb6c8a9673da3aa6d5bf2569a6dfd8068d3fb.png)

---

<div class="post-metadata">

**Author:** ![jeffz](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/jeffz/32/600_2.png) [@jeffz](https://forum.solidproject.org/u/jeffz)\
**Post date:** [March 4, 2019, 6:36pm UTC](https://forum.solidproject.org/t/solid-ide-and-solid-file-client-now-do-uploads/1361/8 "2019-03-04T18:36:40Z")

</div>

@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](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](https://github.com/jeff-zucker/solid-ide/issues/10). Thanks much for pointing these issues out.

---

<div class="post-metadata">

**Author:** ![Leoudayan](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/leoudayan/32/763_2.png) [@Leoudayan](https://forum.solidproject.org/u/Leoudayan)\
**Post date:** [September 17, 2019, 1:33pm UTC](https://forum.solidproject.org/t/solid-ide-and-solid-file-client-now-do-uploads/1361/9 "2019-09-17T13:33:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeffz](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/jeffz/32/600_2.png) [@jeffz](https://forum.solidproject.org/u/jeffz)\
**Post date:** [September 17, 2019, 3:33pm UTC](https://forum.solidproject.org/t/solid-ide-and-solid-file-client-now-do-uploads/1361/10 "2019-09-17T15:33:09Z")

</div>

If you are on the non-Solid server comand line, you can use [solid-shell](https://github.com/jeff-zucker/solid-shell) or [solid-file-client](https://github.com/jeff-zucker/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.

---

<div class="post-metadata">

**Author:** ![A\_A](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/a_a/32/786_2.png) [@A\_A](https://forum.solidproject.org/u/A_A)\
**Post date:** [September 17, 2019, 4:22pm UTC](https://forum.solidproject.org/t/solid-ide-and-solid-file-client-now-do-uploads/1361/11 "2019-09-17T16:22:58Z")

</div>

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):

```javascript
// 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.