Unable to set dynamic acceptedFiles in react-dropzone-component

[Radhakrishanan]

I have a dropdown values image , audio and video.

How to set acceptedFiles dynamically

this.djsImageConfig = { acceptedFiles: "image/" , //,audio/,video/* }

render(){

 <DropzoneComponent
   config={config}
   />

}

[Radhakrishanan]

import React, { PureComponent } from 'react'; import { Row, Col, Container, Button, Form, Modal } from "react-bootstrap"; import DropzoneComponent from "react-dropzone-component";

class FileUploadControl extends PureComponent { constructor(props) { super(props)

    this.state = {
        fileType: ""
    }

    this.djsImageConfig = {
        addRemoveLinks: true,
        acceptedFiles: "image/*", //,audio/*,video/*
        autoProcessQueue: false,
        maxFiles: 1,
        maxFilesize: 10,
        uploadprogress: 100,
        uploadMultiple: false,
        dictDefaultMessage:
            "<img src='/assets/images/icons/file-upload.png' /> <span className='dropfiles'>Drag & drop or Browse Image</span>",
        maxfilesexceeded: function (file) {
            this.removeFile(file);
        },
        init: function () { },
    };

    this.componentImageConfig = {
        iconFiletypes: [".jpg", ".png"],
        showFiletypeIcon: false,
        postUrl: "no-url"
    };

}

componentDidMount() {
    this.setState({ fileType: this.props.fileType })
}

handleFileAdded(file) {

}

render() {
    const fileType = this.props.fileType;
    let config = this.djsImageConfig;
    this.djsImageConfig = null;
    if (fileType === "images") {
        config.acceptedFiles = "image/*"
        config.dictDefaultMessage = "<img src='/assets/images/icons/file-upload.png' /> <span className='dropfiles'>Drag & drop or Browse Image</span>";
    } else if (fileType === "videos") {
        config.acceptedFiles = "video/*"
        config.dictDefaultMessage = "<img src='/assets/images/icons/file-upload.png' /> <span className='dropfiles'>Drag & drop or Browse Video</span>";

    } else {
        config.acceptedFiles = "audio/*";
        config.dictDefaultMessage = "<img src='/assets/images/icons/file-upload.png' /> <span className='dropfiles'>Drag & drop or Browse Audio</span>";
    }

    this.djsImageConfig = config;

    const eventHandlers = {
        addedfile: this.handleFileAdded.bind(this)
    };

    return (
        <div className="file-upload-border">
            {
                fileType != "" &&

                <Row>
                    <Col sm={4}>
                        <DropzoneComponent
                            key={fileType + '1'}
                            config={this.componentImageConfig}
                            eventHandlers={eventHandlers}
                            djsConfig={this.djsImageConfig}
                        />
                    </Col>
                    <Col sm={4}>

                        <DropzoneComponent
                            key={fileType + '2'}
                            config={this.componentImageConfig}
                            eventHandlers={eventHandlers}
                            djsConfig={this.djsImageConfig}
                        />
                    </Col>
                    <Col sm={4}>
                        <DropzoneComponent
                            key={fileType + '3'}
                            config={this.componentImageConfig}
                            eventHandlers={eventHandlers}
                            djsConfig={this.djsImageConfig}
                        />
                    </Col>
                </Row>
            }
        </div>
    )
}

}

export default FileUploadControl;

[Radhakrishanan]

Simply add key={ } value to component to recreate in react js

I get the concept from stackoverflow below url

stackoverflow