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>
...