Hello,
I am using third party Fileupload control to upload file by ajax call in mvc4.
It works fine on local, but when I uploads website on IIS 7, it gives error 404 Not found.
It searches for
http:IpAddress:PortNumber/api/upload which is missing Virtual directory name from ajax call.
My partial view is
<form action="/api/upload" enctype="multipart/form-data">
<table width="100%">
<tr>
<td>
<table width="100%" >
<tr>
<td width="30%" class="td_label" style="vertical-align:top">
<sapn class="_form_control_font">@Resx.LabelStrings.UserFormProfilePicture</sapn>
</td>
<td align="right">
<table width="100%">
<tr>
<td width="70px">
<button id="btnfileupload" style="cursor:pointer" type="button" >@Resx.LabelStrings.userbuttonBrowse</button>
<input type="file" id="fileupload" name="fileupload" class="button" style="display:none" accept="image/x-png, image/gif, image/jpeg, image/png, image/jpg" onchange="PreviewImage();">
</td>
<td>
<button id="btnUploadAll" type="button">@Resx.LabelStrings.UserFormButtonUpload</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="52px" align="center">
<img src="Images/user1.png" id="uploadPreview" style="width: 50px; height: 50px;" />
</td><td>
<div class="progress">
<div class="bar" id="overallbar" style="width: 0%"></div>
<div id="progessNumber" class="_form_control_font"></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
My javascript code in view
$(function () {
debugger;
var fileobj={
dataType: "json",
url: "/api/upload",
limitConcurrentUploads: 1,
sequentialUploads: true,
progressInterval: 100,
maxChunkSize: 100000000,
add: function (e, data) {
debugger;
$('#filelistholder').removeClass('hide');
data.context = $('<div />').text(data.files[0].name).appendTo('#filelistholder');
$('</div><div class="progress"><div class="bar" style="width:0%"></div></div>').appendTo(data.context);
$('#btnUploadAll').unbind();
$('#btnUploadAll').click(function () {
debugger;
CountFiles();
var goUpload = true;
var err = "";
var uploadFile = data.files[0];
if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) {
err = 'You must select an image file only';
openpopup.initPopup({
popupType: "Warning",
desc: err
});
goUpload = false;
}
if (uploadFile.size > 2000000) {
err = 'Please upload a smaller image, max size is 2 MB';
openpopup.initPopup({
popupType: "Warning",
desc: err
});
goUpload = false;
}
if (goUpload == true) {
data.submit();
} else {
}
});
},
done: function (e, data) {
data.context.text(data.files[0].name + '... Completed');
$('</div><div class="progress"><div class="bar" style="width:100%"></div></div>').appendTo(data.context);
$('#progessNumber').text('100%');
}
,
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#overallbar').css('width', progress + '%');
$('#progessNumber').text(progress + '%');
},
success: function (data,e) {
if(data.VirtualFilePath != null){
UploadFile(data.VirtualFilePath);
}else{
UploadFile("Images/user1.png");
}
$('#progessNumber').text('100%... Completed');
$(this).fileupload('destroy');
$(this).fileupload('enable');
}
};
$('#fileupload').fileupload(fileobj);
});
My ApiControllers code is
public class UploadController : ApiController
{
// Enable both Get and Post so that our jquery call can send data, and get a status
[HttpGet]
[HttpPost]
public HttpResponseMessage Upload()
{ // For compatibility with IE's "done" event we need to return a result as well as setting the context.response
return new HttpResponseMessage(HttpStatusCode.OK);
}
Please help me out, Im getting this problem from last two days.
Thank You in advance..............