customize-file-input

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

---