Buat seret dan lepas Imej dengan CSS dalam React

React ialah perpustakaan JavaScript yang popular untuk membina antara muka pengguna, dan fleksibiliti serta serba boleh menjadikannya pilihan yang bagus untuk membina aplikasi interaktif. Dalam tutorial ini, kami akan menunjukkan kepada anda cara membuat ciri seret dan lepas untuk imej menggunakan CSS sahaja dalam React.

Langkah 1 —

Untuk bermula, mari sediakan projek React. Anda boleh menggunakan sama ada Create React App atau mana-mana kaedah persediaan lain yang paling sesuai untuk anda. Mari buat aplikasi React menggunakan create-react-app.

npx create-react-app drag-and-drop

Langkah 2 —

Ganti App.js dan App.css dengan kod di bawah.

App.js

import './App.css';

function App() {
  return (
    <div classname="App">
      <h2 id="Select-Image">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;
}

Langkah 3 —

Sekarang buat fail baharu dan komponen ImageContainer.js dalam direktori src dan ambil div untuk bekas seret dan lepas.

ImageContainer.js

import React from 'react';

const ImageContainer = () => {

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

        </div>
    );
};

export default ImageContainer;

Kemudian buat fail CSS ImageContainer.css dalam direktori src dan tambahkan beberapa gaya dalam bekas imej.

ImageContainer.css

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

Langkah 4 —

Sekarang kita akan mengambil div dengan medan input dan tajuk teks input di dalam kelas .image-container dan menambah beberapa gaya dalam fail ImageContainer.css. Kami juga akan mengambil keadaan untuk URL imej dan fungsi onChage untuk keadaan kemas kini.

ImageContainer.js akan menjadi

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 akan menjadi

.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;
}

Langkah 5 —

Kini kami akan pratonton fail imej secara bersyarat. Jika anda telah menjatuhkan imej akan memaparkan imej dan atau menyebabkan kawasan seret dan lepas.

ImageContainer.js akan menjadi

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" alt="Buat seret dan lepas Imej dengan CSS dalam React" >



<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 id="Select-Image">Select Image:</h2>
      <div classname="image-area">
        <imagecontainer></imagecontainer>
      </div>
    </div>
  );
}

export default App;

Dalam tutorial ini, kami menunjukkan kepada anda cara membuat ciri drag-and-drop untuk imej hanya menggunakan CSS dalam React.