So implementieren Sie Bild-Drag-and-Drop in React

So implementieren Sie Bild-Drag-and-Drop in React nur mit CSS

React ist weithin für die Erstellung interaktiver Benutzeroberflächen bekannt. In diesem Tutorial führen wir Sie durch die Erstellung einer Drag-and-Drop-Funktion für Bilder in React nur mit CSS.

Schritt 1: Richten Sie Ihr Reaktionsprojekt ein

Beginnen Sie mit der Einrichtung Ihres React-Projekts. Für eine einfache Einrichtung können Sie die Create-React-App verwenden.

npx create-react-app drag-and-drop

Schritt 2: App.js und App.css aktualisieren

Ändern Sie als Nächstes die App.js-Datei, um einen Container für das Bild und eine Überschrift zu erstellen.

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;

Formatieren Sie die Seite in App.css:

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

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

Schritt 3: Erstellen Sie die ImageContainer-Komponente

Erstellen Sie eine neue Datei ImageContainer.js und definieren Sie einen einfachen Drag-and-Drop-Container.

import React from 'react';

const ImageContainer = () => {
  return (
    <div classname="image-container"></div>
  );
};

export default ImageContainer;

Stilisieren Sie diesen Container in ImageContainer.css:

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

Schritt 4: Fügen Sie die Funktion zum Hochladen von Bildern hinzu

Erweitern Sie den ImageContainer mit einer Dateieingabe und Textanweisungen für den Benutzer.

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

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

  const onChange = (e) => {
    const files = e.target.files;
    if (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;

Und gestalten Sie den Upload-Container:

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

Schritt 5: Vorschau des Bildes

Ändern Sie die Komponente, um das hochgeladene Bild oder den Drag-and-Drop-Bereich bedingt zu rendern.

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

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

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

  return (
    <div classname="image-container">
      {url ? (
        <img  classname="image-view" alt="So implementieren Sie Bild-Drag-and-Drop in React" >



<h3>
  
  
  Step 6: Import and Run the Application
</h3>

<p>Finally, import ImageContainer into App.js and run the app.<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;

Jetzt können Sie die App ausführen und Ihre Bild-Drag-and-Drop-Funktion mit React und CSS programmieren.

---

Das Tutorial behandelt das Einrichten eines einfachen Drag-and-Drop-Bereichs für Bilder mit React, die Verwendung von Dateieingaben und CSS für die Gestaltung sowie die Handhabung der Bildvorschau.