# Upload a file on a solid pot and connecting to my pod

**URL:** <https://forum.solidproject.org/t/upload-a-file-on-a-solid-pot-and-connecting-to-my-pod/6491>\
**Category:** General Discussion\
**Created:** [April 7, 2023, 8:07am UTC](https://forum.solidproject.org/t/upload-a-file-on-a-solid-pot-and-connecting-to-my-pod/6491 "2023-04-07T08:07:45Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![lulu250100](https://avatars.discourse-cdn.com/v4/letter/l/35a633/32.png) [@lulu250100](https://forum.solidproject.org/u/lulu250100)\
**Post date:** [April 7, 2023, 8:07am UTC](https://forum.solidproject.org/t/upload-a-file-on-a-solid-pot-and-connecting-to-my-pod/6491/1 "2023-04-07T08:07:45Z")

</div>

Hello,

I’m trying since few weeks to upload a file on my pod.  
But i dont really understand how it works. First of all, when i try to connect on my pod i have this error :

| error | invalid\_request |
| --- | --- |
| error\_description | Mismatching redirect uri |

here is the code i use to upload file on my pod :

```auto
 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 overwriteFile("https:// ******.solidcommunity.net/public/", file, { contentType: "text/plain" , fetch: session.fetch});
        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");
    }
}

```

I’m a bit confused and stuck, someone know how i can upload a file on my pod ? And how can i acces my pod without having this issue ?

---

<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:** [April 7, 2023, 10:04am UTC](https://forum.solidproject.org/t/upload-a-file-on-a-solid-pot-and-connecting-to-my-pod/6491/2 "2023-04-07T10:04:58Z")

</div>

Hey there

The error seems related to the login process. Could you share the code for this? In particular, as the redirect url seems to cause troubles, what is the redirect url and the url of your application?

In general, following tutorial should cover the login process, so you could try to start with this and then modify it to your needs: [Authenticate (Browser) — Inrupt JavaScript Client Libraries](https://docs.inrupt.com/developer-tools/javascript/client-libraries/tutorial/authenticate-browser/)

---

<div class="post-metadata">

**Author:** ![Vincent](https://avatars.discourse-cdn.com/v4/letter/v/e9bcb4/32.png) [@Vincent](https://forum.solidproject.org/u/Vincent)\
**Post date:** [April 7, 2023, 10:33am UTC](https://forum.solidproject.org/t/upload-a-file-on-a-solid-pot-and-connecting-to-my-pod/6491/3 "2023-04-07T10:33:09Z")

</div>

The error indeed indicates something is wrong with auth, so I’d fix that first, but then after that, you’re also calling `overwriteFile` with a Container path (`https:// ******.solidcommunity.net/public/`), so you’re trying to overwrite that Container, which I think Pods reject. Instead, you’ll probably want to use [`saveFileInContainer`](https://docs.inrupt.com/developer-tools/api/javascript/solid-client/modules/resource_file.html#savefileincontainer).

---

<div class="post-metadata">

**Author:** ![lulu250100](https://avatars.discourse-cdn.com/v4/letter/l/35a633/32.png) [@lulu250100](https://forum.solidproject.org/u/lulu250100)\
**Post date:** [April 11, 2023, 7:15am UTC](https://forum.solidproject.org/t/upload-a-file-on-a-solid-pot-and-connecting-to-my-pod/6491/4 "2023-04-11T07:15:14Z")

</div>

there is no code for that, it’s when i want to go on my pod, when i’m connected. I just click on the link finishing by “#card” and i dont understand why but it give me this error. When i’m in private nav it does work

---

<div class="post-metadata">

**Author:** ![lulu250100](https://avatars.discourse-cdn.com/v4/letter/l/35a633/32.png) [@lulu250100](https://forum.solidproject.org/u/lulu250100)\
**Post date:** [April 11, 2023, 7:20am UTC](https://forum.solidproject.org/t/upload-a-file-on-a-solid-pot-and-connecting-to-my-pod/6491/5 "2023-04-11T07:20:58Z")

</div>

So i changed and used the function you gave me.

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/solidproject/original/2X/2/25f288b3312144cec8c58d247beb3b51cd26349a.png)

When i click on the link where my file is supposed to be i’ve this :  
 ![image](https://europe1.discourse-cdn.com/flex017/uploads/solidproject/original/2X/3/31d006f9b057dc4637cfe863eb279baf264e74b0.png)

The upload seems to work, but the name of the file isn’t the good one and the type of file too. I upload RDF file and got a TXT is that normal ?

![image](https://europe1.discourse-cdn.com/flex017/uploads/solidproject/original/2X/9/94f587600ea73cd3d59ee124002b3ff2bf38283c.png)

Here is my full javaScript code :

```auto

import {
    getSolidDataset,
    getThing,
    setThing,
    getStringNoLocale,
    setStringNoLocale,
    saveSolidDatasetAt, 
    overwriteFile,
    getSourceUrl,
    saveFileInContainer
} from "@inrupt/solid-client";
import { Session } from "@inrupt/solid-client-authn-browser";
import { VCARD } from "@inrupt/vocab-common-rdf";

// If your Pod is *not* on `solidcommunity.net`, change this to your identity provider.
const SOLID_IDENTITY_PROVIDER = "https://solidcommunity.net";
document.getElementById(
    "solid_identity_provider"
).innerHTML = `[<a target="_blank" href="${SOLID_IDENTITY_PROVIDER}">${SOLID_IDENTITY_PROVIDER}</a>]`;

const NOT_ENTERED_WEBID =
    "...not logged in yet - but enter any WebID to read from its profile...";

const session = new Session();

const buttonLogin = document.getElementById("btnLogin");
const writeForm = document.getElementById("writeForm");
const readForm = document.getElementById("readForm");
const uploadForm = document.getElementById("uploadForm");

// 1a. Start Login Process. Call session.login() function.
async function login() {
    if (!session.info.isLoggedIn) {
        await session.login({
            oidcIssuer: SOLID_IDENTITY_PROVIDER,
            clientName: "Inrupt tutorial client app",
            redirectUrl: window.location.href
        });
    }
}

// 1b. Login Redirect. Call session.handleIncomingRedirect() function.
// When redirected after login, finish the process by retrieving session information.
async function handleRedirectAfterLogin() {
    await session.handleIncomingRedirect(window.location.href);
    if (session.info.isLoggedIn) {
        // Update the page with the status.
        document.getElementById(
            "labelStatus"
        ).innerHTML = `Your session is logged in with the WebID [<a target="_blank" href="${session.info.webId}">${session.info.webId}</a>].`;
        document.getElementById("labelStatus").setAttribute("role", "alert");
        document.getElementById("webID").value = session.info.webId;
    }
}

// The example has the login redirect back to the index.html.
// This calls the function to process login information.
// If the function is called when not part of the login redirect, the function is a no-op.
handleRedirectAfterLogin();

// 2. Write to profile
async function writeProfile() {
    const name = document.getElementById("input_name").value;

    if (!session.info.isLoggedIn) {
        // You must be authenticated to write.
        document.getElementById(
            "labelWriteStatus"
        ).textContent = `...you can't write [${name}] until you first login!`;
        document.getElementById("labelWriteStatus").setAttribute("role", "alert");
        return;
    }
    const webID = session.info.webId;
    // The WebID can contain a hash fragment (e.g. `#me`) to refer to profile data
    // in the profile dataset. If we strip the hash, we get the URL of the full
    // dataset.
    const profileDocumentUrl = new URL(webID);
    profileDocumentUrl.hash = "";

    // To write to a profile, you must be authenticated. That is the role of the fetch
    // parameter in the following call.
    let myProfileDataset = await getSolidDataset(profileDocumentUrl.href, {
        fetch: session.fetch
    });

    // The profile data is a "Thing" in the profile dataset.
    let profile = getThing(myProfileDataset, webID);

    // Using the name provided in text field, update the name in your profile.
    // VCARD.fn object is a convenience object that includes the identifier string "http://www.w3.org/2006/vcard/ns#fn".
    // As an alternative, you can pass in the "http://www.w3.org/2006/vcard/ns#fn" string instead of VCARD.fn.
    profile = setStringNoLocale(profile, VCARD.fn, name);

    // Write back the profile to the dataset.
    myProfileDataset = setThing(myProfileDataset, profile);

    // Write back the dataset to your Pod.
    await saveSolidDatasetAt(profileDocumentUrl.href, myProfileDataset, {
        fetch: session.fetch
    });

    // Update the page with the retrieved values.
    document.getElementById(
        "labelWriteStatus"
    ).textContent = `Wrote [${name}] as name successfully!`;
    document.getElementById("labelWriteStatus").setAttribute("role", "alert");
    document.getElementById(
        "labelFN"
    ).textContent = `...click the 'Read Profile' button to to see what the name might be now...?!`;
}

// 3. Read profile
async function readProfile() {
    const webID = document.getElementById("webID").value;

    if (webID === NOT_ENTERED_WEBID) {
        document.getElementById(
            "labelFN"
        ).textContent = `Login first, or enter a WebID (any WebID!) to read from its profile`;
        return false;
    }

    try {
        new URL(webID);
    } catch (_) {
        document.getElementById(
            "labelFN"
        ).textContent = `Provided WebID [${webID}] is not a valid URL - please try again`;
        return false;
    }

    const profileDocumentUrl = new URL(webID);
    profileDocumentUrl.hash = "";

   
    // Profile is public data; i.e., you do not need to be logged in to read the data.
    // For illustrative purposes, shows both an authenticated and non-authenticated reads.

    let myDataset;
    try {
        if (session.info.isLoggedIn) {
            myDataset = await getSolidDataset(profileDocumentUrl.href, { fetch: session.fetch });
        } else {
            myDataset = await getSolidDataset(profileDocumentUrl.href);
        }
    } catch (error) {
        document.getElementById(
            "labelFN"
        ).textContent = `Entered value [${webID}] does not appear to be a WebID. Error: [${error}]`;
        return false;
    }

    const profile = getThing(myDataset, webID);

    const formattedName = getStringNoLocale(profile, VCARD.fn);

    // Update the page with the retrieved values.
    document.getElementById("labelFN").textContent = `[${formattedName}]`;
}

 // 4. Upload file
 async function uploadFile(event) {
    event.preventDefault();
    const fileInput = document.getElementById("fileInput");
    const file = fileInput.files[0];
    const url = `https://luciesorreau.solidcommunity.net/public/${file.name}`;
    try {
        const fileResponse = await saveFileInContainer("https://luciesorreau.solidcommunity.net/public/", file, { contentType: "text/plain" , fetch: session.fetch});
        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");
    }
}

buttonLogin.onclick = function () {
    login();
};

writeForm.addEventListener("submit", (event) => {
    event.preventDefault();
    writeProfile();
});

readForm.addEventListener("submit", (event) => {
    event.preventDefault();
    readProfile();
});

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

```

---

<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:** [April 11, 2023, 7:32am UTC](https://forum.solidproject.org/t/upload-a-file-on-a-solid-pot-and-connecting-to-my-pod/6491/6 "2023-04-11T07:32:30Z")

</div>

> [@lulu250100](#):
>
> The upload seems to work, but the name of the file isn’t the good one and the type of file too. I upload RDF file and got a TXT is that normal ?

Yes, currently you do not specify the file name and the content type should be text/turtle (text/plain is for txt). You can add the name suggestion (And it’s really only a suggestion, no guarantee that it gets this name) with the `slug` option and change the content type option to `contentType: 'text/turtle'`.

If you want to make sure it gets this name you’ll need to use the `overwriteFile` method as initially, but add the name to the url (`https://.../public/file.ttl`).

---

<div class="post-metadata">

**Author:** ![lulu250100](https://avatars.discourse-cdn.com/v4/letter/l/35a633/32.png) [@lulu250100](https://forum.solidproject.org/u/lulu250100)\
**Post date:** [April 11, 2023, 7:48am UTC](https://forum.solidproject.org/t/upload-a-file-on-a-solid-pot-and-connecting-to-my-pod/6491/7 "2023-04-11T07:48:11Z")

</div>

When you say that i have to use the `overwriteFile` method you mean after having upload the file with the `saveFileInContainer`? Or replace ?

---

<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:** [April 11, 2023, 7:49am UTC](https://forum.solidproject.org/t/upload-a-file-on-a-solid-pot-and-connecting-to-my-pod/6491/8 "2023-04-11T07:49:11Z")

</div>

Use either of them, `overwriteFile` _or_ `saveFileInContainer`. The `overwriteFile` with the url where the file should be created, the `saveFileInContainer` with the container url.

---

<div class="post-metadata">

**Author:** ![lulu250100](https://avatars.discourse-cdn.com/v4/letter/l/35a633/32.png) [@lulu250100](https://forum.solidproject.org/u/lulu250100)\
**Post date:** [April 11, 2023, 8:01am UTC](https://forum.solidproject.org/t/upload-a-file-on-a-solid-pot-and-connecting-to-my-pod/6491/9 "2023-04-11T08:01:44Z")

</div>

Thanks for your answer.

The idea of this project is first of all download the data you can have on sites like google, discord etc and then upload them to a pod and then develop :

- a graphical interface to deposit the files and to export the resulting data.
- a set of reels to read data from several departments and transform them into a common format.
- a data query and search service.

Do you have any advice or links that might help me develop this? Because to be honest I find that solid technology is quite difficult to take in hand…