title: How to store/retrieve an uploaded file using GridFS, MongoDB and Node.js
body: <p>I've searched through APIs for this but I can't seem to find what I need. Looking at the mongo driver API, it looks like I need to use a GridFSBucket and the stream methods. However, all the examples shown pass a filename in order to start the upload process. My question is how to do I process, store and retrieve a file that has been uploaded through an 'input type="file' form? Preferably, I want to store the buffer or typed array so I can then easily display it upon retrieval, but if that's not possible I can probably work around that. </p>
  
  <p>The goal of my app is to upload PDF files, and render them in a canvas using PDFJS.Here's the code I have so far:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt; Test File &lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;input type ="file" id = "pdf_file" value = "Upload" /&gt;
     &lt;input type ="submit" id = "submit" value = "Submit" /&gt;
     &lt;div id="canvases" style ="position:relative;"&gt;
          &lt;canvas id="layer" style = "z-index: 2;
              position:absolute;
              left:0px; top:0px; background-color: #00ff00; opacity:0.1"&gt;&lt;/canvas&gt;
          &lt;canvas id ="pdf-canvas" style=" z-index: 1; position:absolute;
          left:0px; top:0px; border:1px solid #000000;"&gt;&lt;/canvas&gt;
  
    &lt;/div&gt;
    &lt;script src="test_annotate.js"&gt;&lt;/script&gt;
    &lt;script src="https://mozilla.github.io/pdf.js/build/pdf.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>test_annotate.js</p>
  
  <pre><code>document.getElementById("submit").onclick = function() {
  
    var file =document.getElementById("pdf_file").files[0];
  
    console.log("new file!");
    //Step 2: Read the file using file reader
    var fileReader = new FileReader();
  
  
          fileReader.onload = function() {
  
                //Step 4:turn array buffer into typed array
            var typedarray = new Uint8Array(this.result);
  
             //Step 5:PDFJS should be able to read this
            PDFJS.getDocument(typedarray).then(function(pdf) {
  
              // Fetch the first page
              var pageNumber = 1;
              pdf.getPage(pageNumber).then(function(page) {
                console.log('Page loaded');
  
                var scale = 1.3;
                var viewport = page.getViewport(scale);
  
                // Prepare canvas using PDF page dimensions
                var canvas = document.getElementById('pdf-canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
  
  
                // Render PDF page into canvas context
                var renderContext = {
                  canvasContext: context,
                  viewport: viewport
                };
                var renderTask = page.render(renderContext);
                renderTask.then(function () {
                  //set the annotation canvas size to match the size of the pdf
                  var canvas_container = document.getElementById('canvases');
                  canvas_container.style.height = renderContext.viewport.height;
                  canvas_container.style.width = renderContext.viewport.width;
                  var layer = document.getElementById('layer');
  
                  layer.height = renderContext.viewport.height;
                  layer.width =  renderContext.viewport.width;
  
                });
              });
            });
  
          };
  
  //Step 3:Read the file as ArrayBuffer
  fileReader.readAsArrayBuffer(file);
  }
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>var express = require('express');
  var bodyParser = require('body-parser');
  var fs  = require('fs');
  var mongodb = require('mongodb');
  var app = express();
  app.use(bodyParser.json());
  app.use(express.static('frontend'))
  
  var MongoClient = mongodb.MongoClient;
  //Grid = mongodb.Grid;
  
  // Connect to the db
  MongoClient.connect("mongodb://localhost:27017/test", function(err, db) {
  if(err) return console.dir(err);
  
    var bucket = new mongodb.GridFSBucket(db);
    /*What do I do here to store the uploaded file in test_annotate.js
    using mongoDB and GridFS??? */
  });
  </code></pre>