How to add mime type in react js?

August 08, 2024

Hi Friends 👋,

Welcome To aHoisting!

To add mime type in react js, you can use accept=".png, .jpg, .jpeg, image/png, image/jpeg". It will add mime type in react js.

Today, I am going to show you, how to add mime type in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React, { useState } from 'react';

Step 3: Create a Component.

You can use accept=".png, .jpg, .jpeg, image/png, image/jpeg" to add mime type in react js.

<form onSubmit={handleSubmit}>
  <label>
    Upload a file (PNG, JPEG):
    <input
      type="file"
      accept=".png, .jpg, .jpeg, image/png, image/jpeg"
      onChange={handleFileChange}
    />
  </label>
      <button type="submit">Submit</button>
</form>

Add mime type example.

The below code is an example of a React. You have to import React and set accept=".png, .jpg, .jpeg, image/png, image/jpeg" to add mime type in react js.

App.js

import React, { useState } from 'react';

const App = () => {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (selectedFile) {
      console.log('File selected:', selectedFile);
      // Handle file upload
    } else {
      console.log('No file selected');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Upload a file (PNG, JPEG):
        <input
          type="file"
          accept=".png, .jpg, .jpeg, image/png, image/jpeg"
          onChange={handleFileChange}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default App;

In the above code example, I have used the accept=".png, .jpg, .jpeg, image/png, image/jpeg" to add mime type in react js.

Check the output of the above code.

All the best 👍