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.
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:
HTML
<html>
<head>
<title> Test File </title>
</head>
<body>
<input type ="file" id = "pdf_file" value = "Upload" />
<input type ="submit" id = "submit" value = "Submit" />
<div id="canvases" style ="position:relative;">
<canvas id="layer" style = "z-index: 2;
position:absolute;
left:0px; top:0px; background-color: #00ff00; opacity:0.1"></canvas>
<canvas id ="pdf-canvas" style=" z-index: 1; position:absolute;
left:0px; top:0px; border:1px solid #000000;"></canvas>
</div>
<script src="test_annotate.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</body>
</html>
test_annotate.js
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);
}
App.js
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??? */
});
via ribarcheto94
No comments:
Post a Comment