Dropzonejs and Node/Multer photo uploads are not showing on the server.

Question

Using DropzoneJs to upload files to a Node server using Multer, I am unable to save files nor see anything in the req.file or req.files object in the console.

Here is the HTML, with a sprinkle of EJS:

<div class="container">
    <div class="row dropzone_input_div">
        <h1 class="new_event_header">Add Your photos for <%= event.title %></h1>
        <div>
            <form class="dropzone needsclick dz-clickable" action="/testmedia" id="dropzoneFileUpload" name="mediaFile" enctype="multipart/form-data">
                <input type="text" value="<%= event._id %>" hidden name="id">
            </form>
        </div>
    </div>
    <div class="row">
        <div class="dropzone_preview">

        </div>
    </div>
</div>

Here is the Dropzone JS file:

Dropzone.options.dropzoneFileUpload={
    paramName: "media",
    parallelUploads: 30,
    uploadMultiple: true,
    autoProcessQueue: true
}

Here is the Node/Express/Router I am using:

const multer        = require('multer');
// const upload        = multer({dest:'uploads/'})
const async         = require('async');
const dotenv        = require('dotenv');

require('dotenv').config({silence:true});

const router = express.Router();
//Add Mongo Models to use Mongoose
const { Event, User, Moments, Instant } = require("../models");

const b2 = new B2({
    accountId: process.env.B2_MASTER_APPLICATION_KEY,
    applicationKey: process.env.B2_WRITE_APPLICATION_KEY
});

//router.use('/testmedia',upload.single('uploadedFile'))
router.use(multer({dest: 'uploads/'}).single('file'));

const uploads = (req,res,next) => {
    console.log("hit uploads yall!");
    console.log(req.file);
    next();
}


const testMedia = (req,res) => {
    console.log("hit testMedia route");
    res.send("File uplaoded!")
}

My console.log files look like this...

hit uploads yall!
undefined
hit testMedia route
POST /testmedia 200 5.603 ms - 14

Any clue why I cannot see the files? They do not save to my /uploads file on my server (Ubuntu) and always show up undefined in the console?

I would probably try appending the files to a FormData object then posting that to /testmedia https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData — Aldo Sanchez, Sep 23 '18 at 04:27
I have enctype="multipart/form-data" in the html, wouldn't that do the same thing? Or are they different — illcrx, Sep 23 '18 at 07:24
Also looking through the request and also the response object, I have multi-art/form-data as the type. However after searching I see no pertinent file/media/form/form-data in the entire req/res. — illcrx, Sep 23 '18 at 07:34

score 0 · Accepted Answer · answered Sep 28 '18 at 15:31

My friend Eli, helped me solve this...

Steps I took:

had my browser console opened in Chrome to the network tab
uploaded a file
looked for the testmedia request
at the bottom of the window there was a Form Data section with file[0]: (binary)

Inside my routes file I used this

const express     = require('express');
const passport    = require('passport');
const crypto      = require('crypto');
const flash       = require('express-flash');
const xoauth2     = require('xoauth2');
const B2          = require('backblaze-b2');
const async       = require('async');
const multer      = require('multer');

const { User } = require("../models");

const {
    testMedia
} = require('../controllers/backblaze.controller')

const router = express.Router();


//*******************Middleware for Backblaze routes******************

const storeImage = multer.diskStorage({
    destination: (req,file,cb) => {
        cb(null, 'uploads/')
    },
    filename: (req,file,cb)=> {
        cb(null,file.fieldname + '-'+ Date.now())
    }
});

const upload = multer({storage:storeImage})

//*****THE ANSWER IS BELOW THIS LINE IN THE .single() method*****

router.post("/testmedia", upload.single('file[0]'), testMedia);
//router.post("/testmedia", upload.any(), testMedia);

The function I require is in another folder for testMedia and it looks like this

    const testMedia = (req,res) => {
console.log("hit testMedia route");
res.send("File uplaoded!")
}

I'm not doing anything with the file yet, but that was my solution, the architecture is a bit different but this question is about the steps above and getting the solution through the browser and calling it correctly in the single('name') method in multer

Dropzonejs and Node/Multer photo uploads are not showing on the server.

1 Answers1