title: GridFS/multer - Cannot read property 'filename' of undefined
body: <p>I am not a great expert in web development (at least for the moment, hopefully), so my question may probably be a bit silly.</p>
  
  <p>Here is my problem:
  I've been working on Node.Js and trying to create a database where i can upload pictures for then retrieving them and showing them on browser via an .ejs file.</p>
  
  <p>Unfortunately, while in the app.js file i am able to console.log the <code>images</code> array and check for a <code>filename</code> of at least a single file, while looping through it on the .ejs doc by doing so: </p>
  
  <pre><code>   `&lt;% for(var i = 0; i &lt;= images.length; i++){ %&gt;
          &lt;img src="&lt;%= images[i].filename %&gt;"&gt;
      &lt;% } %&gt;`
  </code></pre>
  
  <p>i get the error as shown in the title of this question.</p>
  
  <p>Does anyone know what I'm doing wrong? I believe I have set something wrong either with GridFS or multer, but I'm not 100% sure. </p>
  
  <p>Thank you in advance to whoever is going to reply.</p>
  
  <p>Here you can find the code I am using in the app.js file at the moment:</p>
  
  <pre><code>var express                         = require('express'),
      mongoose                        = require('mongoose'),
      bodyParser                      = require('body-parser'),
      methodOverride                  = require('method-override'),
      expressSanitizer                = require('express-sanitizer'),
      path                            = require('path'),
      crypto                          = require('crypto'),
      multer                          = require('multer'),
      GridFsStorage                   = require('multer-gridfs-storage'),
      Grid                            = require('gridfs-stream'),
      app                             = express();
  
  //connect to the MongoDB database
  mongoose.connect("mongodb+srv://***:*****@cluster-***-***-q5eof.mongodb.net/*****?retryWrites=true&amp;w=majority", 
  { useNewUrlParser: true,
  useUnifiedTopology: true,
  useFindAndModify: false,
  useCreateIndex: true});
  
  //connect to the MongoDB database
  var mongoURI = "mongodb+srv://***:*****@cluster-***-***-q5eof.mongodb.net/*****?retryWrites=true&amp;w=majority";
  
  var conn = mongoose.createConnection(mongoURI)
  
  //parseing incoming request bodies in a middleware before the handlers, available under the req.body property
  app.use(bodyParser.urlencoded({extended: true}));
  
  //setting the engine to read directly the ejs files without specifying their extentions on the routes
  app.set('view engine', 'ejs');
  
  //serving images, CSS files, and JavaScript files in a directory named public:
  app.use(express.static('public'));
  
  //setting method-override to be used via '_method' text before specifying the type of method used in a form
  app.use(methodOverride('_method'));
  
  //execute express-sanitizer
  app.use(expressSanitizer());
  
  let gfs
  conn.once('open', () =&gt; {
    gfs = Grid(conn.db, mongoose.mongo)
    gfs.collection('uploads')
    console.log('GRID CONNECTION SUCCESSFUL')
  })
  
  //Landing page
  app.get('/', function(req, res){
      gfs.files.find().toArray(function(err, images){
          if(err){
              console.log(err)
          } else {
                  images.map(function(image){
                  image.isImage = true;
              });
          }
          res.render('landing', {images: images});
          console.log(images[0].filename);
      });
  });
  
  //Create storage engine
   var storage = new GridFsStorage({
    url: mongoURI,
    file: (req, file) =&gt; {
      return new Promise((resolve, reject) =&gt; {
        crypto.randomBytes(16, (err, buf) =&gt; {
          if (err) {
            return reject(err);
          }
          const filename = buf.toString('hex') + path.extname(file.originalname);
          const fileInfo = {
            filename: filename,
            bucketName: 'uploads'
          };
          resolve(fileInfo);
        });
      });
    }
  });
  const upload = multer({ storage });
  
  //Upload page
  app.get('/upload', function(req, res){
      res.render('upload');
  });
  
  //Sending form from upload page
  app.post('/upload', upload.array('file'), function(req, res){
      res.json({file: req.files});
  });
  
  app.listen('3000', function(err){
      if(err){
          console.log(err)
      } else{
          console.log("APP CONNECTED")
      }
  });
  </code></pre>