I have written the below mentioned code to upload an image into the React component with the help of bootstrap and I have two issues in it,

Problem:1) I wanted to give validations to allow only .png/.jpg images but even if i am uploading .jpg/.png image, I am getting the alert that "File does not support. You must use .png or .jpg" which is not supposed to be shown.

Problem:2) I wanted the user to upload the image and i made the component according to that. However, i want to give one dummy image to be shown in the div before even user is uploading the image. So, how exactly can i do that?

Any help regarding the same is highly appreciated....!

Code:

import React, { Component, useState } from "react";
import "./style.css";

const FinalModeling = () => {
  const [file, setFile] = useState(null);

  const fileChangedHandler = (event) => {
    let file = event.target.files[0];
    let reader = new FileReader();

    console.log(file);
    reader.onload = function (e) {
      setFile(e.target.result);
    };
    reader.readAsDataURL(event.target.files[0]);

    if (file != ".png" || file != ".jpg") {
      window.alert("File does not support. You must use .png or .jpg ");
      return false;
    }
    if (file.size > 10e6) {
      window.alert("Please upload a file smaller than 10 MB");
      return false;
    }
  };
  return (
    <div id="modeling">
      <div className="container">
        <div className="row">
          <div className="col">
            <div className="modeling-text">
            </div>
          </div>
        </div>
        <img
          src={"file"}
          alt={""}
          width="180"
          height="220"
          text-align="left"
          style={{ display: "block" }}
          class="img-thumbnail"
        />
        
      </div>
      <div class="input-group mt-1 offset-1">
                <div class="custom-file smaller-input">
                  <input
                    type="file"
                    className="custom-file-input"
                    name="file"
                    inputProps={{ accept: "image/*" }}
                    onChange={fileChangedHandler}
                    id="inputGroupFile01"
                  />
                  <label class="custom-file-label" for="inputGroupFile01">
                    Choose your image
                  </label>
                </div>
              </div>
    </div>
  );
};

export default FinalModeling;