Forum Discussion
jordanwallingsford
May 11, 2022Copper Contributor
Webpart not rendering filePicked utliizing PnP FilePicker
Hello, I am using SPfx PnP FilePicker property control. When I check the Edge developer tools, I can see the image being saved to SPO, but the image does not render within the webpart. Is there anyway someone can see if I am implementing something wrongly?
Thank you!
public render(): React.ReactElement<ICallingCardsProps> {
const thumbRend = "https://media.akamai.odsp.cdn.office.net/uksouth1-mediap.svc.ms/transform/thumbnail?provider=url&inputFormat=jpg&docid=";
let arr = this.props.CallingCards || [];
if (this.props.CallingCards && this.props.CallingCards.length > 0) {
var contacts = arr.map(el =>
<div className={`${styles.tile}`}>
<div className={`${styles.galleryframe}`}>
<img className={`${styles.galleryimg}`} key={el} src={el.filePicker.fileNameWithoutExtension == '' ? el.filePicker.fileAbsoluteUrl : ''} />
<div key={el}>{el.Name}</div>
<div key={el}>{el.Email}</div>
<div key={el}>{el.PhoneNumber}</div>
</div>
</div>
)
} else {
return (
<div className={`${styles.welcome}`}>Use property pane to create new Contact Cards!</div>
)
}
return (
<body style={{ height: '225px' }}>
<div className={`${styles.grid}`}>
{contacts}
</div>
</body>
);
}
private async uploadFiles(fileContent, fileName, FolderPath) {
try {
if (fileContent.size <= 10485760) {
// small upload
let result = await this.sp.web.getFolderByServerRelativePath(FolderPath).files.addUsingPath(FolderPath, fileContent.type, { Overwrite: true });
console.log(result);
} else {
// large upload
let result = await this.sp.web.getFolderByServerRelativePath(FolderPath).files.addChunked(FolderPath, fileContent.type, data => {
console.log(`progress`);
}, true);
}
}
catch (err) {
// (error handling removed for simplicity)
return Promise.resolve(false);
}
}
{
id: "filePicker",
title: "Select File",
type: CustomCollectionFieldType.custom,
onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
return (
React.createElement(FilePicker, {
key: itemId,
context: this.context,
buttonLabel: "Select File",
onChange: async (filesPicked: IFilePickerResult[]) => {
for (const filePicked of filesPicked) {
const filePickedContent = await filePicked.downloadFileContent();
const folderPath = await filePicked.fileAbsoluteUrl
this.uploadFiles(filePickedContent, filePicked.fileName, folderPath);
console.log('onChange....', filesPicked)
}
},
onSave:
async (filesPicked: IFilePickerResult[]) => {
for (const filePicked of filesPicked) {
const filePickedContent = await filePicked.downloadFileContent();
const folderPath = await filePicked.fileAbsoluteUrl
this.uploadFiles(filePickedContent, filePicked.fileName, folderPath);
}
console.log('onSave....', filesPicked)
}
})
);
},
required: true
},
- ge4Copper Contributor
Hi Jordan have you been able to resolve this issue. If so could you help out as i face similar issues.