Session variable accessible inside Custom Component

Hello,

I have a file upload custom component which has to accept a file and send it to my server with an authentication header. The issue I’m having is that I need to access the access token from the session variable I’m saving to.

I found out that I need to create an action and pass variable to my component through an option parameter. But when I try to print the option variable inside my component, I’m getting undefined.

This is my action:

 const displayFileUpload = async () => {
    try {
        // Fetch options from session.options or build the list heren
            const options = [{ label: 'button1', value: 'value1' }]


        // Generate the payload with your options
        const payloads = await bp.cms.renderElement('file-upload', options, event)

        // Send the final payloads to the user
        await bp.events.replyToEvent(event, payloads)
    } 
    catch (error) {
      console.log(error)
  
      const payload = await bp.cms.renderElement('builtin_text', { text: 'Error ' }, event)
      await bp.events.replyToEvent(event, payload)
    }
  }
  
  return displayFileUpload()

This is my file upload component:

import React from 'react'
import { FilePond } from 'react-filepond';
import 'filepond/dist/filepond.min.css';

export class FileUpload extends React.Component {
  state = {
    uploaded: false
  }

  componentDidMount() {
    console.log('FileUpload was mounted')

    console.log(this.props.options)
  }

  render() {

    return (
      <div className="FileUpload">
        <p className="App-intro">
          _____  File D Picker  _____
            </p>
        <FilePond
          maxFiles={1}
          onupdatefiles={fileItems => {

            if (this.state.uploaded == false) {
              this.setState({
                uploaded: true
              });
              this.props.onSendData({ type: 'text', text: 'File Uploaded' })
            }
          }}
        />
      </div>
    )
  }
}
console.log(this.props.options) - this is undefined

Hi Macaret,

It seems that you are not sending an object in the options argument, but an array:

This would be the correct what to send it.

const payloads = await bp.cms.renderElement(‘file-upload’, { options }, event)

If this doesn`t work, please also send us your content-type file.

Hi @David_Vitora . I think you are right. The issue is from the content -ype, but I really don’t know what I’m doing.

Ultimately I want to pass an access token (available inside the flow as session variable) to a file upload component.

Action:

 const displayFileUpload = async () => {
  try {
      // Fetch options from session.options or build the list here
      const options = { 'accessToken':session.accessToken }

      // Generate the payload with your options
      const payloads = await bp.cms.renderElement('file-upload', options, event)

      // Send the final payloads to the user
      await bp.events.replyToEvent(event, payloads)
  } 
  catch (error) {
    console.log(error)

    const payload = await bp.cms.renderElement('builtin_text', { text: 'Error ' }, event)
    await bp.events.replyToEvent(event, payload)
  }
}

return displayFileUpload()

Content-Type

"use strict";

function render(data) {
  return [{
    type: 'custom',
    module: 'custom-component',
    component: 'FileUpload',
    options: data.options
  }];
}

function renderElement(data, channel) {
  if (channel === 'web' || channel === 'api') {
    return render(data);
  }

  return []; // TODO
}

module.exports = {
  id: 'file-upload',
  group: 'Custom Component',
  title: 'File Upload',
  jsonSchema: {
    description: 'File Upload',
    type: 'object',
    properties: {
      options: {
        type: 'object',
        title: 'Access token',
      }
    }
  },
  uiSchema: {},
  computePreviewText: formData => 'File Upload: ' + formData.text,
  renderElement: renderElement
};

I really appreciate any help with configuring the content-type.

Hasn’t anyone here in the community use a file upload functionality with botpress?

Hi Macaret,

You are on the right path, now you just need to access that options argument that will be available for your Custom Component.

Here is an example:

This custom component gets a “hidden” property from the backend.

Here is the content type for it: