Get Blob content as JSON object

Hi everyone,
I have a .json that i insert within my Pod. Now i need to get this file and insert the content within a variable/object to access the content of my original json, BUT Solid return me a Blob.

Have you some suggestion to get from this Blob the content of (original) json file uploaded?

Thanks

Not enough information on your code. In JavaScript there are specific methods for JSON like JSON.stringify() and JSON.parse()

when i retrieve file from Pod in Solid, this will be returned as a Blob component.

If you look at this code, it after get the file (the Blob) from the Pod, then save it locally with its extention. Look this code from

https://docs.inrupt.com/developer-tools/javascript/client-libraries/tutorial/read-write-files/

type or paste code here// ... import statement for authentication, which includes the fetch function, is omitted for brevity.

import { writeFile } from 'fs/promises';

import { getFile, isRawData, getContentType, getSourceUrl, } from "@inrupt/solid-client";


const MY_POD_URL = "https://example.com/mypod/";

const session = new Session();

// ... Various logic, including login logic, omitted for brevity.

if (session.info.isLoggedIn) {
  readFileFromPod(`${MY_POD_URL}mypics/pigeon.jpg`, session.fetch, './downloaded-pigeon.jpg');
}

// ...

// Read file from Pod and save to local file
async function readFileFromPod(fileURL, fetch, saveAsFilename) {
  try {

    const file = await getFile(

      fileURL,               // File in Pod to Read

      { fetch: fetch }       // fetch from authenticated session

    );


    console.log(`Fetched a ${getContentType(file)} file from ${getSourceUrl(file)}.`);
    console.log(`The file is ${isRawData(file) ? "not " : ""}a dataset.`);

    const arrayBuffer = await file.arrayBuffer();
    writeFile(saveAsFilename, new Uint8Array(arrayBuffer));

  } catch (err) {
    console.log(err);
  }
}

When i use the same code, it save the file not with the content of the file, but just “[object Object]” .

Doesn’t it work if you call writeFile(file) instead, i.e. skipping the arrayBuffer stuff?

Oh … strange. Using the code shown from the docs, I’m able to download and save the file content as a json. Will look into it further.

downloadjson-file

Oh … just to get more info – do you use the logic in the docs to save the json file to your Pod? If so, what mimetype are you using? Is it “application/json” ? (That’s the one I used to save).

// Read local file and save to targetURL
async function uploadFile(filepath, mimetype, targetURL, fetch) {
  try {
    const data = await readFile(filepath);
    writeFileToPod(data, mimetype, targetURL, fetch);
  } catch (err) {
    console.log(err);
  }
}

// Upload data as a file to the targetFileURL.
// If the targetFileURL exists, overwrite the file.
// If the targetFileURL does not exist, create the file at the location.
async function writeFileToPod(filedata, mimetype, targetFileURL, fetch) {
  try {
    const savedFile = await overwriteFile(  
      targetFileURL,                   // URL for the file.
      filedata,                        // Buffer containing file data
      { contentType: mimetype, fetch: fetch } // mimetype if known, fetch from the authenticated session
    );
    console.log(`File saved at ${getSourceUrl(savedFile)}`);
  } catch (error) {
    console.error(error);
  }
}

I managed to solve. Sorry for the delay in posting the answer.
This is the function (temporary) that I use to get the files from the pod as json.
PS: the file that I loaded on the pod is a * .json file *

async function readFileFromPod(resourceURL, session) {
  try {
    if (isFile(resourceURL)){
      const file = await getFile(
        resourceURL,               // File in Pod to Read
        { fetch: session.fetch }       // fetch from authenticated session
      );

      console.log(`Fetched a ${getContentType(file)} file from ${getSourceUrl(file)}.`);
      //console.log(`The file is ${isRawData(file) ? "not " : ""}a dataset.`);

      const arrayBuffer = await file.arrayBuffer();
      await writeFile('./utils/temp.json', new Uint8Array(arrayBuffer));

      var json = await readFile('./utils/temp.json', 'utf8');
      json = JSON.parse(json);

      return json;
    }
    else {
      console.log("The URL passed as argument seems to not be a file.")
      console.log("Try to pass a file as URL.")
    }
  } catch (err) {
    console.log(err);
  }
}

I save the file exactly as the code example from the Inrupt documentation that I inserted in the post. And then I’m going to read it using the “UTF8” option and then parsed on the file readed.

i ve tried a lot of combination of parameters , console.log(), and other stuff trying to get the .json within the pod as a json object, but just this configuration seems to work as well

to NOTE:
to get the correct result i have to use await as in the code here

Oh, that’s great @vincenzo-dip8 .
I also ran across the following in in Stackoverflow](javascript - File API - Blob to JSON - Stack Overflow)

JSON.parse(await blob.text());

As such, I tried it out after getting file from the Pod:

    const file = await getFile(fileURL, { fetch: fetch } );

    console.log( `Fetched a ${getContentType(file)} file from ${getSourceUrl(file)}.`);
    console.log(`The file is ${isRawData(file) ? "not " : ""}a dataset.`);
    
    const myfetchedjson = JSON.parse(await file.text());
    
    console.log("Print json object");
    console.log(myfetchedjson)
    console.log(myfetchedjson.foo); // This is a field in the json object.

Hope that can help with what you’re trying to do.

i ve tried also this solution but does not work for me.
And i can tell you more: i ve tried both uploading as .json file and as json object before calling the get the Blob and using

await blob.text()

Could you share some log?

Sure. the log posts:

Fetched a application/json file from https://pod.inrupt.com/docsteam/updatedFiles/foobar.json.
The file is not a dataset.
Print json object
{ foo: 'bar', test: 'upload and download' }
bar
File saved at https://pod.inrupt.com/docsteam/updatedFiles/foobar.json

So … my code to upload file to my Pod and then to retrieve is

function doTheThing(fetch) {

  uploadFile('./foo.json', "application/json", `${MY_POD_URL}/updatedFiles/foobar.json`, fetch);
  readFileFromPod(`${MY_POD_URL}/updatedFiles/foobar.json`, fetch, './downloaded-foobar.json');

}

// Read local file and upload to targetURL
async function uploadFile(filepath, mimetype, targetURL, fetch) {
  try {
    const data = await readFile(filepath);
    writeFileToPod(data, mimetype, targetURL, fetch);
  } catch (err) {
    console.log(err);
  }
}

// Upload data as a file to the targetFileURL.
// If the targetFileURL exists, overwrite the file.
// If the targetFileURL does not exist, create the file at the location.
async function writeFileToPod(filedata, mimetype, targetFileURL, fetch) {
  try {
    const savedFile = await overwriteFile(  
      targetFileURL,                   // URL for the file.
      filedata,                        // Buffer containing file data
      { contentType: mimetype, fetch: fetch } // mimetype if known, fetch from the authenticated session
    );
    console.log(`File saved at ${getSourceUrl(savedFile)}`);
  } catch (error) {
    console.error(error);
  }
}
// Read file from Pod and save to local file
async function readFileFromPod(fileURL, fetch, saveAsFilename) {
  try {

    const file = await getFile(fileURL, { fetch: fetch } );

    console.log(`Fetched a ${getContentType(file)} file from ${getSourceUrl(file)}.`);
    console.log(`The file is ${isRawData(file) ? "not " : ""}a dataset.`);
    
    const myfetchedjson = JSON.parse(await file.text());
    
    console.log("Print json object");
    console.log(myfetchedjson)
    console.log(myfetchedjson.foo);

    // const arrayBuffer = await file.arrayBuffer();
    // writeFile(saveAsFilename, arrayBuffer);
    // writeFile(saveAsFilename, new Uint8Array(arrayBuffer));

  }catch (err) {
    console.log(err);
  }
}
1 Like