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?

Answer 1

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);
                }
            }
        }


    }
}

Answer 2

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
            //..
        }



    }
}