Error Occurred while Uploading Images using Ajax HTML Editor with JSON Data

I am facing an issue with my AJAX HtmlEditorExtender, specifically when trying to upload an image. The error message I receive is as follows:

JavaScript runtime error: Sys.ArgumentException: Cannot de-serialize. The data does not correspond to valid JSON. Parameter name: data

After researching the error, some sources suggested that it could be due to passing parameters through the query string. I removed the parameters, but the error persists. Are there any other potential reasons for this problem?

Interestingly, the same Html Editor Extender functions correctly on another page of mine.

Below you can find the HTML and C# code snippets:

<asp:HtmlEditorExtender ID="HtmlEditorExtender3" runat="server" TargetControlID="txtAdminAddNote" OnImageUploadComplete="MyHtmlEditorExtender_ImageUploadComplete">
            <Toolbar>
            <asp:InsertImage />
            </Toolbar>
            </asp:HtmlEditorExtender>

<asp:TextBox runat="server" ID="txtAdminAddNote" TextMode="MultiLine" Width="96%" Height="200px"></asp:TextBox>  

protected void MyHtmlEditorExtender_ImageUploadComplete(object sender, AjaxFileUploadEventArgs e)
    {
        string filePath = "~/Images/" + Path.GetFileName(e.FileName);

        var ajaxFileUpload = (AjaxFileUpload)sender;
        ajaxFileUpload.SaveAs(MapPath(filePath));

        e.PostedUrl = Page.ResolveUrl(filePath);
    }

Answer №1

This particular issue has been resolved in this forum thread (quoted below):

Based on the description and error message provided, it appears that you have the HtmlEditorExtender control within a Panel control that is initially hidden.

When it comes to uploading an image file, both HtmlEditorExtender and AjaxFileUpload function in a similar manner.

If this scenario applies to your situation, please refer to the following link for more information.

The root cause of the problem was identified as the HtmlEditorExtender control being unintentionally hidden (its parent control had visibility set to false) during a crucial stage of the upload process, causing incorrect processing.

To resolve this issue, try relocating the HtmlEditorExtender control outside of any parent controls that may potentially be invisible, and verify if the problem persists.

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

Caught an error: Unlawful invocation encountered during AJAX transmission

Currently, I am storing the checked inputs in a variable named reasons. My objective is to send both the withdrawalId and reasons through an AJAX request with the following code: $('body').on('click','#submitreason', function ...

Exploring DC2type with greenDao

In my Android application, I am currently using GreenDao and have a Contact Model with fields such as name, avatar, and phone number. The current requirement is to change from having only one phone number per contact to multiple phone numbers. Instead of ...

Tips for showing menu only when a user scrolls on your WordPress site

I've been working on creating an effect where the menu stays hidden until the user starts scrolling. However, I can't seem to figure out why my code is not producing the desired effect. Here is the jQuery code snippet I am using: <script src= ...

Ways to refresh a page after clicking a button inside the modal box

As a beginner in PHP and JavaScript, I am facing an issue with refreshing the page view_create_journals.php when clicking on the change button in the modal. I have added a function to the change button but it doesn't seem to be working. I'm reall ...

What is the technique for accessing dynamic object properties in Javascript?

I am dealing with a dynamic object where the property values change based on different data sets. For example: MyObj = { country:"Ind", Place:"Pune"} Now, I have a data value that determines which property value I need to retrieve. var MyArr = this.Filt ...

`Need to clean parameters for safe use in JavaScript code?`

I am working with the php code below: <?php $redirect_lp = $_GET['lp']; ?> <script> setTimeout(function(){ window.location.href = "<?php echo $redirect_lp; ?>"; }, 10) </script> How can I properly sanitiz ...

Disregard the popstate triggered by Safari's Initial Page Load

Utilizing pushState, I am able to generate the page view on popstate events based on the history.state of the current page. In cases where there is no history.state present, my intention is to reload the document (hopefully). window.onpopstate = function ...

The completion of f:ajax does not result in the update of t:dataTable

Hi, I'm experiencing an issue with my JSF search command button and tomahawk dataTable. The problem arises when I click on the command button, as the dataTable fails to display the search result. It seems like this is happening because of the implemen ...

Enrich PowerShell with additional JSON functionality

Does anyone know of a straightforward method to merge one JSON file with another and save the combined output to a new file using PowerShell? I am currently working on creating a recursive function for this purpose, but I'm wondering if there is a sim ...

Protractor - selecting a hyperlink from a list

Imagine you have a todo application with tasks listed as follows: Walk the dog, Eat lunch, Go shopping. Each task has an associated 'complete' link. If you are using Protractor, how can you click on the 'complete' link for the second t ...

State in Vuex is failing to update effectively when actions are being utilized

I'm trying to wrap my head around VueX, but I'm having trouble getting Axios to work with it. In my store.js file, I have the following setup: state: { cards: [], currentPage: 1, lastPage: 2, }, actions: { loadGradients(page ...

Adjust the height and width controls in the Ui Cropper

I am currently utilizing AngularJS and I have a requirement to crop images, so I decided to use the ui-cropper library. Here is where I found my inspiration: https://codepen.io/Crackeraki/pen/zvWqJM This is the code snippet I am working with: <div&g ...

Error encountered when attempting to use the submit button in AngularJS

My goal is to create a simple Angular application that takes input of two numbers (n1 and n2) and then prints their sum. I have integrated Bootstrap for styling, but noticed that nothing was happening upon submission. To troubleshoot, I added an alert() fu ...

Are there any methods available to adjust the size of a View component in react-native?

My react-native application includes a View that contains several components. The layout displays perfectly on iPhone 6 and 5 models, but on an iPhone 4s, the bottom of one component is being clipped slightly. I'm aware of scaling base64 icons, but I ...

Attempting to access a variable without wrapping it in a setTimeout function will

I have a form without any input and my goal is to automatically set the "responsible clerk" field to the currently logged-in user when the component mounts. Here's what I have: <b-form-select v-model="form.responsible_clerk" :op ...

Tips for overcoming a script error within the body of a Next.js project

I encountered an error in my _document.js file when trying to add a script to the body of my document. Here is the specific error message that was returned: https://i.stack.imgur.com/QG5zb.png ./pages/_document.js Error: x Expected '}', got &a ...

Angular 6 - Outdated Functions

I'm having trouble updating the request options as they are now deprecated. I can't seem to locate the alternative option for this. Can anyone offer some assistance? import { Injectable } from '@angular/core'; import { HttpClient } fr ...

Displaying dates on the Amcharts category axis for instances with empty data

I am currently creating a fruit consumption chart for each day, and so far everything is working correctly in the provided example. var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "hideCredits": true, "fixedColumnWidth": '10px& ...

What are the potential drawbacks of relying heavily on socket.io for handling most requests versus using it primarily for pushing data to clients?

Is it advisable to switch AJAX routes (called with $.Ajax in jquery) like: GET /animals GET /animals/[id] POST /animals To socket.io events (event bound on client and server for client response): emit("animals:read") emit("animals:read", {id:asdasd}) ...

I'm having trouble installing puppeteer

I tried running the command npm i --save-dev puppeteer to set up puppeteer for e2e testing. Unfortunately, an error occurred during installation: C:\Users\Mora\Desktop\JS\Testing>npm i --save-dev puppeteer > <a href="/cd ...