Manipulating a base64 string when submitting to an action method in an MVC controller

I have some image content in a Base64string format that I want to post on my MVC controller, but for some reason it is not working:

 $.ajax({
                url: "FileUploadWithAjax",
                type: "POST",
                data: 'imageString=' + e.target.result,
                processData: false
            });

This is the code I am using to send data to the server.

https://i.sstatic.net/3aFbj.png

The data on the right side is what I see printed in the browser's console, while the left side shows the output from my controller's action method.

If you notice, every '+' sign seems to be replaced with white space characters. Is there something missing like contentType in the ajax call?

javascriptajaxasp.net-mvcbase64image-uploading

Answer №1

To resolve this issue, consider changing the dataType attribute to text.

$.ajax({
    url: "UploadFileUsingAjax",
    type: "POST",
    data: 'imageData=' + e.target.result,
    processData: false,
    dataType: 'text'
});

For troubleshooting, it is recommended to check the network console in your web browser to track where the data manipulation occurs.

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

What is the best way to send an Object to the page component while implementing Dynamic Routing in NextJS?

I am currently utilizing the "app" router within NextJS and aiming to implement Dynamic Routes in order to dynamically generate pages for blog posts. The issue I'm facing involves passing an Object to the dynamically created page, specifically a Post ...

javascriptnext.js

Encountering an error: "Unhandled promise rejection SyntaxError: Unexpected character in JSON data at line 1 column 1."

When the submit button is clicked, my registration form data is sent using an event function called postData() in React. The user data is sent at the register route, and I have mentioned line numbers in the comments: const postData = async(event) =>{ ...

javascriptjsonreactjsexpressmern

Is there a live password verification tool available?

Currently, I am conducting some initial research for my school's IT department as a student employee. The students at our institution are required to change their passwords every six months, but many of them struggle with the various password regulati ...

javascriptajax

What is preventing me from utilizing my JavaScript constructor function externally?

I have a question about how I create my object: var myViewModel = new MyViewModel("other"); Why am I unable to call myViewModel.setHasOne(value) from outside the viewmodel? Whenever I try, I encounter this error message: Uncaught TypeError: Cannot ca ...

javascript

When working on a Vue project, the Navbar @click functionality seems to

Having trouble with my navbar search form <form action="" method="post" class="search"> <input type="text" name="" placeholder="поиск" class="input" v-model="alls ...

javascriptvue.js

What is the process for retrieving my dates from local storage and displaying them without the time?

Having an event form, I collect information and store it in local storage without using an API. However, I face a challenge when extracting the startdate and enddate out of localstorage and formatting them as dd-mm-yyyy instead of yyyy-mm-ddT00:00:00.000Z. ...

javascriptjqueryhtmlangularjsdate

What could be causing the async request with await to not properly wait for the response data?

I'm having trouble with the await function in my code, can anyone provide assistance? I've followed tutorials and copied the code exactly as shown but it still doesn't work. The CardsID array needs to be filled before I call console.log(Card ...

javascriptajaxasynchronousasync-await

AngularJS initiates an XMLHttpRequest (XHR) request before each routeChange, without being dependent on the controller being used

I'm currently embarking on a new project, and for the initial phase, I want to verify if the user has an active session with the server by sending an XHR HEAD request to /api/me. My objective is to implement the following syntax $rootScope.$on("$rou ...

javascriptangularjs

Include a new row in the form that contains textareas using PHP

I'm trying to add a new row to my form, but I'm facing challenges. When I click the add button, nothing happens. If I change the tag to , then I am able to add a row, but it looks messy and doesn't seem correct to me. Here is my JavaScript ...

javascriptphphtmlformsrow

Extract TypeScript classes and interfaces from a consolidated file

I am seeking a way to consolidate the export of my classes, interfaces, and enums from multiple files into a single file. In JavaScript, I achieved this using the following method: module.exports = { Something = require("./src/something").default, ...

javascriptnode.jstypescriptecmascript-6module

Is there another method to retrieve event.target from a React functional component?

Currently, I am creating a form and obtaining input from a mui textfield. I have successfully stored the value of the textfield to a value object. To handle the key and value of the form fields, I have implemented an onValueChanged function. My goal is to ...

javascriptreactjsobjectdom

Customize cards in Bootstrap 4 using jQuery to apply filters

I am in the process of designing a webpage that will be filled with multiple cards, utilizing the new card component in bootstrap 4. My goal is to incorporate a search bar that filters out cards based on their titles when a search query is entered. Check ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-4bootstrap-4

Encountering CORS issues on Chrome while making AJAX calls to a Spring Boot server

I'm encountering some issues while attempting to locally run a Spring Boot application and make an AJAX request back to the app. Chrome is displaying the following error message (which is actually from jQuery): Failed to load localhost:8080/api/inpu ...

javajqueryajaxspringmaven

What is the best way to add elements with two attributes to an array in JavaScript?

Imagine trying to create the array structure shown below programmatically using the push() function in JavaScript: var arr = [ {id: 1, txt: "First Element"}, {id: 2, txt: "Second Element"}, {id: 3, txt: "Third Element"} ]; My initial attempt was as follo ...

javascriptarrays

Setting up and populating Identity's DbContext during application startup in App_Start

Currently, I am utilizing the most recent versions of MVC, Identity, and EntityFramework, as well as the official Identity sample solution. There are multiple methods to execute a database initializer in the App_Start(), such as (DropCreateDatabaseIfModel ...

asp.netasp.net-mvcasp.net-identity

Mobile Image Gallery by Adobe Edge

My current project involves using Adobe Edge Animate for the majority of my website, but I am looking to create a mobile version as well. In order to achieve this, I need to transition from onClick events to onTouch events. However, I am struggling to find ...

javascripthtmlcssimage-galleryadobe-edge

Retrieve session based on its unique ID

Currently, I am in the process of developing an Authentication and Membership system for my Web Application. This system is licensed to a specified number of users who are able to log on simultaneously. To achieve this, I have devised a plan to create an ...

asp.netasp.net-mvcsessionauthentication

What solutions are available for resolving the issue of automatic next click not working in the antd date time range

When I try to change the datetime in my Ant Design date time range picker, the month starts changing continuously. The initial selection works correctly, but subsequent changes trigger this issue. I managed to replicate the behavior here. Below is the co ...

javascriptreactjsantd

Is it possible to merge upload file and text input code using AJAX?

For my form submissions using jQuery and Ajax, I'm trying to figure out how to send both data and files together. Currently, I have the following code: $("#save-sm").bind("click", function(event) { var url = "sm.input.php"; var v_name_sm = $(&ap ...

javascriptjqueryajaxfile-upload

The React application is unable to communicate with my Express application in a production environment, despite functioning properly during development

Currently, I am attempting to make a basic get request to my express backend located at mywebsite.com/test. The expected response from the server should be {"test": "test"}. While this is working perfectly fine in development on localho ...

javascriptnode.jsreactjsexpressvps