JSFiddle - React, Tailwind, and code Playground

by austegard

HTML

<div id="drop-area">
  <form class="my-form">
    <p>Paste text or image here or drag and drop an image:</p>
    <textarea id="paste-content" placeholder="Paste content here"></textarea>
    <input type="file" id="file-input" accept="image/*">
  </form>
</div>

CSS

#drop-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  border: 2px dotted #ccc;
  border-radius: 20px;
  margin: 20px;
}

.my-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

textarea {
  width: 80%;
  height: 150px;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  margin-bottom: 20px;
  resize: none;
}

#file-input {
  width: 80%;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

JavaScript

const pasteContent = document.getElementById("paste-content");
const fileInput = document.getElementById("file-input");
const dropArea = document.getElementById("drop-area");

// Handle paste event
pasteContent.addEventListener("paste", handlePaste);

// Handle image drop event
dropArea.addEventListener("drop", handleDrop);
dropArea.addEventListener("dragover", handleDragOver);

// Handle image selection event
fileInput.addEventListener("change", handleFileSelect);

function handlePaste(e) {
  const items = (e.clipboardData || e.originalEvent.clipboardData).items;
  let paste = null;
  
  // Look through items, if it's an image, upload it
  for (const item of items) {
    if (item.type.indexOf("image") === 0) {
      paste = item.getAsFile();
      uploadImage(paste);
      break;
    }
  }
}

function handleDrop(e) {
  e.preventDefault();
  e.stopPropagation();

  const files = e.dataTransfer.files;
  uploadImage(files[0]);
}

function handleDragOver(e) {
  e.preventDefault();
  e.stopPropagation();
}

function handleFileSelect(e) {
  uploadImage(e.target.files[0]);
}

function uploadImage(file) {
  // Upload the image file to a server or do something with it here
  console.log("Uploading image:", file);
}