Error encountered when deploying the app to the live server: 500 Internal Server Issue

I am encountering an issue with my ASP.Net web app's ajax file upload feature. While it works perfectly on my local host machine during testing, I face a 500 Internal Server error when I try to publish it to a website. The console output in Google Chrome shows the following:

POST http://switchclothing.andrewmwest.co.uk/StoreManager/UploadFiles 500 (Internal Server Error) jquery-2.1.0.min.js:4
l.cors.a.crossDomain.send jquery-2.1.0.min.js:4
o.extend.ajax jquery-2.1.0.min.js:4
send jquery.fileupload.js:834 
$.widget._onSend jquery.fileupload.js:896 
(anonymous function) jquery-ui-1.10.4.js:401 
data.submit jquery.fileupload.js:612 
(anonymous function) jquery.fileupload.js:180 
j jquery-2.1.0.min.js:2 
k.add.jquery-2.1.0.min.js:2 
$.widget.options.addjquery.fileupload.js:179 
$.Widget._triggerjquery-ui-1.10.4.js:785 
(anonymous function) jquery.fileupload.js:935 
o.extend.eachjquery-2.1.0.min.js:2 
$.widget._onAddjquery.fileupload.js:928 
(anonymous function) jquery-ui-1.10.4.js:401 
(anonymous function) jquery.fileupload.js:1105 
j jquery-2.1.0.min.js:2 
k.add jquery-2.1.0.min.js:2 
d.always jquery-2.1.0.min.js:2 
$.widget._onChangejquery.fileupload.js:1099 
(anonymous function) jquery-ui-1.10.4.js:401 
handlerProxyjquery-ui-1.10.4.js:702 
o.event.dispatchjquery-2.1.0.min.js:3 
r.handle jquery-2.1.0.min.js:3 

When clicking on the request URL, the browser page displays this error message:

The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Review the following URL and ensure it is spelled correctly.

Requested URL: /StoreManager/UploadFiles

Additionally, here is the code I have used:

[HttpPost]
public JsonResult UploadFiles()
{
var r = new List<UploadFilesResult>();

foreach (string file in Request.Files)
{
HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
if (hpf.ContentLength == 0)
continue;

string savedFileName = Url.Content(Path.Combine(Server.MapPath("~/Images"), Path.GetFileName(hpf.FileName)));

var path = GetNewPathForDupes(savedFileName);

hpf.SaveAs(path);

r.Add(new UploadFilesResult()
{
Name = "/Images/" + Path.GetFileName(path),
Length = hpf.ContentLength,
Type = hpf.ContentType
});
}
return Json(r);
}

private string GetNewPathForDupes(string path)
{
string directory = Path.GetDirectoryName(path);
string filename = Path.GetFileNameWithoutExtension(path);
string extension = Path.GetExtension(path);
int counter = 1;

string newFullPath;

do
{
string newFilename = "{0}({1}){2}".FormatWith(filename, counter, extension);
newFullPath = Path.Combine(directory, newFilename);
counter++;
} while (System.IO.File.Exists(newFullPath));

return newFullPath;
} 

Here is my HTML and JavaScript code:

$(document).ready(function () {
$('#fileupload').fileupload({
dataType: 'json',
url: "/StoreManager/UploadFiles",
autoUpload: true,
done: function (e, data) {
var json = data.result[0];

$("#picurl").val(json['Name']);

$('.file_name').html(json['Name']);
$('.file_type').html(json['Type']);
$('.file_size').html(json['Length']);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.progress .progress-bar').css('width', progress + '%');
});
});


@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
<h4>Footwear</h4>
<hr />
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.FootwearId)

<div class="form-group">
@Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Price, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Price)
@Html.ValidationMessageFor(model => model.Price)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.FootwearPicUrl, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.FootwearPicUrl, new { @id = "picurl", @readonly = "readonly" })
@Html.ValidationMessageFor(model => model.FootwearPicUrl)
</div>
</div>

...

<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input id="fileupload" type="file" name="files[]">
</span>
<br />
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only">0% complete</span>
</div>
</div>
...

Answer №1

Upon reviewing the server configurations, it became apparent that write permissions had been turned off. Once I re-enabled them, the AJAX upload feature started functioning correctly.

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

List the attributes that have different values

One of the functions I currently have incorporates lodash to compare two objects and determine if they are identical. private checkForChanges(): boolean { if (_.isEqual(this.definitionDetails, this.originalDetails) === true) { return false; ...

Sorting an array of numbers using Javascript

Does anyone know how to properly sort an array in JavaScript? By default, the sort method doesn't work efficiently with numbers. For example: a = [1, 23, 100, 3] a.sort() The sorted values of 'a' end up being: [1, 100, 23, 3] If you hav ...

The Importance of WordPress Nonces

My popular WordPress plugin, Ajax Load More, currently includes a security feature known as a nonce variable when making calls to admin-ajax.php on the front end. This helps protect URLs from potential misuse or malicious attacks. However, I have encounte ...

Troubleshooting Problem with Bootstrap CSS Menu Box Format

I'm having trouble creating a simple menu for my Bootstrap site. What I want to achieve is something like this: https://i.sstatic.net/abZXC.png This is what I have accomplished so far: https://i.sstatic.net/JFVC2.png I've attempted to write th ...

Utilize CountUp.js to generate a dynamic timer for tracking days and hours

I am looking to create a unique counter similar to the one featured on this website https://inorganik.github.io/countUp.js/ that counts up to a specific number representing hours. My goal is to display it in a format such as 3d13h, indicating days and hour ...

Ways to dynamically combine a group of objects

I'm grappling with a challenge involving an array containing two objects. After using Promise All to fetch both of these objects, I've hit a roadblock in trying to merge them dynamically. Despite experimenting with various array methods like map, ...

Displaying a pop-up window upon clicking on an item in the list view

After creating a list where clicking an item triggers a popup, issues arose when testing on small mobile screens. Many users found themselves accidentally tapping buttons in the popup while trying to view it. What is the most effective way to temporarily ...

Update the current value in array.prototype

Recently, I've noticed that the built-in JavaScript sort function can be unreliable at times. To address this issue, I decided to create my own sorting function. Consider the following scenario: Array.prototype.customSort = function(sortFunction, upd ...

Having issues with passing data correctly in a jQuery AJAX PHP login system

I am encountering a Failure object Object notification. Despite reviewing various examples, I am unable to pinpoint the error. My suspicion is that my AJAX setup is not configured correctly. The PHP code seems to be in order as it interacts with a local da ...

"Encountered an Ajax Error while appending request parameters to the same link during a

I can't figure out why my ajax request is sending to the same link instead of the specified url. It's only this ajax request on the entire page that is behaving strangely. Can anyone shed some light on this issue? $(document).ready(function(){ ...

Transmission of data between tabs within an AJAX tab container in ASP.net

In my ASP.net application, I have implemented tabpanels on a page. When a user clicks the submit button while on the first tab, the second tab control is displayed. Ontabindexchanged event, I am dynamically generating a usercontrol and passing values to it ...

What is the best way to trigger a child function from the parent component in React?

In my React application, there are three components: two child components and one parent component. I need to pass data (projectId) from ChildOne to ChildTwo through the Parent component and trigger a function once the data is received. Essentially, I am s ...

SinonJS - Retrieving Property Value Prior to Stub Invocation

Currently leveraging sinon.js for stubbing functionalities where it is feasible to stub and spy on methods but not properties based on my observations. I'm interested in knowing if there's a way to verify whether state.searchText gets assigned t ...

The Android WebView is unable to run JavaScript code in a local HTML file

Currently, I am attempting to load a local HTML file from the assets folder into a webview. Even though I can successfully load the HTML file in the webview, there seems to be an issue with the file's reliance on an external .js file for calculations. ...

How to properly handle file uploads and get the correct image path from Node Js (Express) to React Js?

Currently, I am working on my local system developing a file upload feature using node js. My project file structure looks like this: Project ..client .... source code of React App ..Server ....uploads ......avatar ........image.png ....index.js In this ...

Disable the draggable feature upon clicking the button

I am currently working on a code challenge where I need to disable the draggable functionality of all divs styled with .myDivs when the user clicks the 'Remove Draggable' button. You can view my progress in this JSFiddle: http://jsfiddle.net/adri ...

Effortless pagination across various pages, utilizing diverse CSS selectors

I've integrated simple pagination into my website, but I've encountered a issue. My navigation consists of CSS tabs, each holding a unique pagination component. Here is the jQuery pagination code snippet: $(function(){ var perPage = 8; var open ...

Ways to stop a JS plugin affecting HTML anchors and preventing them from automatically scrolling to the top

My friend is working on a website and he's using a plugin called Flip Lightbox. The basic functionality of the plugin is that when you click on an image, it flips over and pops out as a lightbox. Everything works fine, however, if you scroll down the ...

Reorganize the placement of table columns between different rows

I am currently using a software program that automatically generates a form based on the selected options. The code for this form is generated in tables, which I am unable to directly edit. However, I would like to have the Amount, radio buttons, and their ...

Maximizing the Use of Multiple Conditions for Styling in AngularJS

I have a table where I need to set different colors based on the values in one of the columns. I've successfully managed to set two colors using NgClass, but I'm unsure how to set up three different conditions. <scri ...