I'm trying to implement file uploading using FineUploader. Everything is working except the actual upload - when I select a file, it is instantly added to the page saying "Upload failed". Looking at the Network tab in Firefox's inspector, no POST request is even happening, and I'm getting an error message from FineUploader saying the response is not valid JSON (go figure).
Here's my client-side (partial) view:
<div id="fine-uploader"></div>
@* This section is rendered into the page header *@
@section Scripts {
<script src="/Scripts/fine-uploader/jquery.fine-uploader.js"></script>
<link href="/Scripts/fine-uploader/fine-uploader-new.css" rel="stylesheet" />
@* The following template is copied from the Validation example at https://fineuploader.com/demos.html in the jQuery tab *@
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Select files</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
<li>
<div class="qq-progress-bar-container-selector">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
}
<script>
$("#fine-uploader").fineUploader({
template: "qq-template",
request: {
// Generates the following absolute URL (have also tried relative, neither work)
// http://localhost:49450/MyController/UploadFile
endpoint: "@Url.Action("UploadFile", "My", null, Request.Url.Scheme)"
},
debug: true,
thumbnails: {
placeholders: {
waitingPath: "@Url.Content("~/Scripts/fine-uploader/placeholders/waiting-generic.png")",
notAvailablePath: "@Url.Content("~/Scripts/fine-uploader/placeholders/not_available-generic.png")"
}
},
validation: {
allowedExtensions: ["jpg", "png"],
sizeLimit: 1048576 // 1 MB = 1024 * 1024 bytes
},
text: {
fileInputTitle: ""
}
});
</script>
And my MVC 4 controller code (FineUpload is a class from the nuget package of the same name):
public class MyController : Controller {
// This method is never being hit
[HttpPost]
public FineUploaderResult UploadFile(FineUpload qqfilename) {
return new FineUploaderResult(true);
}
}
And here's Firefox's console log after attempting an upload (I've omitted all the success messages preceding this regarding thumbnail loading etc.):
[Fine Uploader 5.16.2] Sending simple upload request for 0
util.js:236:16
[Fine Uploader 5.16.2] xhr - server response received for 0
util.js:236:16
[Fine Uploader 5.16.2] responseText =
util.js:236:16
[Fine Uploader 5.16.2] Received response status 0 with body:
util.js:236:16
[Fine Uploader 5.16.2] Error when attempting to parse xhr response text (JSON.parse: unexpected end of data at line 1 column 1 of the JSON data)
util.js:241:20
[Fine Uploader 5.16.2] Simple upload request failed for 0
util.js:236:16
The code looks fine to me but the network activity log shows no POST requests are being made at all. Why would that be?
Finally fixed this. Turns out it was a problem with the AdBlock extension - disabling it fixed the issue. Of course that's not a real solution, as lots of people use AdBlock, so I found that by changing the request endpoint to the controller's Index page (/My/Index) it would hit that method successfully (and return the markup in the responseText = line), so I just called my upload method Index (which is allowed by MVC since the upload method responds to POST and the actual index responds to GET) and ta-da, everything worked.
Weirdest bug ever.