Saturday, 5 January 2019

File Upload With Multer in Express, download with JSZip, file-saver

//index.html
<form action="/uploadmultiple" enctype="multipart/form-data" method="POST">
        Select images: <input type="file" name="myFiles" multiple>
        <input type="submit" value="Upload your files" />
    </form>

body-parser doesn't handle multipart bodies, which is what FormData is submitted as.
Instead, use a module like multer.

//server.js
// Set Storage Engine
const storage = multer.diskStorage({

    destination: './public/upload',

    filename: function (req, file, cb) {
        cb(null, 'file-' + Date.now() + path.extname(file.originalname))
    }
})

const upload = multer({
    storage: storage,
    limits: {
        fileSize: 1024 * 1024 * 10
    }, //10Mb
    //fileFilter: (req, file, cb) => {
    //Allowed ext
    //  const filetypes = /jpeg|jpg|png|gif/;
    //Check ext
    //  const extname = filetypes.text( path.extname(file.originalname).toLowerCase());
    //Check mime
    //  const mimetype = filetypes.text(file.mimetype);

    //  if(mimetype && extname){
    //   return cb(null,true);
    //  }else{
    //   cb('Error: Images only!');
    // }
    // }
})

//Uploading multiple files to server
app.post('/uploadmultiple', upload.array('myFiles', 12), (req, res, next) => {
    const files = req.files
    if (!files) {
        const error = new Error('Please choose files')
        error.httpStatusCode = 400
        return next(error)
    }

    res.send(files)
})

//download files from cloud to server
app.get('/downloadfile', async (req, res, next) => {
    try {
        const files = await fileSchema.find({});
        if (files.length === 0) {
            return next('database empty')
        }

        files.map(async (item, index) => {
            const buf = Buffer.from(item.buffer, 'base64');

            await fs.writeFile(path.join(__dirname, '/public/download', item.fileName), buf, function (error) {
                if (error) {
                    return next(error);
                } else {
                    console.log(item.fileName, ' downloaded');
                    return true;
                }
            });

            if (index === (files.length - 1)) { res.send({ 'message': 'ok' }) }
        })

    } catch (err) {
        return next(err)
    }
})

reference:
https://code.tutsplus.com/tutorials/file-upload-with-multer-in-node--cms-32088
https://www.youtube.com/watch?v=9Qzmri1WaaE
https://stackoverflow.com/questions/4796914/store-images-in-a-mongodb-database
https://chuanshuoge2.blogspot.com/2018/12/bank-express-ejs-mongodb.html
https://gist.github.com/sid24rane/bdf557cf9f835181a994439da0b5b82a
https://ant.design/components/upload/
https://stackoverflow.com/questions/43013858/ajax-post-a-file-from-a-form-with-axios
https://www.npmjs.com/package/multer

https://stackoverflow.com/questions/25209073/sending-multiple-responses-with-the-same-response-object-in-express-js
https://medium.freecodecamp.org/how-to-create-file-upload-with-react-and-node-2aa3f9aab3f0
https://www.npmjs.com/package/axios
https://github.com/axios/axios/issues/639

https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743
https://stuk.github.io/jszip/
https://www.npmjs.com/package/file-saver
https://github.com/Stuk/jszip/issues/310

https://stackoverflow.com/questions/24348437/mongoose-select-a-specific-field-with-find
https://stackoverflow.com/questions/8303900/mongodb-mongoose-findmany-find-all-documents-with-ids-listed-in-array

No comments:

Post a Comment