React Dropzone

crea una aplicacion de vitejs

function App() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(e.target[0].value);
    console.log(e.target[1].files[0]);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" />
        <input type="file" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

enviando datos a Cloudinary

const handleSubmit = async (e) => { e.preventDefault(); console.log(e.target[0].value);

const formData = new FormData();
formData.append("file", file);
formData.append("upload_preset", 'ekf9v8e0');
formData.append("api_key", import.meta.env.VITE_CLOUDINARY);

const res = await fetch(
  "https://api.cloudinary.com/v1_1/fazttech/image/upload",
  {
    method: "POST",
    body: formData,
  }
);
const data = await res.json();
console.log(data)

};

crear un preview

<div>
  <form onSubmit={handleSubmit}>
    <input type="text" />
    <br />
    <input
      type="file"
      onChange={(e) => setFile(e.target.files[0])}
      accept="image/*"
    />
    <br />

    {file && <img src={URL.createObjectURL(file)} alt="img" width="200" />}
    <button type="submit">Submit</button>
  </form>
</div>

React dropzone

npm install --save react-dropzone

import { useState, useCallback } from "react"; import { useDropzone } from "react-dropzone";

function App() { const [file, setFile] = useState(); const onDrop = useCallback((acceptedFiles) => { // Do something with the files console.log(acceptedFiles[0]); }, []); const { getRootProps, getInputProps, isDragActive, acceptedFiles } = useDropzone({ onDrop });

const handleSubmit = async (e) => { e.preventDefault(); console.log(acceptedFiles);

const formData = new FormData();
formData.append("file", acceptedFiles[0]);
formData.append("upload_preset", "ekf9v8e0");
formData.append("api_key", import.meta.env.VITE_CLOUDINARY);

const res = await fetch(
  "https://api.cloudinary.com/v1_1/fazttech/image/upload",
  {
    method: "POST",
    body: formData,
  }
);
const data = await res.json();
console.log(data);

};

return (

    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>Drop the files here ...</p>
      ) : (
        <p>Drag 'n' drop some files here, or click to select files</p>
      )}
    </div>
    <br />

    {acceptedFiles[0] && (
      <img
        src={URL.createObjectURL(acceptedFiles[0])}
        alt="img"
        width="200"
      />
    )}
    <button type="submit">Submit</button>
  </form>
</div>