customize-file-input
v1.0.0
Published
click on div or box to select media files
Downloads
13
Maintainers
Readme
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|