Is there a way to implement a polyfill for DOMParser on Web Worker in order to utilize it for uploads with the AWS S

Our team has implemented the AWS S3 SDK for uploading files from a browser to S3 buckets. To prevent UI rendering and interaction issues caused by large file uploads, we decided to move the upload process into a Web Worker thread. This solution allows users to freely navigate and interact with our single page application without interruptions.

Small file uploads work smoothly, but we encountered a problem when attempting to upload big files. The S3 SDK splits the file into chunks for individual uploading. Upon receiving an XML response from the server, the S3 SDK attempts to parse it using the DOMParser class, which is not accessible in the Web Worker scope.

We are exploring options to polyfill the DOMParser capability within the Web Worker environment so that the S3 SDK can successfully handle uploads. Is there a way to achieve this?

javascriptamazon-web-servicesamazon-s3web-workerpolyfills

Answer №1

I encountered a versioning issue with jsdom which prevented it from working for me. However, I found a workaround by polyfilling the DOMParser for the aws sdk using the code snippet below.

var DOMParser = require('xmldom').DOMParser;
window.DOMParser = DOMParser;

I then used browserify to create domparser.js.

browserify main.js -o domparser.js

Finally, I imported domparser.js before importing the aws sdk in my project.

importScripts('domparser.js');
importScripts('https://sdk.amazonaws.com/js/aws-sdk-2.176.0.js');

Answer №2

Here is my solution to the problem I was facing:

To make DOMParser work on a web worker, I used a polyfill with jsdom and browserify

By leveraging jsdom, which creates a window-like environment, and browserify to bundle jsdom for execution in the browser (originally developed for node.js), I was able to achieve the desired functionality.

The process worked seamlessly and effectively.

Answer №3

If you're looking to optimize the AWS sdk in 2022, consider polyfilling DOMParser with linkedom instead of JSDOM. This can significantly reduce your bundle size (from around 3mb to just 300kb based on my own experience).

To implement this, simply add the following code:

const linkedom = require('linkedom')
const { DOMParser } = linkedom
window.DOMParser = DOMParser

You can then use browserify to create a bundle:

browserify index.js -o domparser.js

Finally, import the bundle into your web worker before loading the AWS sdk:

importScripts('domparser.js');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with the update of class properties in Node.js using Express

I am facing some challenges with a .js Object's attribute that is not updating as expected. Being new to the world of JavaScript, I hope my problem won't be too difficult to solve. To begin with, here is a snippet from my Node class: Node = fu ...

javascriptnode.jsclassexpressneo4j

How to access an ejs variable within a Node.js environment using Javascript

As I experiment with my JavaScript code in an HTML file to interact with an ejs variable. Here is the Node.js code snippet: res.render('target.ejs', {data:user}); Everything works fine when I include this in my HTML file: <p> <h1> ...

javascriptnode.jsexpress

Is it possible for me to include detailed information to a particular attribute of an object?

Although the code below is incorrect, it reflects my intention. Can this be achieved? I am looking to update the original array so that all orderno values are formatted as 000.0.000.00000.0. let cars= [ {orderno: "5766302385925", make: "Alfa", dealersh ...

javascriptarraysfunctionobject

Accessing Private Files with Signed URLs from AWS S3

Issue: The challenge is to securely allow users to upload a file and retrieve it later. The files are stored in private Buckets and objects using S3 pre-signed URLs for uploading. However, fetching the file poses a problem as the signed URLs expire after ...

javascriptamazon-web-servicesamazon-s3

Posting photos to MongoDB using Node.js and Express

I am currently facing an issue while attempting to upload an image using multer in Node.js. I have configured multer to save the uploaded images in the "upload" directory, and upon form submission, the image is successfully sent to the directory. However, ...

javascriptnode.jsmongodbexpress

Create a word filter that doesn't conceal the words

I have a code snippet that filters a JSON object based on name and title. I also have an array of specific words and I would like to modify the filter to highlight those words in the text without hiding them. $scope.arrayFilter=["bad,bill,mikle,awesome,mo ...

javascriptangularjs

Can a JavaScript function be handed to a constructor for an event handler?

The JavaScript function provided: function ShowFax() { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "WebServices/SendFaxService.asmx/SaveFaxData", data: "{}", dataType: "json", ...

javascriptc#asp.net

Is it possible to create a "text carousel" using HTML, CSS, and JavaScript?

Currently, I am in the process of building a 'text carousel' on my own, without seeking assistance. The progress so far can be viewed here (please stretch it out, as it is not responsive yet). Specifically, I am aiming to replicate the text carou ...

javascriptjqueryhtmlcsscarousel

Using Vue: Dynamically pass components to router-view within dynamically loaded components

For a specific URI, I am looking to display a different layout on the same route by using different components based on whether the user is on mobile or desktop. I want to avoid cluttering the PageCommon (layout component) with route path checks. In the a ...

javascriptvue.jsfrontendvue-router

Tips for circumventing the ajax data size restriction in asp.net mvc3

Currently, I am implementing an auto suggest function using AJAX in the following manner: $("#empName2").autocomplete({ search: function (event, ui) { var key = CheckBrowser(event); if (key == 13) return tr ...

javascriptjqueryajaxasp.net-mvc-3

What is the best way to implement form fields that have varying validation patterns based on different conditions?

Currently, my focus is on developing a form that prompts the user to choose between "USA" or "International" via radio buttons. The input field for telephone numbers should then adapt its requirements based on the selected country - either a 10-digit US nu ...

javascripthtmlformsvalidation

Tips for customizing the IconButton appearance in material-ui

While Material-ui offers a default icon button, I am interested in customizing its design to resemble this: IconButton design needed Could you please advise me on how to make this change? Thank you. ...

javascriptreactjswebmaterial-ui

Submit data from one form to another form located within an iframe

I am currently using a JX Browser that allows content to be displayed in an iframe. My goal is to automatically transfer the username and password of a user logging into my ticketing software to another form within an iframe. The page within the iframe is ...

javascriptphpjqueryhtmliframe

Updating front end data using Node.js - A Comprehensive Guide

I am looking to create a website using node.js that can dynamically display a plot and update the data every minute without needing to refresh the entire page. As someone new to node.js, I am interested in learning how to use "get" requests to update the d ...

javascriptnode.js

Issue with jQuery.off when using a dynamic function name

I am currently implementing a modular pattern for writing my JavaScript code and it has been an enjoyable experience! However, I have encountered a challenging situation. My Namespace structure looks like this: var settings, handlers, objects, Namespace ...

javascriptjquery

Codeigniter Autocomplete Feature with Ajax - Page Not Found Error

I am currently facing an issue while porting a working php application with AutoSuggest JS to CodeIgniter. My expertise in CI is not very strong which is why I ventured into this task. The problem lies in the fact that it is not functioning as expected. Be ...

javascriptphpjqueryajaxcodeigniter

Substitute a JSONP API call using $.ajax() with a direct server-to-server API call

My javascript application utilizes an ajax function that has the following structure: $.ajax({ url: apiURL, dataType: 'jsonp', success: function(data) { if (data.ok) { //perform actions }}}); Everything was working perfectly until I ...

phpjavascriptajaxjsonetsy

Incorporating JavaScript into a Node.js project's Jade template

I'm attempting to integrate JavaScript into a jade template page. The code I have written is: script(src='/public/javascripts/scr1.js') and the JavaScript file is located in that directory. Within the script, I have written alert("doesnt wor ...

javascriptnode.jsexpresspug

Tips for uploading images in Next.js using Firebase

While following a tutorial on Next.js, I encountered an issue with the outdated version of Firebase being used. Despite trying different solutions from the documentation and various sources, I am still facing an error message while attempting to upload ima ...

javascriptfirebasenext.jsfirebase-storage

Exploring file writing using Node Webkit and JavaScript

When developing my app, I encountered an issue with the 'fs' module not functioning as expected. Despite the code being written to write a file, nothing happens when the app is launched. However, if I start the app using the following command: $ ...

javascriptnode.jsnpmnode-webkit