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

Prop	Description	Default value	Required
onSelectFile	function() to get the selected file	return Object { name: element name, value: file}	required
sizeErrorMsg	user can add Custome error	max size is ${maxSize} KB	not required
	meassage for file size validation
extErrorMsg	user can add Custome error	"Choose a file with correct extension"	not required
	meassage for file extension
fileType	user can add array of file types	Empty Array []	not required
maxSize	user can add maximum size for the		not required
	selected file in KB	0 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;