Importing Files Using Angular.js and C#

Question

I am building an Umbraco7 Package and I'm at a bit of a standstill. I have very little experience with Angular and C# and what I'm trying to do is add an import option where a backoffice user can import an xls file and populate an existing database table with the xls contents.

This is what I have so far, I'm not sure how to get it to save the file in the firs place, let alone extract the values from the xls file.

HTML

// This is the view (table.html)
// Excluding the export blank xls file table.

<div class="import-div">
    <input type="file" name="MyFile" />
    <input type="submit" class="btn btn-danger" ng-click="ButtonClickHandler()" />
</div>

Angular.Js Controller file

// Here is my js controller file:

    angular.module("umbraco")
        .controller("ImportCtrl", function ($scope, keyResource) {
            $scope.ButtonClickHandler = function () {
                console.log("I was clicked!");
            };
        });

C# Controller

    //This is the C# controller.

        using AngularUmbracoPackage.Models;
        using System;
        using System.Collections.Generic;
        using System.Linq;
        using System.Web.Mvc;
        using System.Web.Security;
        using umbraco.cms.businesslogic.member;
        using Umbraco.Web.Mvc;
        using Umbraco.Core.Persistence;
        using System.Configuration;
        using Umbraco.Core.Logging;
        using System.Data;
        using System.Text;
        using System.IO;
        using System.Web;
        using System.Net.Http;

        namespace AngularUmbracoPackage.App_Code
{

    [HttpPost]
    public class ImportNewDictionaryController
    {
        [HttpPost]
        public ActionResult importFile()
        {
             public string fileName;
        public string DictionaryKey;

        var db = UmbracoContext.Application.DatabaseContext.Database;
        var insert = new Sql("INSERT INTO cmsDictionary VALUES('" + DictionaryKey + "'");

        }


    }
}

Can anyone give me any links which may help or guide me through this?

The problem you have here is the lack of communication between your angularjs controller (which is front end - meaning that it is executed by the browser) and your c# class (that is executed on server side). This can be achieved by doing post and get requests to the server - https://docs.angularjs.org/api/ng/service/$http — Diana R, Apr 18 '16 at 12:38
Make sure on server side you instruct your c# controller to return back data in json format so that angular would be able to interpret it — Diana R, Apr 18 '16 at 12:39
I don't know what you mean, I am trying to use Angular to save the file to the server. and C# to format the data from within the saved file so it can be placed in a database table — Jonathan Yaniv Ben Avraham, Apr 18 '16 at 12:39
Right, I'm just not sure how to do that in C# saving the file via Angular is probably no problem. The problem is then converting the data so it is valid for entering into the database. — Jonathan Yaniv Ben Avraham, Apr 18 '16 at 12:54

score 2 · Accepted Answer · answered Apr 19 '16 at 14:11

This is how I managed to get it working!

using UmbracoImportExportPlugin.Models;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using Umbraco.Core.Persistence;
using Umbraco.Web;
using Umbraco.Web.WebApi;

namespace UmbracoImportExportPlugin.App_Code
{

    public class ImportNewDictionaryController : UmbracoAuthorizedApiController
    {
        public string basePath;

        //Locate specific path
        public void LocatePath()
        {
            this.basePath = System.Web.Hosting.HostingEnvironment.MapPath(@"/upload");
        }
        [System.Web.Http.AcceptVerbs("GET", "POST")]
        //[System.Web.Http.HttpPost]
        public void SaveFile()
        {
            var myContext = Request.TryGetHttpContext();
            List<string> keys = new List<string>();
            if (myContext.Success)

            {
                HttpPostedFileBase myFile = myContext.Result.Request.Files["file"];
                if (myFile == null)
                {
                   throw new HttpException("invalid file");
                }
                else
                {
                    StreamReader csvreader = new StreamReader(myFile.InputStream);


                    while (!csvreader.EndOfStream)
                    {
                        var line = csvreader.ReadLine();
                        if (line != "Key")
                        keys.Add(line);
                    }
                }
                UmbracoDatabase db = ApplicationContext.DatabaseContext.Database;
                var remove = new Sql("DELETE FROM cmsDictionary");
                int rem = db.Execute(remove);
                foreach (string item in keys)
                {
                    var insert = new Sql("INSERT INTO cmsDictionary VALUES (NEWID(), null,'" + item + "')");
                    int res = db.Execute(insert);
                }
            }
        }


    }
}

Eyescream · Answer 2 · 2016-04-18T13:51:59.477

This worked for me before

in your js file (or before your angular controller):

angular.module("umbraco").directive("qwSingleFileUpload", function () {
    return {
        restrict: "A",
        replace: false,
        scope: {
            myValue: '=qwSingleFileUpload'
        },
        link: function (scope, element, attr) {
            element.bind('change', function () {
                scope.myValue = element[0].files[0];

                if (scope.$$phase) {
                    scope.$apply();
                }
            });
        }
    }
});

in your controller.js:

$scope.fileUpload = {};
$scope.doUpload = function () {
    var uploadUrl = "/umbraco/api/storelocator/go/";
    var fd = new FormData();

    fd.append('file', $scope.fileUpload);

    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: { 'Content-Type': undefined }
    })
    .success(function (data) {
        // ok
    })
    .error(function () {
        // handle upload error
    }); 
}

in your view:

<input type="file" qw-single-file-upload="fileUpload" /><br />
<br /><br />
<input type="button" ng-click="doUpload()" value="Upload" />

in your codebehind:

StoreLocatorController : UmbracoAuthorizedApiController // this allows only logged in users to call the api and also ensures that the correct umbraco context is set
{
    public string basePath;

    public StoreLocatorController()
    {
        this.basePath = System.Web.Hosting.HostingEnvironment.MapPath(@"/App_Data/storeLocatorUpload/");
    }


    [HttpPost]
    public void Go()
    {
        var myContext = Request.TryGetHttpContext();
        if (myContext.Success)
        {
            HttpPostedFileBase myFile = myContext.Result.Request.Files["file"];
            if (myFile == null)
            {
                throw new HttpException("invalid file");
            }
            // save the file
            myFile.SaveAs(this.basePath + "file.ext");



            UmbracoDatabase db = ApplicationContext.DatabaseContext.Database;
            // parse the data and insert them using UmbracoDatabase db
            //..
        }



    }
}

No I can see you did, but I don't understand what is suspposed to go in there, how do I figure out what I put in myContext instead of literally "myContext" — Jonathan Yaniv Ben Avraham, Apr 18 '16 at 13:36
I'm not sure what are you saying, you can keep the code as is: var myContext = Request.TryGetHttpContext(); — Eyescream, Apr 18 '16 at 13:38
okay, so I copied your code as it is: and here is the current error I am getting: `Compiler Error Message: CS0103: The name 'Request' does not exist in the current context` This is where it's telling me that Request is non-existent: var myContext = Request.TryGetHttpContext(); — Jonathan Yaniv Ben Avraham, Apr 18 '16 at 13:40
I didn't notice that your controller was not inheriting from the umbraco controller, edited again my example — Eyescream, Apr 18 '16 at 13:52
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/109448/discussion-between-eyescream-and-jonathan-yaniv-ben-avraham). — Eyescream, Apr 18 '16 at 13:54
Thank you for your help, it almost got me to where I needed to be and without it, I'd probably still be wondering what I'm doing. — Jonathan Yaniv Ben Avraham, Apr 19 '16 at 14:12

Importing Files Using Angular.js and C#

2 Answers2