1.0.0 • Published 3 years ago
customize-file-input v1.0.0
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 |
1.0.0
3 years ago