When you try to upload a file, the size of the AJAX request ends up significantly larger than the file's original

Currently, I have a basic file upload feature set up using knockout within my durandal website. The process involves converting the file to a base64StringArray and then uploading it to the server using an AJAX post method like this:

$.post("localhost/uploadDocument", dataToPost)

In my application, I have implemented request filtering with the following configurations:

<requestLimits maxAllowedContentLength="31457280" />

along with

<httpRuntime targetFramework="4.5.2" maxRequestLength="30720" />

This setup enforces a 30mb file size limit.

The issue arises when trying to upload a specific Microsoft Excel file that contains embedded PDF files. This particular file has a size of 14,887,424 bytes, but upon upload, Fiddler reports that 49,158,346 bytes were actually transmitted, resulting in a 404.13 error - indicating that the request content length has been exceeded.

I am puzzled as to why such a large number of bytes are being sent for this Excel file with embedded PDFs.

Answer №1

To reduce the size of the string on the client side, I recommend utilizing LZW compression as demonstrated in this example:

After compressing the data on the client side, you can then decompress it on the server side and perform any necessary validation procedures, such as checking the file size.

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

Exploring the possibilities: Iterating through JSON elements using jQuery

This is the data file I am currently working on ?( { "title":"1", "description":"description", "site":"site", "image_s":"/Becki.jpg", "image_l":"aurel" }, {    "title":"2",    "description":"2",    "site":"1",    "image_s": ...

Encountering Issues with Loading Stripe Checkout Session Window

My register process involves a two-step procedure where a user fills out a web form to create a user account and then gets redirected to a Stripe checkout page for payment details. However, I'm encountering an issue with the Stripe Checkout window not ...

The session feature in Express is malfunctioning

Incorporating express-session into my app, I attempted the following proof of concept (POC):. server.js app.use(session({ secret: 'pal!lap789', // create new redis store. store: new redisStore({ host: 'localhost ...

Assigning an identification number to specify the type of Chip

I am currently working on a project involving Material UI "Chips" that contain text and serve as references. Within the context of my project, I have Chips for both White Advantages and Black Advantages sections. However, there are instances where these Ch ...

Learn the process of appending an item to a list using Vue.js

Recently starting with vue.js and facing an issue: data: { ws: null, newMsg: '', username: null, usersList: '' }, created: function() { var self = this; this.ws = new We ...

What is the best way to add a new key to a .json object using JavaScript?

I am working with a hi.json file that contains an object. In my JavaScript code, I import this JSON file like so: var obj = require("hi.json"); Now, I need to figure out how to write data into the JSON file programmatically using JavaScript. Is it possib ...

The Three.js OBJMTLLoader seems to have trouble loading textures from .mtl files

Having trouble with the OBJMTLLoader? While it successfully loads the model, the diffuse and specular maps are not loading. Below is the code snippet: .js file var loader = new THREE.OBJMTLLoader(); loader.load( 'models\\Stop_t ...

Passport verification is successful during the login process, however, it encounters issues during registration

I am currently learning about passport.js and session management, and I'm in the process of implementing a local login feature on my website. Here is what I am attempting to achieve: Secret page: Authenticated users can access the secret page, while ...

Using VUEJS to pass the value of a JavaScript button

I am having difficulty passing the value of a button to a function when it is clicked. These buttons were dynamically created using JavaScript, which complicates the process. methods:{ createButtons() { var i; var rows ...

Banning the use of server-side rendering | Advantages and Disadvantages

My PHP server has transitioned to just being a data pump, while HTML is now composed on the client side using JavaScript. Advantages Reduces network load by sending raw data instead of HTML Lowers server load as it does not have to handle HTML compositi ...

The header that sticks on scroll is annoyingly blocking the content

I managed to create a sticky on-scroll header/navigation bar successfully. Here is how it looks now However, I encountered an issue. When it reaches the top, it automatically 'covers' the top part of my content, which has text on it, and I don& ...

Incorporating the elements of an array into an unordered list for a formatted list display

I have a list here <ul> <li> This is</li> <li> a very nice</li> <li> list</li> </ul> This is a very nice list and this code to insert the array elements into the list var names =["tom", " ...

Is there a way to retrieve the PDF file created using the html-pdf-node library in conjunction with Node.js, React JS, and

Currently, I am receiving a response from the backend. My goal is to enable users to download the generated PDF from the frontend by simply clicking on the Export button. Here's my Export button click handler code: const handleExportProjectData = () = ...

Is my HTML <h1> text not updating properly? I'm wondering if I linked app.js correctly

I'm currently learning the basics on a new machine and facing an issue where I am unable to modify the text within the header. It appears that the app.js file might not be properly connected to my index.html file. Within the app.js file, I have the f ...

Employing lodash for object comparison and removal from an array

In my current project, I am using lodash to compare two arrays of objects and extract the differences between them. The goal is to add this difference to the original data set while maintaining the existing data intact. For instance, if there are initially ...

Tips for displaying the date in 13-digit Unix Timestamp format using JSpreadSheet

I am faced with a challenge involving data that is stored in Unix Timestamp format, which I need to display as a readable date (e.g. YYYY/MM/DD) in JSpreadSheet ("jspreadsheet-ce"). Currently, the data appears as a 13-digit number and looks unattractive. ...

Is React the ideal choice for implementing a shared state subscription mechanism in your project?

Trying to determine if this falls under the "pub/sub" pattern or a variation of it. The goal is to establish a shared state where different components can subscribe to it and only receive updates when the state changes. const useForceUpdate = () => useR ...

What makes it impossible to use var instead of let in ngFor?

My understanding is that in JavaScript, we typically use var and let for variable declarations. The main difference between the two is that var is scoped to the current function, while let is scoped to the current block. Therefore, theoretically I should b ...

JavaScript function failing to validate password

While engaging in an online game where the objective is to uncover a password by inspecting the page source or element, I encountered a puzzling line: if(el.value == ""+CodeCode+""). My assumption is that el.value represents my guess, and it indicates that ...

Encountering a typeError in Angular when running the test suite: the function map is not recognized for the provided options.astTransformers array

Encountered an error when running jest test cases in Angular. All of the test suites are failing due to this issue. The error message typeError: (options.astTransformers || []).map is not a function is displayed during the execution of the test suite in A ...