How to use Image and Reveal Component to upload image and display it In C Program

Using Semantic Components like Button Input and Message

In this example we have used a file input component to take the image from the user and then reveal component to display the image in the reveal component by hovering over it

Example 2: Below is the implementation of the above approach.

Javascript

import React, { useState }
  from "react";
export const ImageExample = () => {
 
  const [img, setImg] =
    useState(null)
  const ImageUpload = (e) => {
    setImg(URL.createObjectURL(e.target.files[0]));
  }
  return (
    <div style={{
      display: "flex",
      justifyContent: "center", flexDirection: "column",
      alignItems: "center", margin: "auto", 
      padding: "auto"
    }}>
      <h2>
        Welcome to GFG Meteor Semantic example
      </h2>
      <div className="ui input focus">
        <input type="file"
          placeholder="Upload Image"
          onChange={ImageUpload} />
      </div>
      {img ?
        <div className="ui small circular 
          rotate reveal image">
 
          <img src=
{"https://cdn-icons-png.flaticon.com/512/3135/3135715.png"}
            className="visible content" style={{
              width: "100px",
              heigth: "100px"
            }} />
          <img src={img}
            className="hidden content" style={{
              width: "100px",
              heigth: "100px"
            }} />
        </div> : <></>}
 
    </div>
  )
}

To run the project type the following in the terminal:

meteor run

Output:

Output 2

Semantic UI Integrations for Meteor

Semantic UI integration for Meteor is a technique to use the Semantic frontend framework with Meteor. This enables us to use the prebuild component and styles of the Semantic UI in your Meteor projects. With this, you can take advantage of this frontend library to make amazing and responsive websites. Meteor is a full-stack technology that works with React, and Vue and comes with a prebuilt connection to the MongoDB database.