Hey All,

So I've been asking a few people around Twitter and Slack and I've manged to get so far with their wonderful help but I think I'm missing something.

I've created a content app, but part of the requirement for it is that editors can use it to upload data which is then stored into a custom DB table. The Content app is for view this data as is directly relates to this specific page type.

In my content app index.html I have the following:

<div class="club-import" style="position:relative;">
    <div class="umb-pane">
        <div name="uploadClubData">
             <umb-load-indicator ng-show="vm.isUploading"></umb-load-indicator>
             <div ng-show="!vm.isUploading">
                 <umb-control-group label="Select the files to upload" hide-label="false" class="filename-field">
                     <umb-single-file-upload rebuild="rebuildInput"></umb-single-file-upload>
                 </umb-control-group>
                 <div class="alert alert-danger" ng-show="vm.fileError">
                        Invalid file extension. Only files with the extension .json are allowed.
                 </div>
                 <button type="button" ng-click="vm.upload()" data-element="toureditor-uploadfile" class="btn btn-primary" ng-disabled="!vm.canUpload">Upload</button>
              </div>
          </div>
       </div>
    </div>

Which is a replication of code from Dave Woestenborghs wonderful Tours Editor ( https://github.com/dawoe/umbraco-tour-editor/blob/develop/Source/Our.Umbraco.TourEditor/Web/App_Plugins/TourEditor/backoffice/toureditor/upload.html )

In my controller I have the following:

function myController($scope, notificationsService, importerResource) {
    var vm = this;

    function init(){
         vm.canUpload = false;
         vm.fileError = false;
         vm.isUploading = false;
         vm.upload = upload;

         //listen for when a file is selected
        $scope.$on("filesSelected", function (event, args) {
            vm.canUpload = false;
            if (args.files.length <= 0 || $scope.processing) {
                vm.file = null;
                return;
            }
            $scope.noFile = false;
            var file = args.files[0];
            var extension = file.name.substring(file.name.lastIndexOf(".") + 1, file.name.length).toLowerCase();
            if (extension !== "csv") {
                $scope.invalidFileFormat = true;

                $timeout(function () {
                    $scope.rebuildInput += 1;
                    vm.file = null;
                    $scope.invalidFileFormat = false;
                }, 1000);
                return;
            }
            vm.canUpload = true;
            vm.file = file;
        });
    }

    function upload(e) {             
        if (vm.file !== undefined) {
            vm.isUploading = true;            
            importerResource.uploadData(vm.file).then(
                function (data) {
                    notificationsService.success('File uploaded succesfully');
                    vm.isUploading = false;
                },
                function (err) {                        
                    notificationsService.showNotification(err.data.notifications[0]);
                    vm.isUploading = false;

                });
        }
    }        

    init();
}

And then I have a resource that looks as follows:

 function clubImporterResource($http, umbRequestHelper) {
    var apiUrl = Umbraco.Sys.ServerVariables["ClubData"]["DataApiUrl"];
    var resource = {
        uploadData: uploadData
    };

    return resource;

    function uploadData(file) {
        return umbRequestHelper.resourcePromise(
            $http({
                method: 'POST',
                url: apiUrl + "UploadClubData",
                // If using Angular version <1.3, use Content-Type: false.
                // Otherwise, use Content-Type: undefined,
                data: file,
                transformRequest: function (data) {
                    var formData = new FormData();
                    formData.append('file', data, data.name);
                    return formData;
                },
                headers: { 'Content-Type': undefined }
            }),
            "Failed uploading Club Data"
        );
    }

}

The idea being that this is uploaded to a custom API end point.

So there are 2 strange things happening.

1) After the "filesSelected" event triggers and runs, the input control looses the name of the file. Having stepped through the code, it appears to be there after my handler for filesSelected finished running but after it finished propagating up it suddenly disappears (no idea why)

2) When I hit the "transformRequest" method in the resource it is throwing a "Illegal invocation" error which I don't understand.

Following on from this, I've also tried replacing my upload method in my controller to us the same code here: https://t.co/3YjpdMAQjG

This has gotten me able to upload files to my API controller (solving question 2) .. however I still have weird behaviour for question 1....

Anyone got any ideas?

Nik