Pnpjs: Pnp File upload

[ncmadhan1989]

Is pnp support file upload using blob or base64 format ??

[patrick-rodgers]

Yes.

[ncmadhan1989]

Can you share the sample

[koltyakov]

Yes.

[koltyakov]

[Troll mode off]

[ncmadhan1989]

I have tried with blob and array buffer ,but file is not uploaded as expected,only blank image get uploaded

my sample
var myblobfile= dataURIToBlob(datacol);
sp.web.getFolderByServerRelativeUrl("/sites/SPCapabilityTeam/MadhanNC/PnpLibrary/").files.add("Madhans.jpeg", myblobfile, true).then(output => {
});

function dataURIToBlob(dataURI) {
dataURI = dataURI.replace(/^data:/, '');
const type = dataURI.match(/image\/[^;]+/);
const base64 = dataURI.replace(/^[^,]+,/, '');
const arrayBuffer = new ArrayBuffer(base64.length);
const typedArray = new Uint8Array(arrayBuffer);
for (let i = 0; i < base64.length; i++) {
typedArray[i] = base64.charCodeAt(i);
}
return new Blob([arrayBuffer], {type});
}

[koltyakov]

Not sure that your base64 to blob conversion is not causing the issue. Last time I converted base64 to Blob or ArrayBuffer I used the following:

export const b64url = (base64: string, type: string = 'application/octet-stream'): string => {
  return `data:${type};base64,${base64}`;
};

export const b64ToArrayBuffer = (base64: string): ArrayBuffer => {
  const binaryString = atob(base64);
  const len = binaryString.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
};

export const b64ToBlob = (base64: string, type: string = 'application/octet-stream'): Blob => {
  const byteArray = Uint8Array.from(
    atob(base64)
      .split('')
      .map((char) => char.charCodeAt(0))
  );
  return new Blob([byteArray], { type });
};

[koltyakov]

There is also a cheater way:

export const b64toBlobPromise = (base64uri: string) =>
  fetch(base64uri).then((res) => res.blob());

[ncmadhan1989]

No luck brother,still the same issue :(

[ncmadhan1989]

Any Update??

[koltyakov]

I don't think there should be any update from our end, the issue is obviously on the end of decoding Base64 string. This is outside of the scopes of PnPjs. If the Blob or AffayBuffer are correct there should be no issues. I personally have hundreds of file upload cases with PnPjs in a browser and from Node.js.

[ncmadhan1989]

oh,but i tried with your code also(for converting),did u upload using AffayBuffer or blob??
from html element its working fine i.e(let myfile = (document.getElementById("newfile") as HTMLInputElement).files[0];
)

[koltyakov]

I prefer Blobs.

[ncmadhan1989]

K ,thanq for ur replies and response :)

[ncmadhan1989]

its working now,i missed replacing base64/image/jpeg with empty string,so it causes decoding problem,now its solved,thanks for your replies