O
O
oxios2020-01-21 06:14:52
Node.js
oxios, 2020-01-21 06:14:52

How not to save the image if it has not changed?

Hey!
I am making an admin panel. I form a formData and send it to the server. In the router I do the following. Created an array of expected fields
formData.append("headerBg", headerBg);

const expectedFields = ['headerBg', 'previewImg', 'fullImg'];

And in the fileFilter, I add to the array the fields that I transfer from the client.
req.inboxFileFields.push(file.fieldname);
So then I cycle through
for (let i = 0; i < expectedFields.length; i++) {
            if (!req.inboxFileFields.includes(expectedFields[i])) {
                update[expectedFields[i]] = null;
            }
        }

And I think if the field that I expected was not transferred, then the file should be deleted.
But right now it turns out that if my picture is already loaded and I want to change only some text, I send the form without a field with a picture, on the server I see that the expected field was not transferred and it means that I need to delete it in the database. but I do not want to delete, I just want to ignore this condition, do nothing with the already loaded picture, but change only the text.
What is the verification mechanism? Maybe I need some extra from the client to the server. send the field so that the server understands that this picture has not changed and does not need to be overwritten or deleted?
const router = require('express').Router();
const Project = require('../../../models/Project');
const multer = require('multer');
const slugify = require('slugify');
const uuidv4 = require('uuid/v4');

const allowedMimeTypes = ['image/jpeg'];
const expectedFields = ['headerBg', 'previewImg', 'fullImg'];

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './uploads/projects');
    },
    filename: function (req, file, cb) {
        cb(null, uuidv4() + '-' + file.originalname);
    }
});

const fileFilter = (req, file, cb) => {
    req.inboxFileFields.push(file.fieldname);

    if (allowedMimeTypes.includes(file.mimetype)) {
        cb(null, true);
    } else {
        return cb({message: 'Формат файла не верный'}, false);
    }
};

const upload = multer({
    storage,
    limits: {fileSize: 1024 * 1024 * 5},
    fileFilter
}).any();

router.put('/:slug', (req, res, next) => {
    req.inboxFileFields = [];

    const {slug} = req.params;

    upload(req, res, async function (err) {

        if (err) {
            return res.status(400).json({message: err.message || 'Что-то пошло не так'});
        }

        let update = {
            ...req.body,
            slug: slugify(req.body.name, {replacement: '-', remove: null, lower: true})
        };

        req.files.forEach((file) => {
            const pathFile = `/${file.path.replace(/\\/g, '/')}`;
            const field = file.fieldname;

            update[field] = pathFile;
        });
        
        for (let i = 0; i < expectedFields.length; i++) {
            if (!req.inboxFileFields.includes(expectedFields[i])) {
                update[expectedFields[i]] = null;
            }
        }

        const newProject = await Project.findOneAndUpdate({slug}, update, {new: true});

        return res.status(202).json({newProject});
    })
});

module.exports = router;

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergey Suntsev, 2020-01-21
@GreyCrew

I see two solutions to the problem.
1) Convert the image to base64 format, i.e. text and compare with the original.

const bitmap = fs.readFileSync(file)
const base64Image = new Buffer(bitmap).toString('base64') // Получили изображение формата base64

2) Use node-opencv - a library for computer vision and use it to compare 2 images.
In this case, there is already a library for comparison - image-diff . The advantage of this method is that it will show how much the image has changed in contrast to the original.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question