actualmente estoy desarrollando el pegar imágenes desde el portapapeles con Ctrl + V mediante react hook. Me funciona normal seleccionando el archivo lo guardo en el state y si desisto lo elimino. Muestro lo creado:
import React, { useState } from 'react'
let styleImage = {
height: '10em',
width: 'auto '
}
export default () => {
const [image, setImage] = useState('');
return (
<div className="form-group col-md-4">
<div className="row">
<label className="">Imagen</label>
{image && (
<div className="col-12 text-center">
<img alt="not fount" style={styleImage} src={URL.createObjectURL(image)} />
</div>
)}
<div className="col-9 mt-2">
<input
type="file"
className="form-control col-8"
id="imagen"
onChange={(e) => setImage(e.target.files[0])}
required
/>
</div>
{image && (
<div className="col-3 mt-2">
<button className="btn btn-danger" onClick={() => setImage('')} >Remove</button>
</div>
)}
</div>
</div>
)
}
Eso es lo que quiero conseguir pero con Ctrl + V para eso según leí varios foros recomiendan usar esta librería @rpldy
, me parace genial pero no he logrado entender como se captura la imagen en el state.
Esto es lo que tengo:
import React, { useState } from "react";
import styled from "styled-components";
import Uploady, {
useItemStartListener,
useItemFinalizeListener,
} from "@rpldy/uploady";
import { getMockSenderEnhancer } from "@rpldy/mock-sender";
import UploadDropZone from "@rpldy/upload-drop-zone";
import withPasteUpload from "@rpldy/upload-paste";
import UploadPreview from "@rpldy/upload-preview";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Row, Col } from "react-bootstrap";
import e from "express";
const mockSenderEnhancer = getMockSenderEnhancer();
const PreviewContainer = styled.div`
margin-top: 20px;
img {
max-width: 400px;
}
`;
const StyledDropZone = styled(UploadDropZone)`
width: 400px;
height: 200px;
border: 1px solid #f1f1f1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
`;
const StyledInput = styled.input`
width: 400px;
height: 22px;
margin: 10px 0;
`;
const PasteUploadDropZone = withPasteUpload(StyledDropZone);
const PasteInput = withPasteUpload(StyledInput);
const UploadStatus = () => {
const [status, setStatus] = useState(null);
useItemStartListener(() => setStatus("Cargando..."));
useItemFinalizeListener(() => setStatus("¡Cargada!"));
return status;
};
export default () => {
const [image, setImage] = useState('');
return (
<Container>
<Row>
<Uploady debug enhancer={mockSenderEnhancer}>
<h2 className="text-center">Cargue de imágenes</h2>
<Col md={12}>
<PreviewContainer>
<UploadPreview />
</PreviewContainer>
</Col>
<Col md={8}>
<PasteInput
onChange={(e) => setImage(e.target.files[0])}
extraProps={{
placeholder: "Pegar img desde portapapeles (Ctrl + V)",
}}
/>
<UploadStatus />
</Col>
<Col md={4}>
<button onClick={() => setImage('')}>Remove</button>
</Col>
</Uploady>
</Row>
</Container>
);
};
Ese onChange ahí donde está no hace nada, sin embargo lo puse para dar un contexto de lo que quiero hacer. Bueno quedo atento a sus comentarios. Por cierto se ven diferentes porque el primero es un proyecto que funciona y último es uno nuevo que estoy creando.