Uppy document not defined node.js

Question

I'm trying to implement uppy the file upload program into my website, but when i try to include it, I get an error message saying that document is not defined. This is already me using browserify to include it on my client side. However, I'm not sure what I'm doing wrong. Any help will be appreciate it. My code is below. FYI, I used IntelliJ Idea by Jet Brains as my IDE, and I had the IDE generate my node js project, so it automatically created me some pages with routing included.

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

require('./uppy');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

index.js

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

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

uppy.js(this is where I placed the uppy code from the documentation)

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

const uppy = Uppy()
    .use(Dashboard, {
        target: '#drag-drop-area',
        inline: true
    })
    .use(XHRUpload, { endpoint: 'https://api2.transloadit.com' });

uppy.on('complete', (result) => {
    console.log('Upload complete! We’ve uploaded these files:', result.successful)
});

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href="../node_modules/@uppy/core/dist/style.css" />
    <link rel='stylesheet' href="../node_modules/@uppy/dashboard/dist/style.css" />

  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>

  <div id="drag-drop-area"></div>

    <script src="../bundle.js"></script>
  </body>
</html>

As you can see, I used bundle.js to incorporate the code from uppy.js by using browserify. I used the cli browserify uppy.js -o bundle.js. I honestly don't know what I'm doing wrong, so if you can help me with this, I really appreciate it. Thank you!

UPDATE: On my console I am also getting the errors:

http://localhost:3000/node_modules/@uppy/core/dist/style.css (net::ERR_ABORTED 404 (Not Found))
http://localhost:3000/node_modules/@uppy/dashboard/dist/style.css (net::ERR_ABORTED 404 (Not Found))
http://localhost:3000/bundle.js (net::ERR_ABORTED 404 (Not Found))

node_modules is not accessible unless you serve it through static as your doing with public folder or define endpoints to proxy the dist files etc, though its better not to do that, instead bundle your libs as shown in the docs, I presume you're doing that with an attempt at bundle.js but if its not found, not a route in express and not in public folder as defined then you need to find out why your bundler is not working. What errors did you get from running browserify? imo tip, dont roll your own ejs traditional request/response.. use react, vue, next, nuxt to name a few, its 2020 — Lawrence Cherone, Mar 29 '20 at 00:11

score 0 · Answer 1 · answered Mar 28 '20 at 22:11

0

I am 100% just guessing here because I can't see the full code/repo and full stacktrace of the error but it sounds like you're referencing document in Node.js code and that's what is throwing this error. document is something that lives in the browser DOM and can only be referenced by UI code. It's important to understand the difference between your Node/Express code which is the backend server and your presentation/UI code which is what gets rendered in the browser.

answered Mar 28 '20 at 22:11

codebeard

81
7

Mmm... Interesting. Well, I am requiring the uppy.js file on app.js. Could that be the reason as to why it isn't working? Am I supposed to even require the uppy.js file at all? – Julio Sandoval Mar 28 '20 at 22:43
@JulioSandoval It seems like Uppy is a frontend library, so in that case definitely not. You wouldn't include it in the Node.js code you would include it in your UI code. I would try removing it from app.js and see if that solves the problem. Hope that helps. – codebeard Mar 31 '20 at 22:23
I definitely got it to working. It turned out that I was having a path issue between including the script on the index.ejs. I had to remove the "../bundle.js" to "/javascripts/bundle.js" because I have a public folder under my modules that contain images, javascripts, and stylesheets folder. – Julio Sandoval Apr 02 '20 at 03:37

Uppy document not defined node.js

1 Answers1