imagekit-react icon indicating copy to clipboard operation
imagekit-react copied to clipboard

Please allow to forward references to the HTMLInputElement

Open kemicofa opened this issue 2 years ago • 1 comments

I would like to use my own custom button, however, it's currently not possible since the IKUpload component does not forward references to the underlying input element.

Please allow for references to be forwarded.

kemicofa avatar Mar 07 '22 13:03 kemicofa

The feature is barely usable as it is. Who is using the default button without using customisation for anything beside a demo app?

jeanpbond avatar Mar 18 '22 02:03 jeanpbond

Added in version 2.0.0.

const reftest = useRef(null);

const onError = (err) => {
  console.log('Error');
  console.log(err);
};

const onSuccess = (res) => {
  console.log('Success');
  console.log(res);
};

<IKContext
  publicKey="your_public_api_key"
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
  authenticationEndpoint="http://www.yourserver.com/auth"
>
  <IKUpload
    onError={onError}
    onSuccess={onSuccess}
    inputRef={reftest}
    style={{display: 'none'}} // hide default button
  />
  <h1>Custom Upload Button</h1>
  {reftest && <button className='custom-button-style' onClick={() => reftest.current.click()}>Upload</button>}
</IKContext>;

imagekitio avatar Sep 29 '22 09:09 imagekitio