React? ??? ????? ??? ?? ???? JavaScript ???????, ???? ????? ?? ??? ?????? ??? ??? ?????. ? ??????? React?? CSS?? ???? ???? ?? ??? ? ?? ??? ??? ??? ?? ??????.

1?? —

????? React ????? ??? ?????. Create React App ?? ???? ?? ??? ?? ?? ??? ??? ? ????. create-react-app? ???? React ??????? ??? ?????.

npx create-react-app drag-and-drop

2?? —

App.js? App.css? ?? ??? ?????.

App.js

import './App.css';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area">

      </div>
    </div>
  );
}

export default App;

App.css

.App {
  text-align: center;
  width: 100vw;
  height: 100vh;

}

.heading {
  font-size: 32px;
  font-weight: 500;
}

3?? —

?? src ????? ? ??? ?? ?? ImageContainer.js? ??? ??? ? ?? ????? div? ?????.

ImageContainer.js

import React from 'react';

const ImageContainer = () => {

    return (
        <div className="image-container">

        </div>
    );
};

export default ImageContainer;

?? ?? src ????? ImageContainer.css CSS ??? ??? ??? ????? ? ?? ???? ?????.

ImageContainer.css

.image-container {
    width: 60%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(0, 0, 0, .3);
}

4?? —

?? .image-container ??? ??? ?? ??? ?? ??? ??? ?? div? ??? ImageContainer.css ??? ?? ???? ???????. ?? ??? URL? ?? ??? ???? ??? ?? onChage ??? ?????.

ImageContainer.js?

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
    const [url, setUrl] = React.useState('');

    const onChange = (e) => {
        const files = e.target.files;
        files.length > 0 && setUrl(URL.createObjectURL(files[0]));
    };

    return (
        <div className="image-container">
            <div className="upload-container">
                <input
                    type="file"
                    className="input-file"
                    accept=".png, .jpg, .jpeg"
                    onChange={onChange}
                />
                <p>Drag & Drop here</p>
                <p>or</p>
                <p>Click</p>
            </div>
        </div>
    );
};

export default ImageContainer;

ImageContainer.css?

.image-container {
    width: 60%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(0, 0, 0, .3);
}

.upload-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.upload-container>p {
    font-size: 18px;
    margin: 4px;
    font-weight: 500;
}

.input-file {
    display: block;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}

5?? —

?? ???? ??? ??? ?? ?????. ???? ??? ???? ?????? ??? ? ?? ??? ??????.

ImageContainer.js?

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
    const [url, setUrl] = React.useState('');

    const onChange = (e) => {
        const files = e.target.files;
        files.length > 0 && setUrl(URL.createObjectURL(files[0]));
    };

    return (
        <div className="image-container">
            {
                url ?
                    <img
                        className='image-view'
                       >



<h2>
  
  
  Step 6 —
</h2>

<p>Now we will import the ImageContainer component in our App.js and run our application using the npm start command and have fun while coding.</p>

<p><strong>App.js will be</strong><br>
</p>

<pre class="brush:php;toolbar:false">import './App.css';
import ImageContainer from './ImageContainer';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area">
        <ImageContainer />
      </div>
    </div>
  );
}

export default App;

? ??????? React?? CSS?? ???? ???? ?? ??? ? ?? ??? ??? ??? ???????.

? ??? React?? CSS? ???? ??? ??? ? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!