Multiple Instance of react-fine-uploader in same file is not working

[nisargrthakkar]

Define react-fine-uploader in common component and then use that common component 2 times in our react code base.

import React, { Component } from 'react';
import FineUploaderTraditional from 'fine-uploader-wrappers';
import Gallery from 'react-fine-uploader';
import PropTypes from 'prop-types';
const fileuploadApi = 'http://localhost:3000/api/fileupload';

const intAllowedExtensions = ['jpeg', 'jpg', 'gif', 'png', 'doc', 'docx', 'bmp', 'tif', 'pdf', 'xls', 'xlsx', 'odt'];
const intUploadFolderFlag = 0;
const initMultiple = false;
const intItemLimit = 1;
let uploader;

class UploadComponent extends Component {
  constructor(props) {
    super(props);
    const { allowedExtensions, uploadFolderFlag, multiple, itemLimit } = this.props;
    uploader = new FineUploaderTraditional({
      options: {
        debug: true,
        multiple: multiple || initMultiple,
        validation: {
          itemLimit: itemLimit || intItemLimit,
          allowedExtensions: allowedExtensions || intAllowedExtensions,
        },
        chunking: {
          enabled: true,
          mandatory: true,
        },
        concurrent: {
          enabled: true,
        },
        deleteFile: {
          enabled: true,
          endpoint: `${fileuploadApi}/uploads/${uploadFolderFlag}`,
        },
        request: {
          endpoint: `${fileuploadApi}/uploads`,
          params: {
            orderItem: 'orderItem',
            uploadFolderFlag: uploadFolderFlag || intUploadFolderFlag,
          },
        },
        formatFileName: () => {
          return { orderItem: 'newfileItem' };
        },
        retry: {
          enableAuto: true,
        },
      },
    });
  }

  static propTypes = {
    multiple: PropTypes.bool,
    uploadFolderFlag: PropTypes.number,
    itemLimit: PropTypes.number,
    onComplete: PropTypes.func,
    onDeleteComplete: PropTypes.func,
    onValidate: PropTypes.func,
    onError: PropTypes.func,
    allowedExtensions: PropTypes.array,
  };

  componentDidMount() {
    const { onComplete, onDeleteComplete, onValidate, onError } = this.props;
    uploader.on('complete', (id, name, response) =>onComplete(id, name, response));
    uploader.on('deleteComplete', (id, xhr, isError) => onDeleteComplete(id, xhr, isError));
    uploader.on('validate', data => onValidate(data));
    uploader.on('error', (id, name, errorReason, xhr) => onError(id, name, errorReason, xhr));
  }

  render() {
    return (
      <div>
        <Gallery dropzone-disabled="true uploader={uploader} />
      </div>
    );
  }
}

export default UploadComponent;

Use that in other files like follow

....
<Fileupload              
                uploadFolderFlag={2}
                name="salesCertificate"
                multiple={false}
                text="Browse1"
                itemLimit={1}
                onValidate={(data) => { }}
                onComplete={(_id, _name, response) => { }}
                onDeleteComplete={(id, xhr, isError) => { }}
                onError={(id, name, errorReason, xhr) => {   }}
/>
...
<Fileupload              
                uploadFolderFlag={2}
                name="salesCertificate"
                multiple={false}
                text="Browse1"
                itemLimit={1}
                onValidate={(data) => { }}
                onComplete={(_id, _name, response) => { }}
                onDeleteComplete={(id, xhr, isError) => { }}
                onError={(id, name, errorReason, xhr) => {   }}
/>
...

[rnicholus]

and...? what is the issue? why is this causing a problem?

[nisargrthakkar]

I think its don't understand between two different components. We try key, namespace, id, class but same things are happening

[rnicholus]

sorry, no idea what the problem is.

[nisargrthakkar]

Its still happening. I shared my code please check it.

when I upload file in one components then its uploaded on other components.