Hi all 
I’m trying to use a NPM with my wix velo code. I’ve used another NPM package with no issues but I’m struggling with this one. The package is ‘pdf-extraction’ and I need to gather text from PDF documents.
I’ve installed the package as per instructions - also tried back-end and front-end.
These are the instructions to use the package from the readme.
const fs = require("fs");
const pdf = require("pdf-extraction");
let dataBuffer = fs.readFileSync("path to PDF file...");
pdf(dataBuffer)
.then(function (data) {
// number of pages
console.log(data.numpages);
// number of rendered pages
console.log(data.numrender);
// PDF info
console.log(data.info);
// PDF metadata
console.log(data.metadata);
// PDF.js version
// check https://mozilla.github.io/pdf.js/getting_started/
console.log(data.version);
// PDF text
console.log(data.text);
});
I've also tried swapping out
const pdf = require("pdf-extraction");
with
import pdf from 'pdf-extraction'
and
import { pdf } from 'pdf-extraction'
if anyone can shed any light on how to get me started with this I’d really appreciate it.
1 Like
What type of light would you like to have shed? LED, or perhaps good old-fashioned Incandescent?
How about you shed some light first? What isn’t working? Error messages? Where are the PDF files?
HAHA thanks Yisrael
I’m just using a simple document upload button with a submit button to grab the pdf (using .uploadFiles() )
This is the error I’m getting on the console. To my amateur eye this is the npm package not working
Is your code for “reading” the PDF in the backend? You will need to import and use the NPM library in the backend.
Hi - i’ve put the code for front and back end below - I believe it’s reading in the back end.
front end code
import extractDocumentData from 'backend/pdfReader.jsw'
$w.onReady( () => {
const uploadBtn = $w('#documentUploadBtn')
uploadBtn.buttonLabel = 'Upload File'
uploadBtn.fileLimit = 10
uploadBtn.fileType = "Document"
$w('#uploadSubBtn').onClick( () => {
if ($w("#documentUploadBtn").value.length > 0) { // Site visitor chose a file
console.log("Uploading the following files:")
$w("#documentUploadBtn").uploadFiles()
.then( (uploadedFiles) => {
uploadedFiles.forEach(uploadedFile => {
console.log("File url:" + uploadedFile.fileUrl);
})
console.log("Upload successful.");
extractDocumentData(uploadedFiles)
})
} else { // Site visitor clicked button but didn't choose a file
console.log("Please choose a file to upload.")
}
})
} );
back end code
const fs = require("fs");
const pdf = require("pdf-extraction");
export function extractDocumentData(file) {
let dataBuffer = fs.readFileSync(file);
pdf(dataBuffer).then(function (data) {
// number of pages
console.log(data.numpages);
// number of rendered pages
console.log(data.numrender);
// PDF info
console.log(data.info);
// PDF metadata
console.log(data.metadata);
// PDF.js version
// check https://mozilla.github.io/pdf.js/getting_started/
console.log(data.version);
// PDF text
console.log(data.text);
});
}
Can anyone else help me with this???
The question isn’t about getting this specific package to work but how I can use npm packages in velo (not sure about the terminology but how you call it into the code)
Could it be that the problem is that “fs” is not supported by Wix (it says so in the editor)? Also, no clue what it does, since the docs from NPMJS state: "Security holding package
This package name is not currently in use, but was formerly occupied by another package. "
The error message on line 0 seems to refer to this.
EDIT: do you really need that “fs”? It looks like it is a filesystem (fs)-npm for opening and reading a file from disk. But you might not need it, because you already have the files in memory. Have you tried skipping the fs altogether?
Thanks Giri… I thought about the “fs” being the issue and tried other packages which do not include this but still no joy.
Thanks for the other info though. I’ve tried a few different npm that say they do pdf scraping but always seem to get the same result. That made me think its something I’m doing wrong to use the packages.
Thanks again.
When you “require” something in the backend, you still need to add the NPM to your project thru editor. Did you do that? (with the other packages)?
Hi… yeah I’ve installed the package.
I’ve been using the sendgrid package for some time and I just installed this the same way as I did that one. But like I said I don’t seem to be able to import it or use the require() function and keep getting the error code you referred to.
I really appreciate your help Giri 
Ok, did some reading. “fs” is a Node Module and does file access. But node is not supported as an NPM. But, there is a “fs-extra” NPM which is supported and it says it is a drop-in replacement for fs. I have no pdf’s t test it with, but I think the following should work:
import fsExtra from 'fs-extra';
let dataBuffer = fsExtra.readFileSync("path to PDF file...");
As I said, have not tried it, but give it a go.
Also, you call the backend function from the frontend without waiting for the promise to resolve. So if I were you, I would make the button-onClick async and await for the promise, because the reading part is sync.
According to wix docs, user can only upload 1 doc (like a pdf) at the time. So setting it to 10 has no effect.
Another thing: you hand over an array to the backend function. You should hand over the url from each array entry inside the forEach.
Wow. Amazing. Thanks so much for looking into this for me.
I’ll give it a go and let you know the outcome.
you have:
import extractDocumentData from ‘backend/pdfReader.jsw’
shoud be:
import { extractDocumentData} from ‘backend/pdfReader.jsw’
try it again like this.
i have a lazy way to check if your are in different files and functions. at the beginning and end of a function or a file to make sure i am moving as intended:
import {connect_db} from ‘backend/test.jsw’
console.log(‘1’);
connect_db();
console.log(‘2’);
this helps me find where the break is. my console log would print 1 and 2 so I knew connection_db(); was firing and my console did not throw an error for connect_db();. all it ended up being is the {} around the import. i am newish to react i guess it is super specific.
