PickerInline && PickerDrop -- complain about missing container

We have a Nextjs application and are conditionally importing this library using next/dynamic and then some adding some inline checks to make sure the window is present before rendering the component that contains filestack-react. When we use the PickerInline or PickerDrop components we get a rendering error that says it can’t find container #xyz whereas the PickerOverlay works just fine. We’re gonna end up using the filestack-js package until this is fixed and you expose an onClose() event so we can manage our state.

I’ve attached a photo showing the issue.

[josualeonard]

Thank you @drewrwilson ! I create my own component to make PickerInLine works. Here’s how I do it, just in case anyone stumble upon the same issue:

FilestackPicker.js

/**
 * Filestack-react is having a bug on container id
 * this component here is for making it work
 */
import React, { useEffect } from 'react';
import { client as filestack } from 'filestack-react';

const usePicker = (_ref) => {
  const { apikey } = _ref;
  const _ref$pickerOptions = _ref.pickerOptions;
  const pickerOptions = _ref$pickerOptions === undefined ? {} : _ref$pickerOptions;
  const _ref$clientOptions = _ref.clientOptions;
  const clientOptions = _ref$clientOptions === undefined ? {} : _ref$clientOptions;
  const _ref$onSuccess = _ref.onSuccess;
  // eslint-disable-next-line no-console
  const onSuccess = _ref$onSuccess === undefined ? console.log : _ref$onSuccess;
  const _ref$onError = _ref.onError;
  // eslint-disable-next-line no-console
  const onError = _ref$onError === undefined ? console.error : _ref$onError;

  const _onError = (error) => {
    onError(error);
  };
  const _onSuccess = (result) => {
    onSuccess(result);
  };
  const rootId = 'asset-root';
  const containerId = 'asset-container';
  const picker = filestack.Filestack(apikey, clientOptions).picker({
    ...pickerOptions,
    rootId,
    container: `#${containerId}`,
    onUploadDone: _onSuccess
  });

  useEffect(() => {
    picker.open().then().catch(_onError);
    return () => {
      if (picker) {
        picker.close();
      }
    };
  }, []);
  return {
    containerId
  };
};

const FilestackPicker = (_ref) => {
  const {
    apikey,
    pickerOptions,
    clientOptions,
    onSuccess,
    onError
  } = _ref;

  const _usePicker = usePicker({
    apikey,
    pickerOptions: {
      ...pickerOptions,
      displayMode: filestack.PickerDisplayMode.inline
    },
    clientOptions,
    onSuccess,
    onError
  });
  const { containerId } = _usePicker;
  return <div id={containerId} style={{ height: '500px' }} data-testid="picker-inline" />;
};

export default FilestackPicker;

usage:

<FilestackPicker
  apikey={process.env.REACT_APP_FILESTACK_API_KEY}
  onSuccess={(result) => {
    if (result.filesUploaded.length > 0) {
      setAsset(result.filesUploaded[0]);
    }
  }}
/>

I hope it helps!

[soerenmuenster]

For anyone who is still facing this problem and doesn’t want to add their own picker, there is the option to simply define the container with an id in the picker options. Put a div around the picker element with the id defined in the options.

And now the most important thing to consider: Don’t use conditional rendering but add it via css in a ternary class. e.g. hidden if it should be hidden.

const options = { container: 'picker-container', }

<div id="picker-container" className={!open ? 'hidden' : 'block'}> <PickerDropPane pickerOptions={options} /> </div>