1.0.4 • Published 4 years ago

file-uploader-react-basics v1.0.4

Weekly downloads
8
License
ISC
Repository
github
Last release
4 years ago

File Uploader Component

Project for File Uploader Component in react

Installation

npm install --save file-uploader-react-basics

How To Use

1 Step :- Adding a Bootstrap 4.4.1

  • Add below link in :- public/index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

OR

  • import "bootstrap.min.css" in root component of your project,
    import "file-uploader-react-basics/assets/bootstrap.min.css";

2 Step :- First import this component where you want to use it. Then import the stylesheet for the component.

import "file-uploader-react-basics/assets/bootstrap.min.css"; // only if bootstrap CDN is not imported in public/index.html
import "file-uploader-react-basics/src/app.css";
import FileUploader from "file-uploader-react-basics";

Then just renders it

<FileUploader onSelectFile= { function to get selected file }/>

Props

PropDescriptionDefault valueRequired
onSelectFilefunction() to get the selected filereturn Object { name: element name, value: file}required
sizeErrorMsguser can add Custome errormax size is \${maxSize} KBnot required
meassage for file size validation
extErrorMsguser can add Custome error"Choose a file with correct extension"not required
meassage for file extension
fileTypeuser can add array of file typesEmpty Array []not required
maxSizeuser can add maximum size for thenot required
selected file in KB0 KB

Example

import "file-uploader-react-basics/assets/bootstrap.min.css";
import "file-uploader-react-basics/src/app.css";
import FileUploader from "file-uploader-react-basics";

function App() {
const onSelectFile = e => {
console.log("selected file", e);
};
return (

<div className="App">

 <FileUploader
    name="image"
    onSelectFile={onSelectFile}
    sizeErrorMsg="Selected file should be in size less than 1 KB "
    fileType={["xls", "pdf", "doc"]} // array of files extensions
    extErrorMsg="Selected file should be of type xls, pdf and doc "
    maxSize={1} //size in KB
    />
 </div>
);
}

export default App;