File select input on click

use this to create your own customize file input box.

Online Demo

npm install customize-file-input

Requirements

import React, {useState, useEffect} from 'react'
import FileInput from 'customize-file-input'

function App() {
  const [files, setfiles]= useState([])
  console.log(files)
  return (
    <div>
      <FileInput getFiles={setfiles}/>
    </div>
  );
}

export default App;

properties :-

| name | isRequired | type | example | about |
| :---: | :---: | :---:| :---:| :---:|
| getFiles | required | function or setState | const [data, setData] = useState('') const or data = (files)=>{console.log(files)} | getFiles is a callBack function that returns files. | clickableView |not required | html_function() | clickableView=()={return html} | clickableView is a function in which html is sent, on which the file input of the clickable view is activated. | accept |not required | 'string' | accept = accept="image/*" | Accept tells what type of file you want to select. | | boxStyle |not required | style object | boxStyle = {{background:'red'}} | The input file box will be styled with BoxStyle. | | limit |not required | number | limit = {10}| set max file select limit| | viewUploadedFiles |not required | bool | viewUploadedFiles = {true} | If you want to preview the uploaded file then it can be true viewUploadedFiles| | loop |not required | bool | loop ={true} | You can put a loop if you want to play the uploaded video or audio over and over again. | | mediaBoxStyle |not required | style object | mediaBoxStyle = {{background:'red'}} |view uploaded media box style | | mediaStyle |not required | style object | mediaStyle = {{background:'red'}} | uploaded media files style| | videoAutoplay |not required | bool | videoAutoplay = {true} | autoPlay uploaded video files | | audioAutoplay |not required | bool | audioAutoplay = {true} | atoplay uploaded Audio files | | muteVideo |not required | bool | muteVideo = {true} |mute autoPlay video file | | muteAudio |not required | bool | muteAudio = {true} |mute autoPlay audio file| | boxClass |not required | string | boxClass = 'className' |uploaded files div class| | multiple |not required | bool | multiple = {true} |select multiple files|