Version 3.13 not working

[y-yeah]

Version 3.13 used in localhost throws this error so many times when trying to run the following code, while version 3.11.2 works properly:

import * as filestack from 'filestack-js';
const client = filestack.init('apikey');
const picker = await client.picker(pickerOptions);

I'm using React + TypeScript with Chrome.

[maryfs]

Hi @y-yeah , please try version 3.14.0. Let me know.

[m1m1s1ku]

@maryfs

Reproduced with :

Version : 3.15.0

(the error don't block the picker, but shown in console on first open)

[kaeon]

I have the same (version 3.15.0) Uncaught (in promise) TypeError: r.sent(...) is not a constructor at e.

[utsavtiwary04]

Can confirm -- getting the same error on 3.1.0

[maryfs]

Ok, marked as bug and will fix it soon.

[thenderson55]

Please fix this - it is very annoying. v3.16

[MowiliMi]

Hey guys, I can't reproduce this bug, please send yours sample code and please check v3.17

[viperfx]

This error happens consistently when uploading multiple files.

[y-yeah]

@MowiliMi @maryfs 3.17.0 has the same issue.

Looks like there is a problem with tslib.

[MowiliMi]

@y-yeah please send your's pickerOptions, and sample implementations in react.

[kaeon]

@MowiliMi I have the issue in 3.17.0 with following pickerOptions: accept: (3) ["image/bmp", "image/jpeg", "image/png"] allowManualRetry: true container: "#filestackpicker" displayMode: "overlay" fromSources: ["local_file_system", "webcam", "googledrive", "onedriveforbusiness"] lang: "nl" maxFiles: 10 maxSize: 10485760 minFiles: 1 onFileUploadFailed: ƒ onFileUploadFailed(fileMetadata, error) onFileUploadFinished: ƒ onFileUploadFinished(fileMetadata) onUploadDone: undefined storeTo: {container: "**", location: "s3", path: "/****/**//", region: "**"} uploadInBackground: false

[maryfs]

Hi @Kaeon , here's my sample app code:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import ReactFilestack from 'filestack-react';

function App() {
  const options = {
    accept: ["image/bmp", "image/jpeg", "image/png"],
    allowManualRetry: true,
    displayMode: "overlay",
    fromSources: ["local_file_system", "webcam", "googledrive", "onedriveforbusiness"],
    lang: "nl",
    maxFiles: 10,
    maxSize: 10485760,
    minFiles: 1,
    uploadInBackground: false,
    maxFiles: 5,

};
  return (
    <div className="App">
     <ReactFilestack
    apikey='myApiKey'
    actionOptions={options}
    onSuccess={(res) => console.log(res)}
/>
    </div>
  );
}

export default App;

it uses by default, newest 3.17.0 js version, and react. Could you check if it works for you.. also please send me your sample app implementation in react.

[kaeon]

Hi @maryfs , I'm using custom Picker component, not react-filestack. I noticed now that the problem occurs only when I use the onFileUploadFinished property. Everything works but the console errors keep appearing.

const FsPicker = (props: FsPickerType) => {
  const { action, actionOptions, apiKey, buttonSize, buttonText, cropUrls, file, onError, onFileUploadFinished, onSuccess, security, source, type } = props;
  const { t } = useTranslation();

  const clientOptions = { security };
  const pickerOptions = {
    accept: ['image/bmp', 'image/jpeg', 'image/png'],
    allowManualRetry: true,
    container: '#filestackpicker',
    displayMode: PickerDisplayMode.overlay,
    fromSources: ['local_file_system', 'webcam', 'googledrive', 'onedriveforbusiness'], // TODOPHASE2 add onedrive (& dropbox) again as option and fix
    lang: 'nl',
    onFileUploadFinished,
    storeTo: {
      container: process.env.RAZZLE_S3BUCKET,
      location: 's3',
      path: '/',
      region: process.env.RAZZLE_S3REGION,
    },
    uploadInBackground: false,
  };
  const client = init(apiKey, clientOptions);
  const picker = client.picker({ ...pickerOptions });

  const completeAction = useCallback(() => {
    switch (action) {
      case 'crop':
        return picker.crop(cropUrls || []);
      case 'logout':
        return client.logout(actionOptions);
      case 'metadata':
        return client.metadata(source as string, actionOptions, security);
      case 'pick':
        return picker.open();
      case 'preview':
        return client.preview(source as string, actionOptions);
      case 'remove':
        return client.remove(source as string, security);
      case 'removeMetadata':
        return client.removeMetadata(source as string, security);
      case 'retrieve':
        return client.retrieve(source as string, actionOptions, security);
      case 'storeUrl':
        return client.storeURL(source as string, actionOptions, security);
      case 'transform':
        return new Promise((resolve, reject) => {
          try {
            resolve(client.transform(source, actionOptions));
          } catch (err) {
            reject(err);
          }
        });
      case 'upload':
        return client.upload(file, actionOptions);
      default:
        return picker.open();
    }
  }, [action, actionOptions, client, cropUrls, file, picker, security, source]);

  const onFail = useCallback(
    (error: any) => {
      if (typeof onError === 'function') {
        onError(error);
      } else if (error) console.error(error);
      else console.error('Filestack upload failed!');
    },
    [onError]
  );

  const onFinished = useCallback(
    (result: any) => {
      if (typeof onSuccess === 'function' && result) {
        onSuccess(result);
      }
    },
    [onSuccess]
  );

  useEffect(() => {
    if (type === 'immediate') {
      Promise.resolve(completeAction()).then(onFinished).catch(onFail);
    }
    () => {
      if (picker) picker.close();
    };
  }, [completeAction, onFail, onFinished, picker, type]);

  const onButtonClick = (event: any) => {
    event.stopPropagation();
    event.preventDefault();
    Promise.resolve(completeAction()).then(onFinished).catch(onFail);
  };

  if (type === 'button') {
    return (
      <Button onClick={onButtonClick} size={buttonSize}>
        {buttonText || t('button.selectpictures')}
      </Button>
    );
  }
  if (type === 'immediate') {
    return null;
  }
  return null;
};

<FsPicker
  type="button"
  maxFiles={maxPicturesForPortfolio}
  onFileUploadFinished={(fileMetadata: any) => {
    arrayHelpers.push({
      description: '',
      handle: fileMetadata.handle,
      tags: [],
    });
    validateForm();
  }}
  security={fsSecurity}
/>

[thenderson55]

3.18 still has the issue.

Incredibly annoying as it does it repeatedly when resizing making it extremely slow to check responsiveness.

[MowiliMi]

@thenderson55 @Kaeon please implements your's code with error on https://stackblitz.com/

[ColeWalker]

Still have this issue on 3.20

[pcholuj]

Hi, we will be working on that issue soon. I will post updates here

[ColeWalker-AgencySpotter]

Has this been solved?

[maryfs]

@ColeWalker we are not able to reproduce it, as @MowiliMi asked, please post a sample on https://stackblitz.com/ , otherwise we are stuck here. Use the newest version. Thanks.

[andrewmartin]

Really big bummer, this is occurring in my app right now. I wasted a bunch of time implementing against your API, only to find you have 3rd class support for the package. Bummer, you definitely lost my business.

[sshaw]

I see this happening randomly with 3.15. When the Amazon outage occurred in early December 2021 it was happening consistently. Seems as if the code is expecting the internal dependency to be loaded and it's not.

[sshaw]

I see this happening randomly with 3.15.

After installing Airbrake we see this error constantly!

[jaxomlotus]

whats the latest here? It's been 2 years and this is still not supported?

[yoyosan]

This project seems dead.