You are on page 1of 5

Controller de la imagen:

export const GetimgOrg = async(req, res) => {


try {
let Data = await ImgOrg.findAll();
res.json(Data);
} catch (error) {
console.log(error);
}
}

export const uploadImgOrg = async (req, res) => {


try {
console.log("Llega al controller");
console.log(req.file);

if (req.file === undefined) {


return res.send(`You must select a file.`);
}

ImgOrg.create({
type: req.file.mimetype,
name: req.file.originalname,
ImgOrg: fs.readFileSync('resources/statict/assets/uploads/' +
req.file.filename
),
}).then((ImgOrg) => {
fs.writeFileSync('resources/statict/assets/uploads/' + ImgOrg.filename,
ImgOrg.ImgOrg
);

return res.send(`File has been uploaded.`);


});
} catch (error) {
console.log(error);
return res.send(`Error when trying upload images: ${error}`);
}
};

Modelo de la imagen:
// It first imports the Sequelize library and the database configuration.
import { Sequelize } from "sequelize";
import db from "../config/database.js";

const {DataTypes} = Sequelize;


// Define the "ImgOrg" model using Sequelize
const ImgOrg = db.define('imgOrg', {
idImgOrg:{
type: DataTypes.INTEGER,
primaryKey: true,
autoIncrement: true
},
name:{
type: DataTypes.STRING
},
ImgOrg:{
type: DataTypes.BLOB
},
type:{
type: DataTypes.STRING,
}
},{
freezeTableName: true,
timestamps: false
});
// Synchronize the model with the database
(async () => {
await db.sync();
})();
// Export the "ImgOrg" model
export default ImgOrg;

React Añadir imagen:


import React, { useState } from 'react'
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';
import Col from 'react-bootstrap/esm/Col';
import Row from 'react-bootstrap/esm/Row';

const AddImage = () => {


const [userNIF, setUserNif] = useState('');
const [image, setImage] = useState('');
const [data, setData] = useState('');
const [selectedImages, setSelectedImages] = useState('');
const [previewImages, setPreviewImages] = useState('');
const [msg, setMsg] = useState('');
const history = useNavigate();

const PreviewImg = async (e) => {


setSelectedImages(e.target.files[0]);
const inputFile = e.target.files[0];
if (inputFile) {
const reader = new FileReader();
reader.onload = (e) => {
setPreviewImages([e.target.result]);
};
reader.readAsDataURL(inputFile);
}

};

const Add = async (e) => {


e.preventDefault();
console.log(previewImages);
const formData = new FormData();
formData.append('file', selectedImages);

axios.post('/upload', formData)
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error(error);
});
};
return (
<div style={{
backgroundImage:
`url("https://sirc.ca/wp-content/uploads/2020/03/AdobeStock_298604606-
scaled.jpeg")`,
backgroundSize: "cover"
}}>
<div className='bg-success bg-opacity-25'>
<div className= "form-container vh-100 d-flex justify-content-
center align-items-center">
<Form onSubmit={Add} className='bg-success text-white bg-
opacity-50 border border-dark rounded w-50 shadow-lg p-3 mb-5 rounded'>
<Form.Group className="field mt-4 mb-4">
<div className="Formulario_usuario container pl-2 ">
<Row>
<Form.Label className=" d-flex justify-
content-center" style={{fontSize: 20}}>Imagen Actividad</Form.Label>
<Form.Control className="mb-3" type="file"
id="input-files" onChange={PreviewImg} />
</Row>
<Row>
<div className="container pl-2 d-flex justify-
content-center">
{previewImages && <img src={previewImages}
style={{maxWidth: "200px"}}/>}
</div>
</Row>
<div className= "d-flex justify-content-center
align-items-center mt-3">
<Button variant="success" type="submit" className=
"border-dark w-100">
Añadir Imagen
</Button>
</div>
</div>
</Form.Group>
</Form>
</div>
</div>
</div>
)
}

export default AddImage;

React mostrar imagen:


import React, { useState, useEffect } from 'react'
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';
import Col from 'react-bootstrap/esm/Col';
import Row from 'react-bootstrap/esm/Row';
import Card from 'react-bootstrap/esm/Card';
import { Buffer } from 'buffer';

const ShowImage = () => {


const [listImages, setListImages] = useState([]);

const GetImg = async (e) => {


e.preventDefault();
const listIMG = await axios.post("/getImg");
console.log("Imagenes:");
console.log(listIMG.data);
setListImages(listIMG.data);
};

useEffect(() => {
console.log("useEffects ok");
GetImg(new Event(''));

}, []);

return (
<div style={{
backgroundImage:
`url("https://sirc.ca/wp-content/uploads/2020/03/AdobeStock_298604606-
scaled.jpeg")`,
backgroundSize: "cover"
}}>
<div className='bg-success bg-opacity-25'>
<div className= "form-container vh-100 d-flex justify-content-
center align-items-center">
{<Row xs={1} md={4} className="g-4 mt-1 mb-5">
{listImages.map((image) => (//Es un for each no se asusten
<Col key={image.idImgOrg}>
<Card className={`box-shadow`}
key={image.idImgOrg}>
<Card.Img
src={`data:image/jpeg;base64,$
{Buffer.from(image.ImgOrg).toString('base64')}`}
alt={image.name}
/>
</Card>
</Col>
))}
</Row>}
</div>
</div>
</div>
)
}

export default ShowImage;

Configuración index server:

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true, parameterLimit:100000, limit: "500mb" //the two body parsers
are so that you can accept form requests from an html
}));

IMPORTANTE: Instalar lo siguiente:


-En cliente:
npm install buffer
En server:
npm install multer

You might also like