Forum Discussion

jordanwallingsford's avatar
jordanwallingsford
Copper Contributor
May 11, 2022

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
                                        },
  • ge4's avatar
    ge4
    Copper Contributor

    Hi Jordan have you been able to resolve this issue. If so could you help out as i face similar issues.

Resources