File upload with Multer and Uppy

Question

I'm using Uppy as my drag and drop file upload, but as we all know that Uppy doesn't take care of actually uploading it to the server. Therefore, I am using Multer as my back-end for uploading files to my server. Though, I ran into a snag. When I upload the file, I have multer change the file name to the current date plus the extension. But when I console log it, it comes out "undefined".

functions.js

let path = require('path');
const multer = require('multer');



let myUploadFunction = function _multerFunction(req, res, filePath){


    let newFileName;

    let storage = multer.diskStorage({
        destination: function (req, file, callback) {
            callback(null, filePath);
        },
        filename: function (req, file, callback) {
            console.log("Storage Function " , file);
            callback(null, newFileName = Date.now() + path.extname(file.originalname));

            getNewFileName(newFileName); // Trying to pass this function to the upload.js route but it comes back undefined.

        }
    });

    let upload = multer({ storage : storage}).any();

    upload(req, res, function (err) {
        if(err) {
            return res.end("Error uploading file. "+ err);
        }
        console.log("New File Name " + newFileName); // This console log does print the new file name

    });

};

let getNewFileName = function getNewCreatedFileName(fileName){
   return fileName;
};

module.exports.myUploadFunction = myUploadFunction;
module.exports.getNewFileName = getNewFileName;

upload.js

let express = require('express');
let router = express.Router();

let upload = require('../functions/functions');

//const mysql_connection = require('../db'); // Database connection file.

/* POST upload route. */
router.post('/', function(req, res, next) {

  upload.myUploadFunction(req, res, 'public/images', 'File is upload successfully');

   console.log("From the upload route " + upload.getNewFileName()); // RETURNS UNDEFINED
});

module.exports = router;

I don't know why it comes back undefined. I'm passing the function. Am I missing something else?

I also included the uppy code is you need to see it.

uppy.js

// Import the plugins
const Uppy = require('@uppy/core');
const XHRUpload = require('@uppy/xhr-upload');
const Dashboard = require('@uppy/dashboard');


const uppy = Uppy({
    debug: true,
    autoProceed: false,
    restrictions: {
        maxFileSize: 1024000,
        maxNumberOfFiles: 3,
        minNumberOfFiles: 1,
        allowedFileTypes: ['image/*', 'video/*']
    }
})
    .use(Dashboard, {
        trigger: '.UppyModalOpenerBtn',
        inline: true,
        target: '#drag-drop-area',
        replaceTargetContent: true,
        showProgressDetails: true,
        proudlyDisplayPoweredByUppy: false,
        animateOpenClose: true,
        note: 'Images and video only, 1–3 files, up to 1 MB',
        height: 470,
        browserBackButtonClose: true,
        theme: 'dark',
        metaFields: [
            {id: 'caption', name: 'Caption', placeholder: 'describe what the image is about'}
        ]
    });

uppy.on('file-added', (file) =>{
    console.log(file);
    uppy.setFileMeta(file.meta.id, {
       caption: file.name
    });
});

uppy.use(XHRUpload, {

    id: 'XHRUpload',
    endpoint: 'http://localhost:8000/upload',
    method: 'POST',
    formData: true,
    fieldName: 'my_fieldName',
    metaFields: ['caption'],

});

uppy.on('upload-success', (file, response) => {

    console.log("File uploaded successfully ", file);

});

module.exports = uppy;

If you need to see other code let me know. Thank you!

By the way, I am using browserify to implement Uppy. :)

If Multer isn't the best way to upload a file to a server with Uppy, I will gladly take any better alternative. Thanks!

Answer 1

add this after restrictions in uppy.js:

restrictions: { 
   ... 
},
onBeforeFileAdded: (c, files) => {
    n = Date.now().toString(36) + Math.random().toString(36).substr(2) + '.' + c.extension.toLowerCase()
    const m = {
        ...c,
        name:n
    }                    
    return m
}