Hello to all, welcome back to my blog. Today in this blog post, I am going to tell you, Reactjs Image Upload Validation.

---

Post Code Benefits, this post code will provide below things:

1. Multiple Image uploading.
2. Uploaded image will be validate.
3. Uploaded image can be delete.

---

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials

---

Friends now I proceed onwards and here is the working code snippet for Reactjs Image Upload Validation and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh reactjs setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

npx create-react-app reactimageupload

cd reactimageupload

npm start // run the project

 

2. Now we need to run below commands to get bootstrap(for good layout), antd(for datepicker and form) modules into our react js app:

npm install antd

npm install bootstrap --save

npm start

 

3. Now friends, after are done with commands, now please open reactimageupload/src/App.js file and add below code inside it:

import React, { useState } from 'react';

import './App.css';

//Bootstrap and jQuery libraries
import 'bootstrap/dist/css/bootstrap.min.css';


//Image upload modules
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

import "antd/dist/antd.css";

class App extends React.Component {

  
  render(){

    const Uploader = () => {
      const [fileList, updateFileList] = useState([]);
      const props = {
        fileList,
        beforeUpload: file => {
          //File Type Check
          if (file.type !== 'image/png') {
            message.error(`${file.name} is not a png file`);
          }
          return file.type === 'image/png';
        },
        onChange: info => {
          console.log(info.fileList);
          // file.status is empty when beforeUpload return false
          updateFileList(info.fileList.filter(file => !!file.status));
        },
      };
      return (
        <Upload {...props}>
          <Button icon={<UploadOutlined />}>Upload png only</Button>
        </Upload>
      );
    };


    return (
    <div className="MainDiv">
      <div className="jumbotron text-center">
          <h3>Therichpost.com<br>
         
      </div>
      
      <div className="container">
          
          <Uploader />
        </div>
      </div>
  );
}
}

export default App;

 

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding and live working must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will good or bad.

Jassa

Thanks