Error uploading file: TypeError: _solidClient.putFile is not a function

Build a Solid App Solid App Development FAQs
1

Hello,

i’m writting an app that allows the user to add files to a pod. I started with the tutorial given on Solid. But i don’t understand why i cant upload file.

here is the error i get :
Error uploading file: TypeError: _solidClient.putFile is not a function

i just copied and past all the tutorial code (Getting Started · Solid) and added this function to javascript :

 // 4. Upload file
 async function uploadFile(event) {
    event.preventDefault();
    const fileInput = document.getElementById("fileInput");
    const file = fileInput.files[0];
    const url = `${session.info.webId}/public/${file.name}`;
    try {
        const fileResponse = await putFile(url, file, { contentType: file.type });
        document.getElementById(
            "labelUploadStatus"
        ).innerHTML = `File uploaded successfully at <a href="${url}" target="_blank">${url}</a>`;
        document.getElementById("labelUploadStatus").setAttribute("role", "alert");
    } catch (error) {
        console.log(`Error uploading file: ${error}`);
        document.getElementById(
            "labelUploadStatus"
        ).innerHTML = `Error uploading file: ${error}`;
        document.getElementById("labelUploadStatus").setAttribute("role", "alert");
    }
}
...

uploadForm.addEventListener("submit", (event) => {
    event.preventDefault();
    uploadFile(event);
});

If someone can explain me why it doesnt work and how i can correct it. And maybe if you have some link to help me, because the second steps of my project is to develop a way to explore those data and order it.

2

Which tutorial are you following, and what library are you using? Someone familiar with those might be able to help, but then they have to know that that is what you use :slight_smile:

3

i’ve used this tutorial : Getting Started · Solid

4

Hmm OK. The code snippet you pasted references putFile, but I can’t find that on the page you linked. Where did it come from?

5

i used import { putFile } from “@inrupt/solid-client”; and i’ve seen that we can use that her : solid-file-client/SolidApi.js at master · jeff-zucker/solid-file-client · GitHub

I also asked “chatGPT” if this function exist and it’s in inrupt lib :
This code imports several functions from the @inrupt/solid-client library, which is a package in the Solid React SDK for accessing and manipulating Solid data:

  • getSolidDataset: retrieves a Solid dataset from a given URL
  • getThing: retrieves a resource description as a Thing object from a Solid dataset
  • setThing: sets a Thing object as the description of a resource in a Solid dataset
  • getStringNoLocale: retrieves the value of a property in a Thing object as a string without a language tag
  • setStringNoLocale: sets the value of a property in a Thing object as a string without a language tag
  • saveSolidDatasetAt: saves a Solid dataset to a given URL
  • putFile: uploads a file to a Solid Pod at a given URL

These functions can be used to create Solid apps that interact with the Solid ecosystem. Make sure you have installed the @inrupt/solid-client package and added it as a dependency to your project before using these functions.

But maybe i’ve missed something. I’m just trying to upload a file on a pod. If you have another function to upload it could be nice

6

I think you’re better off asking the inrupt documentation: Search - Inrupt JavaScript Client Libraries
=> not found

This is a different library, you would need to install it separately.

Here’s a tutorial on how to write files with inrutps solid-client: Read/Write Files (Non-RDF Resources) — Inrupt JavaScript Client Libraries

7

That links goes to a library called solid-file-client, which is different from @inrupt/solid-client (yes the naming is confusing). ChatGPT doesn’t actually know things, it just generates convincing language, so please do not take that for gospel.

3 Likes
8

i dont really find a lot of info and documentation about solid and how to use it.
But i just found this :
https://docs.inrupt.com/developer-tools/javascript/client-libraries/tutorial/read-write-files/#write-a-file-to-a-specific-url

so in my code i just have to replace putFile with the function overwriteFile() ?

9

Inrupt JavaScript Client Libraries — Inrupt JavaScript Client Libraries is generally the best reference for using those libraries, yes. I expect that you’ll need to make some additional modifications, but I suggest just giving it a shot and see where to go from there. The main thing you’ll need, just like in the rest of the initial tutorial you followed, is to pass in your session’s fetch function.

In case it’s useful, you can also look at actual code used in the Penny app (although that uses saveFileInContainer).

10

There is an example app to upload a file in a pod using solid–file-client GitHub - jeff-zucker/solid-file-client: A Javascript library for creating and managing files and folders in Solid data stores

11

I am definitely going to quote you on that. I think the Turing test needs to be revised. All it tests is whether machines make convincing liars.

12

i dont really find a lot of info and documentation about solid and how to use it.
But i just found this :
https://docs.inrupt.com/developer-tools/javascript/client-libraries/tutorial/read-write-files/#write-a-file-to-a-specific-url

so in my code i just have to replace putFile with the function overwriteFile() ?

I think you have found the right documentation page. If your intent is to write a non-RDF file (like a text document, a picture) at a given IRI in your Solid Pod, then overWriteFile from @inrupt/solid-client should do what you need. Note that you’ll most likely need to pass in an authenticated session (as described in the doc page you linked to), unless the place you’re writing to allows public write.