404 error in calling ashx handler of Web Api

Question

I have an ImageUploadHandler.ashx handler in my WebApi Project. Source code is available here. I am trying to call my handler from my AngularJs project. Here is the code:

 var serviceBase = 'http://baseDomain/';
var plupload = null;
$scope.uploadedFiles = [];

$scope.fileUpload = {
    url: serviceBase + 'ImageUploadHandler.ashx',
    options: {
        multi_selection: true,
        drop_element: "pluploadDropzone",
        chunk_size: '200kb',
        runtimes: 'html5,flash,silverlight,html4',
        browse_button: "pluploadDropzone",
        container: "pluploadContainer",
        max_file_size: '3mb',
        mime_types: [{ title: 'Allowed', extensions: 'jpeg, jpg, png, gif' }]
    },
    callbacks:
    {
        filesAdded: function (uploader, files) {
            plupload = uploader;

            for (var i = 0 ; i < files.length ; i++) {
                var file = files[i];
                $scope.uploadedFiles.push(file);
                plupload.start();
            }
        }
    }
}

Html:

<div id="pluploadContainer" class="uploader">
 <a ng-hide="uploadedFiles.length >= 10" id="pluploadDropzone"
    plupload="fileUpload.url"
    plupload-options="fileUpload.options"
    plupload-callbacks="fileUpload.callbacks"
    class="dropzone html5Dropzone" style="width: 464px;">
          <span ng-hide="uploadedFiles.length >= 10" class="instructions html5Instructions">
                Drag &amp; Drop Your Files Here!
          </span>

   </a>
   <div class="m-images">
        <ul class="images">
            <li ng-repeat="file in uploadedFiles" class="image">
                <div class="thumbnail">
                      {{ file.name }}
                 </div>
             <a ng-click="deleteImage(file)" class="delete">&times;</a>
             </li>
        </ul>
   </div>

I am getting 404 error while calling this handler, Here is the error snapshot:

http://stackoverflow.com/questions/11233367/cannot-post-to-ihttphandler-class-origin-not-allowed-by-access-control-allow-or — MethodMan, Sep 11 '15 at 20:27
@UsmanKhalid - For that answer to work, you need at minimum IIS Express (or IIS). I don't believe that will work with the Visual Studio Development Server because it does not read the `` section of `Web.config`. — NightOwl888, Sep 11 '15 at 23:55

score 0 · Answer 1 · answered Sep 12 '15 at 08:10

This did the trick:

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ClearHeaders();
            string origin = context.Request.Headers["Origin"];
            context.Response.AppendHeader("Access-Control-Allow-Origin",
                string.IsNullOrEmpty(origin) ? "*" : origin);
            string requestHeaders = context.Request.Headers["Access-Control-Request-Headers"];
            context.Response.AppendHeader("Access-Control-Allow-Headers",
                string.IsNullOrEmpty(requestHeaders) ? "*" : requestHeaders);
            context.Response.AppendHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
        }

Plus I have to register my handler in web.config

<system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules runAllManagedModulesForAllRequests="true">
    </modules>
    <handlers>
        <add name="ImageUploadHandler" verb="*" path="ImageUploadHandler.ashx" type="JetAdz.WebApi.ImageUploadHandler, JetAdz.WebApi, Version=1.0.0.0, Culture=neutral" />
    </handlers>
</system.webServer>

404 error in calling ashx handler of Web Api

1 Answers1