Try removing the action-attribute instead of that thing.

Also, you can add your event-handler via an onsubmit-attribute to elimate your event wiring from being wrong / called / not called

Hi Owain,

Mixing Angular and jQuery together should generally be avoided. For instance the call with $.ajax happens outside of Angular's context, so if you update something in your model once the $.ajax completes, Angular won't know about it right away. This could for instance mean that the UI isn't updated right away either.

There are a few tricks that lets you tell Angular that your model has been updated, but luckily Angular also comes with a service for making HTTP request - it's called $http and works similar to jQuery's $.ajax.

Your view from your example didn't specify a controller, but you probably have this somewhere. To get it up and running on my machine, I ended up with the following (pretty much the same):

<div ng-controller="OwainDashboard">
    <div class="umb-pane">
        <label>
            <span>Add or Update Csv:</span>
            <input type="file" name="File" />
        </label>
        <button type="submit" class="btn umb-button__button btn-success" ng-click="upload()"><span>Upload</span><div class="spinner"></div></button>
    </div>
</div>

The changes instead lies in the controller. Besides $scope, I've included the $element and $http resources.

$element is a reference to the element which holds the ng-controller attribute. It's a Angular selection, so we need to call $element[0] to get the actual HTML element, which we can then use for finding the file input field.

$http is like mentioned earlier a resource/service in Angular used for making HTTP requests. Uploading is a little special, so we need to configure it to our needs. Here is a why the code looks like it does:

• FormData is a special class in JavaScript (won't work in IE9) that is particular useful for representing POST data - including file uploads. In this case we only append the file, but you could append regular POST data as well.

• When making a POST request with one or more files, the content type of the request must be multipart/form-data, but using this content type you must already specify a boundary (which is basically a separator). Luckily we can set the content type to undefined instead, and the $http resource will take care of the rest. Then you don't need to worry about setting the correct content type and boundary.

• the $http resource will normally try to transform/encode the data you give it, which we don't really want in this case. We can control this via the transformRequest field. angular.identity is a special function that simply returns back the value you specify as the first argument, so using it here, the transformation will simply return the input value - meaning it isn't changed.

So to summarize this, my controller ended up looking like this:

angular.module("umbraco").controller("OwainDashboard", function ($scope, $element, $http) {

    // Get a reference to the file input field
    var input = $element[0].querySelector("input[type=file]");

    $scope.upload = function () {

        // Ignore if no files has been selected
        if (input.files.length === 0) return;

        // Get the file object
        var file = input.files[0];

        // Use form data to send multipart POST data
        var formData = new FormData();
        formData.append("file", file);

        // Upload the file using $http
        $http({
            method: "POST",
            url: "/umbraco/api/Hest/Upload",
            headers: { "Content-Type": undefined },
            transformRequest: angular.identity,
            data: formData
        }).success(function () {
            // Yeah
        }).error(function () {
            // Oh noes
        });

    };

});

Try going to yoursite.com/umbraco/api/csvupload/get and see what you get, if you get a 404, it means the controller is not setup correctly or it has not built properly

Aslong as your controller is inheriting UmbracoApiController or UmbracoAuthorizedApiController then it will get auto routed, so your url is correct.

Also check that you have the [HttpGet] data annotation above your method name

I'm wondering if the issue is that my c# controller is in a different project? Site.Core but I don't think it should really cause an issue.

This is really annoying me now as I think I'm pretty close.

Thanks for all your help Louis and Anders :)

As Louis mentions, Umbraco should handle the routing - at least most of the ways.

If you inherit from UmbracoApiController (as in my example), the URL will be /umbraco/api/{controller}/{method}. Inheriting from this class will however mean that the controller is public.

So for something that is only used in the backoffice, you should use UmbracoAuthorizedApiController instead. This changes the URL a bit, so it will now be /umbraco/backoffice/api/{controller}/{method} instead.

Umbraco/WebApi will automatically create routes for methods that start with the HTTP verb they are for. So a method called GetProduct will automatically have a route when using GET, but not POST.

In my example, I had added the [HttpGet] attribute, which is actually wrong, as uploading a file should be a POST request. But WebAPI probably also automatically creates a route for a method called Upload.

Btw - if you can post the controller you have so far, I can try have a look and see if I can spot why it's not working.

That the controller is defined in another project shouldn't be a problem as long as the web project references the project with the controller.

Try changing the content of your controller method to this as per Anders' example:

HttpPostedFile file = HttpContext.Current.Request.Files["file"];

Still getting the 404, it just can't find my controller - might move it in to a controller folder in the main project and see if that helps.

Try changing so that your controller inherits from UmbracoAuthorizedApiController instead of UmbracoApiController.

The /backoffice/ part in your URL means that it should be UmbracoAuthorizedApiController.

Sorry, thought I'd changed that. Changed it now, cleared my cache etc and still getting a 404 error.

So, after a screenshare with Nik, my main issues was the missed reference as you said Anders. I was 100% sure I had set that up so hadn't checked it again. Sorry to have wasted your time.

Now at least the controller is being hit and I can hopefully go about reading the file in and parsing it in to a DB.

Thanks for all your help.

Hi,

I think this is already sorted, but I've just added a file upload example to my DoStuffWithUmbraco Repo which might help with the file upload bit - it took me agest the first time to navigate all the controls for this, but when you find them lots of bits exist in Umbraco.

https://github.com/KevinJump/DoStuffWithUmbraco/tree/master/Src/DoStuff.Core/FileUpload

is working on a reply...