NFS Emulation issue

async function uploadPhoto(input, imageContent){
    
	let imageName = input.files[0].name;
	let mdHandle = await window.safeMutableData.newRandomPublic(localStorage['ContainerMDhandle'], 960817);
	let mdData = await window.safeMutableData.getNameAndTag(mdHandle);
	let mdNameToSave = mdData.name.buffer;

	//Insertion
	await window.safeMutableData.quickSetup(mdHandle, null);
    let nfsHandle = await window.safeMutableData.emulateAs(mdHandle, "NFS");
    let fileHandle = await window.safeNfs.create(nfsHandle, imageContent);
    await window.safeNfs.insert(nfsHandle, fileHandle, imageName);
    await window.safeNfs.free(nfsHandle);

    let mdHandle2 = await window.safeMutableData.newPublic(localStorage['ContainerMDhandle'], mdNameToSave, 960817);
    let nfsHandle2 = await window.safeMutableData.emulateAs(mdHandle2, "NFS");
    let fileHandle2 = await window.safeNfs.fetch(nfsHandle2, imageName);

    let fileContentHandle = await window.safeNfs.open(nfsHandle2, fileHandle2, 4);
    let data = await window.safeNfsFile.read(fileContentHandle, 0, 0);
    await console.log(data);

    let file = new File([data], imageName);
    let url = window.URL.createObjectURL(file);
    await console.log(file);
    await console.log(url);

    $("#productImage1").attr('src',url);

    console.log("done");
}

Hi I am using localhost to test my webpage in Peruse Browser. I am using the NFS emulation to store image. However, the result of the last second code which assign the source to the image tag, it shows as src=“blob:http://localhost/1fd427c7-2599-4349-95f6-c4514cc2aa36” .

The image doesn’t display…Is it suppose to be like that in localhost and it will be fine when I upload my webpage to the network or is it other problem?

2 Likes

Hi Jack,

Yes, this is also an issue when uploaded to network, mock or otherwise. I can’t quite remember why though.
Until I further research it, I’ve put together a simple example of how to inline the data as a base 64 encoding:

Try obtaining the raw image data from SAFE network, create a File object with it, then pass that file to fileReader.readAsDataURL(<File>).
I’ll try it out as well when I have time tomorrow.

3 Likes