Faire glisser et déposer une image avec CSS dans React

React est une bibliothèque JavaScript populaire pour la création d'interfaces utilisateur, et sa flexibilité et sa polyvalence en font un excellent choix pour créer des applications interactives. Dans ce tutoriel, nous allons vous montrer comment créer une fonctionnalité glisser-déposer pour les images en utilisant uniquement CSS dans React.

Étape 1 —

Pour commencer, mettons en place un projet React. Vous pouvez utiliser Create React App ou toute autre méthode de configuration qui vous convient le mieux. Créons une application React en utilisant create-react-app.

npx create-react-app drag-and-drop

Étape 2 —

Remplacez App.js et App.css par le code ci-dessous.

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

Étape 3 —

Créez maintenant un nouveau fichier et composant ImageContainer.js dans le répertoire src et prenez un div pour le conteneur glisser-déposer.

ImageContainer.js

import React from 'react';

const ImageContainer = () => {

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

        </div>
    );
};

export default ImageContainer;

Créez ensuite un fichier CSS ImageContainer.css dans le répertoire src et ajoutez quelques styles dans le conteneur d'images.

ImageContainer.css

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

Étape 4 —

Maintenant, nous allons prendre un div avec un champ de saisie et un titre de texte de saisie dans la classe .image-container et ajouter du style dans le fichier ImageContainer.css. Nous prendrons également un état pour l'URL de l'image et une fonction onChage pour l'état de mise à jour.

ImageContainer.js sera

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 sera

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

Étape 5 —

Nous allons maintenant prévisualiser le fichier image de manière conditionnelle. Si vous avez déposé une image, l'image sera rendue et/ou la zone de glisser-déposer sera rendue.

ImageContainer.js sera

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="Faire glisser et déposer une image avec CSS dans 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;

Dans ce tutoriel, nous vous avons montré comment créer une fonctionnalité glisser-déposer pour les images en utilisant uniquement CSS dans React.