0

I am trying to upload file using Dropzone. The upload call being made to a Web Api service. But, the browser returns the following issue "XMLHttpRequest cannot load http://localhost:444/api/Controller/Upload/xyz123. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:53006' is therefore not allowed access. The response had HTTP status code 404.".

Below listed my file upload implementation code. Any suggestion is appreciated.

var myAwesomeDropzone = new Dropzone("#dropzoneForm", {
            acceptedFiles: "application/pdf",
            header: {
                'Authorization': authorizationToken,
                'Cache-Control': null,
                'X-Requested-With': null
            },
            init: function () {
                this.on("processing", function (file) {
                    console.log(app);
                    this.options.url = apiBaseUrl + "/Controller/Upload/" + id;
                });
                this.on("addedfile", function (file) {
                    console.log("added file");
                });
                this.on("success", function (file) {
                    console.log("successfully uploaded file");
                });
            }
        });

HTML code:

<form action="http://BaseUrl/Controller/Upload" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
        <div><span>Click here or drag files to upload</span></div>
        <div class="fallback">
            <input name="file" type="file" multiple />
            <input type="submit" value="Upload" />
        </div>
    </form>

Server side code:

    [System.Web.Http.HttpPost]
    public async Task<IHttpActionResult> Upload(Guid id)
    {
      // Upload file
    }
Satya Ranjan Sahoo
  • 1,086
  • 7
  • 24
  • "The response had HTTP status code 404" — What's unclear about that? You put the wrong URL in. – Quentin May 16 '16 at 15:38
  • Url part is correct. In my code here I have modified the URL to hide the exact one. All I am getting is No 'Access-Control-Allow-Origin' header is present on the requested resource. – Satya Ranjan Sahoo May 16 '16 at 15:42
  • "Url part is correct" — That is not all you are getting. The error message says it is a 404 error! 404 errors mean "Not Found"! (But if you insist that is that has nothing to do with the problem, I'll just close it as a duplicate instead). – Quentin May 16 '16 at 15:45
  • Exactly that's surprises me! For few files the action method gets hit while debugging. Even in that case the same 'Access-Control-Allow-Origin' error message appears with 500 status. – Satya Ranjan Sahoo May 16 '16 at 15:47

0 Answers0