How to call a NodeJS function from HTML?

Question

I'm trying to create a function that adds a new file into an S3 bucket in AWS. The function works in NodeJS.

const AWS = require('aws-sdk');
AWS.config.update({region: 'us-east-2'});
s3 = new AWS.S3({apiVersion: '2006-03-01'});

// call S3 to retrieve upload file to specified bucket
const file = "file.png";
const uploadParams = {Bucket: "uploads", Key: '', Body: ''};

const fs = require('fs');
const fileStream = fs.createReadStream(file);
fileStream.on('error', function(err) {
  console.log('File Error', err);
});
uploadParams.Body = fileStream;
const path = require('path');
uploadParams.Key = path.basename(file);

s3.upload (uploadParams, function (err, data) {
  if (err) {
    console.log("Error", err);
  } if (data) {
    console.log("Upload Success", data.Location);
  }
});

What I'm trying to do now is take this code and make it execute when a file is uploaded in HTML. I have a simple HTML script where users can upload files and I want the above code to execute when the submit button is pressed.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <form action="javascript:loadAPI(document.getElementByID('fileUpload'))">
      <label>Upload a file to AWS S3</label>
      <input type="file" id="fileUpload" name="filename">
      <input type="submit">
    </form>
    <script type="text/javascript" src="apiFunction.js">
  </script>
  </body>
</html>

The problem is that if I put the node function within loadAPI, I get the following error.

Uncaught ReferenceError: require is not defined

Does anyone know how I can utilize this function from HTML?

Node is a javascrip runtime, a browser also provides a differnt runtime. They are not directly interchangeable. They both use javascript for the language but the APIs are differnt. — Jon P
– Jon P, Commented Feb 17, 2022 at 0:50
nodeJS cannot run in the browser without considerable help like using WebContainers. Alternatively, you could run the nodeJS portion on a server, such as AWS Lambda, and call into it through some REST API. — Anon Coward
– Anon Coward, Commented Feb 17, 2022 at 0:52

Allan Chua · Accepted Answer · 2022-02-17 02:11:57Z

1

Uncaught ReferenceError: require is not defined

You are getting this error because require function is the primary importing function used in CommonJS. AWS SDK is not meant for browser-side usage. Using it on client-application will also require the HTML file to use AWS credentials and potentially expose them over the public internet which could be a security risk.

A better way of tackling your requirement of uploading files to S3 is the use of S3 pre-signed URLs. You can use this AWS guide as a starting point and then check out this blog after to get an idea on how to implement it on client-side apps.

edited Feb 17, 2022 at 2:11

answered Feb 17, 2022 at 1:08

Allan Chua

10.3k9 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to call a NodeJS function from HTML?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related