[feature request] Allow labelIdle to be a component

[kino90]

Hello, thanks for this repo, it's really awesome.

I'm trying to use it in a project, but my template is a little different and I'd have to customize the labelIdle prop with something more than a static markup (e.g a custom <Button> component)

Is it possible? I didn't see anything in the docs..

👍

[rikschennink]

Hi, this is currently not possible, you can only set a label

[kino90]

Ok, I see. Will it be added sooner or later? shouldn't be a problem to accept a component OR a string 😉

[rikschennink]

Well, it's not a "native" React component so the React render loop stops at the FilePond init. So there's currently no way to "wrap" a React component.

[rikschennink]

That said, I am exploring ways to add it but that will probably not be anytime soon.

[kino90]

Oh, I see.. Thank you for your quick reply!

[romainbessugesmeusy]

Maybe we could use the ReactDOM.createPortal method to render the component if it is supplied as prop to the Filepond component.

[rikschennink]

@romainbessugesmeusy feel free to submit a PR

[multidest]

If it helps anyone stumbling on this. I solved this for myself by rendering the component as a string and setting that string as the label.

You should be able to do this using different frameworks or libraries. Here is an example in React.

import { renderToString } from 'react-dom/server';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar } from "@fortawesome/free-solid-svg-icons";

const ImagePicker: React.FC<_Props> = () => {
  const pond = useRef<FilePond | null>(null);

  function genLabel() {
    return renderToString(
      <FontAwesomeIcon
        style={{
          height: "4em",
          width: "4em",
        }}
        className="event-image-picker-icon" icon={faStar} size="2x" />
    )
  }

return (

    <FilePond
      ref={ref => { pond.current = ref }}
      labelIdle={genLabel()}
      ...
      />

[thunderwin]

or just keep it simple. Just put a svg file there..

       <file-pond
  name="test"
  ref="pond"
  class="filepond"
  label-idle='<svg class="w-10 h-10 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14l9-5-9-5-9 5 9 5z"></path><path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path></svg>'
  v-bind:allow-multiple="multiple"
  accepted-file-types="image/jpeg, image/png"
  :server="server"
  @addfile="addFile"
  @processfiles="processfiles"
  v-bind:files="myFiles"
  v-on:init="handleFilePondInit"
/>

[oalexdoda]

Is this dead?