AngularJS with save file using fileupload control

For save file in binary

[AllowAnonymous]

        public async System.Threading.Tasks.Task<HttpResponseMessage> PostMemberImage(int customerID, int memberID)

        {

            AjaxResult res = new AjaxResult();

            HttpRequestMessage request = this.Request;

            if (!request.Content.IsMimeMultipartContent())

            {

                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);

            }

            if (!System.IO.Directory.Exists(System.Web.HttpContext.Current.Server.MapPath(@"~/App_Data/uploads")))

            {

                System.IO.Directory.CreateDirectory(System.Web.HttpContext.Current.Server.MapPath(@"~/App_Data/uploads"));

            }

            string root = System.Web.HttpContext.Current.Server.MapPath("~/App_Data/uploads");

            var provider = new MultipartFormDataStreamProvider(root);

            // System.Threading.Tasks.Task<byte[]> img ;

            byte[] img1 = new byte[1024];

            var task = await request.Content.ReadAsMultipartAsync(provider).

                ContinueWith<HttpResponseMessage>(o =>

                {

                    ///MY CODE///

                    FileStream fsOld = new FileStream(provider.FileData[0].LocalFileName, FileMode.Open, FileAccess.Read);

                    CreateThumbnail(fsOld.Name, 166, 166);

                    FileStream fs = new FileStream(provider.FileData[0].LocalFileName + "_thumb", FileMode.Open, FileAccess.Read);

                    BinaryReader br = new BinaryReader(fs);

                    byte[] image = br.ReadBytes((int)fs.Length);

                    br.Close();

                    var filepath = fs.Name;

                    var maxfilepath = fsOld.Name;

                    fs.Close();

                    fsOld.Close();

                    ////MY CODE END///////////

                    _memberService.SaveMemberImage(memberID, image, customerID);

                    try

                    {

                        if (System.IO.File.Exists(filepath))

                        {

                            System.IO.File.Delete(filepath);

                        }

                        if (System.IO.File.Exists(maxfilepath))

                        {

                            System.IO.File.Delete(maxfilepath);

                        }

                    }

                    catch

                    {

                    }

                    return new HttpResponseMessage()

                    {

                        Content = new StringContent("File uploaded.")

                    };

                }

            );

            return task;

        }

For html side

   <input type="file" id="myFile" ng-model="myfiles" accept="text/xml" />

                                <button type="button" ng-click="myFunction(myfiles)" class="btn btn-xs btn-purple mrg-t-5"><i class=" icon-cloud-upload"></i> Upload</button>

From JS

$scope.model = {

            name: "",

            type: ""

        };

$scope.myFunction = function (obj) {

            var x = document.getElementById("myFile");

            var txt = "";

            if ('files' in myFile) {

                if (x.files.length > 0 && x.files[0].type != "text/xml") {

                    toastr.error('Please import xml file only !'); return;

                }

                if (x.files.length == 0) {

                    toastr.error("Select one or more files."); return;

                } else {

                    for (var i = 0; i < x.files.length; i++) {

                        var file = x.files[i];

                        if ('name' in file) {

                            txt += file.name + "&nbsp;&nbsp;&nbsp;";

                        }

                        if ('size' in file) {

                            txt += bytesToSize(file.size);

                        }

                    }

                }

                function bytesToSize(bytes) {

                    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];

                    if (bytes == 0) return '0 Byte';

                    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));

                    return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];

                };

                document.getElementById("demo").innerHTML = txt;

                //return false;

                if (x.files.length > 0 && x.files[0].type == "text/xml") {

                    $http({

                        method: 'POST',

                        url: httpServiceUrlForService + "api/GPROMemberImport/PostXMLFileupload?reportingyear=" + $scope.ReportYear,

                        headers: { 'Content-Type': undefined },//$scope.sourceID

                        transformRequest: function (data) {

                            //debugger

                            var formData = new FormData();

                            formData.append("model", angular.toJson(data.model));

                            formData.append("file", data.files);

                            if (data.files) {

                                $scope.message = 'Please wait, Document is uploading...';

                                $scope.showPrgress = true;

                            }

                            return formData;

                        },

                        data: { model: $scope.model, files: x.files[0] }

                    }).

                   success(function (data, status, headers, config) {

                       //alert("success!");

                       $scope.showPrgress = false;

                       $scope.message = '';

                       $scope.files = '';

                       angular.element("input[type='file']").val(null);

                       document.getElementById("demo").innerHTML = '';

                       toastr.success('Document uploaded successfully!'); return;

                   }).

                   error(function (data, status, headers, config) {

                       //alert("failed!");

                       $scope.showPrgress = false;

                       $scope.message = '';

                       toastr.error("Failed !"); return;

                   });

                }

            }

            else {

                if (x.value == "") {                   

                    toastr.error("Select one or more files!");

                } else {                  

                    txt += "The files property is not supported by your browser!";

                    txt += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead.

                    toastr.error(txt);

                }

            }

            //  document.getElementById("demo").innerHTML = txt;

        }

Now while showing uploaded image in UI

<img class="list_photo" ng-src="data:image/png;base64,{{o.MemberImage}}" />

CRUD with SPA, ASP.NET Web API and Angular.js

In visual studio web application, use the Client Server architecture. Here is the two process or two application that will be communicating with each other to exchange some information. From the two processes one is acts as a client process and another process acts as a server.

In traditional web applications, the client (browser) which typically makes a request for page to the server to initiates the communication. Then the server processes the request and sends the HTML of the page to the client (browser).

In Single-Page Applications (SPAs) at first the entire page is loaded in the client by the initial request, after that the subsequent action has to update by Ajax request and no need to reload the entire page. The SPA reduces the time by to respond to user actions and result is more fluid experience.

To develop the architecture of a SPA is very hard that are not similar to traditional web applications. However, the most familiar technologies like JavaScript frameworks like AngularJS, ASP.NET Web API, and new styling features of CSS3 make it really easy to design and build SPAs.

In this article, I will show you how to create SPA and CRUD by using ASP.NET Web API, AngularJS.

Overview

Objectives

In this article, you will learn how to:

• create angular-js CRUD
• Create a responsive UI using Twitter-Bootstrap

Prerequisites

• Windows 7 or later with at least 4GB RAM
• Visual Studio Express 2013 for Web or greater
• SQL Server 2012, SQL Server Express, or LocalDB
• ASP.NET MVC 5
• AngularJS in 60-ish Minutes eBook or Video

Setup

In order to create this application, please follow the above prerequisties. 

Exercises

This article includes the following exercises:

1. Creating a Web API
2. Creating a SPA Interface

Exercise 1: Creating a Web API

To set up a web api application

1. Open Visual Studio Express 2013 for Web and select File | New > Project... to start a new solution.

Creating a New Project

2.  Create a new Wep API project in Visual Studio 2013 by selecting Project new dialog box appears and select ASP.NET Web Application under the Visual C# | Web tab. Make sure .NET Framework 4.5 is selected, name it RDLCReport, choose a Location and click OK. .

Creating a new ASP.NET Web Application project

3.  In the New ASP.NET Project dialog box, select the MVC template and select the Web API option. Also Click OK to continue.

Creating a new project with the MVC template, including Web API components

4.  In Solution Explorer, right-click the Solution of the RDLCReport project and build.

Build a new solution

5.  Now create database 'Inventory' and table 'Customer' and set primary key Id, Here is the Script below:

Hide   Copy Code

USE [Inventory]
GO

DROP TABLE [dbo].[Customer]
GO

SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Customer](
    [Id] [int] NOT NULL,
    [Name] [nvarchar](50) NULL,
    [Address] [nvarchar](50) NULL,
    [City] [nvarchar](50) NULL,
    [Country] [nvarchar](50) NULL,
    [DateOfBirth] [datetime] NULL,
    [Age] [int] NULL,
 CONSTRAINT [PK_Customer] PRIMARY KEY CLUSTERED 
 (
    [Id] ASC
 )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = 
 ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
 ) ON [PRIMARY]

 GO

6.  After createing database and table, now you have to create Entity Frame Work Model Object by this dialog box.

Creating Entity Framework Data Model Object

7.  In the Entity Data Model Wizerd, Select EF Designer From Database, and also press next button

Choose Entity Framework Model Contents

8.  In the Entity Data Model Wizerd Choose Your Data Connection bu clicking New Connection... button

Choose Connection String From Connection Properties Dialog Box

9.  In the Connection Properties Window Dialog box, write server name, sql authentication and select database name, then  finish

Choose Connection String From this window

10.  In the Entity Data Model Wizerd,  Select yes, Include the sensative data in the connection string, then press next button

Choose senstative data in the connection string.

11.  In the Entity Data Model Wizerd, select table and press finish button

Creating Customer table model object

12.  Build solution after completing above process

13.  In Solution Explorer, right-click the Controllers folder of the RDLCReport project and select Add | New Controller Item.... and Now create CustomerController by this way

choose api controller

Choose Api Controller Name

14.  The CustomerController.cs file is then added to the Controllers folder of the RDLCReport project, containing an empty CustomerController class. Add the following assembly before RDLCReport.Controllers namespace

Hide   Copy Code

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

15.  In the CustomerController.cs file, Add the following code into the CustomerController class.

Hide   Copy Code

        InventoryEntities db = new InventoryEntities();

Hide   Copy Code

        //get all customer
        [HttpGet]
        public IEnumerable<Customer> Get()
        {
            return db.Customers.AsEnumerable();
        }

        //get customer by id
        public Customer Get(int id)
        {
            Customer customer = db.Customers.Find(id);
            if (customer == null)
            {
                throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
            }
            return customer;
        }
        

Hide   Copy Code

        //insert customer
        public HttpResponseMessage Post(Customer customer)
        {
            if (ModelState.IsValid)
            {
                db.Customers.Add(customer);
                db.SaveChanges();
                HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, customer);
                response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = customer.Id }));
                return response;
            }
            else
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
            }
        }

Hide   Copy Code

        //update customer
        public HttpResponseMessage Put(int id, Customer customer)
        {
            if (!ModelState.IsValid)
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
            }
            if (id != customer.Id)
            {
                return Request.CreateResponse(HttpStatusCode.BadRequest);
            }
            db.Entry(customer).State = EntityState.Modified;
            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
            }
            return Request.CreateResponse(HttpStatusCode.OK);
        }

Hide   Copy Code

        //delete customer by id
        public HttpResponseMessage Delete(int id)
        {
            Customer customer = db.Customers.Find(id);
            if (customer == null)
            {
                return Request.CreateResponse(HttpStatusCode.NotFound);
            }
            db.Customers.Remove(customer);
            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
            }
            return Request.CreateResponse(HttpStatusCode.OK, customer);
        }

Hide   Copy Code

        //prevent memory leak
        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }

Exercise 2: Creating the SPA Interface

To do:

1.  Open the Package Manager Console from Tools > Library Package Manager. Type the following command to install the AngularJS.Core NuGet package.

Hide   Copy Code

Install-Package AngularJS.Core

2.  In Solution Explorer, right-click the Scripts folder of the RDLCReport project and select Add | New Folder. Name the folder app and press Enter.

3.  Right-click the app folder you just created and select Add | JavaScript File.

Creating a new JavaScript file

4.  In the Specify Name for Item dialog box, type quiz-controller in the Item name text box and click OK.

Naming the new JavaScript file

5.  In the customerCtrl.js file, add the following code to declare and initialize the AngularJS.

Hide   Shrink    Copy Code

    //create angularjs controller
    var app = angular.module('app', []);//set and get the angular module
    app.controller('customerController', ['$scope', '$http', customerController]);

    //angularjs controller method
    function customerController($scope, $http) {

        //declare variable for mainain ajax load and entry or edit mode
        $scope.loading = true;
        $scope.addMode = false;

        //get all customer information
        $http.get('/api/Customer/').success(function (data) {
            $scope.customers = data;
            $scope.loading = false;
        })
        .error(function () {
            $scope.error = "An Error has occured while loading posts!";
            $scope.loading = false;
        });

        //by pressing toggleEdit button ng-click in html, this method will be hit
        $scope.toggleEdit = function () {
            this.customer.editMode = !this.customer.editMode;
        };

        //by pressing toggleAdd button ng-click in html, this method will be hit
        $scope.toggleAdd = function () {
            $scope.addMode = !$scope.addMode;
        };

        //Inser Customer
        $scope.add = function () {
            $scope.loading = true;
            $http.post('/api/Customer/', this.newcustomer).success(function (data) {
                alert("Added Successfully!!");
                $scope.addMode = false;
                $scope.customers.push(data);
                $scope.loading = false;
            }).error(function (data) {
                $scope.error = "An Error has occured while Adding Customer! " + data;
                $scope.loading = false;
            });
        };

        //Edit Customer
        $scope.save = function () {
            alert("Edit");
            $scope.loading = true;
            var frien = this.customer;  
            alert(frien);          
            $http.put('/api/Customer/' + frien.Id, frien).success(function (data) {
                alert("Saved Successfully!!");
                frien.editMode = false;
                $scope.loading = false;
            }).error(function (data) {
                $scope.error = "An Error has occured while Saving customer! " + data;
                $scope.loading = false;
            });
        };

       //Delete Customer
        $scope.deletecustomer = function () {
            $scope.loading = true;
            var Id = this.customer.Id;
            $http.delete('/api/Customer/' + Id).success(function (data) {
                alert("Deleted Successfully!!");
                $.each($scope.customers, function (i) {
                    if ($scope.customers[i].Id === Id) {
                        $scope.customers.splice(i, 1);
                        return false;
                    }
                });
                $scope.loading = false;
            }).error(function (data) {
                $scope.error = "An Error has occured while Saving Customer! " + data;
                $scope.loading = false;
            });
        };

    }

6. In the customerCtrl.js, All of the above code, you can put into this javascript function.

Hide   Copy Code

(function () {
      'use strict';

   /*Write above code here*/

})();

7.  In _Layout.cshtml page which path is Views> Shared> _Layout.cshtml, add the following line

Creating angular bootstraping

8. In BundleConfig.cs file, add two line, which path is App_Start> BundleConfig.cs

Add java script file

9.  In Views> Home> Index.cshtml file add following code

Hide   Shrink    Copy Code

<div data-ng-controller="customerController" class="container">
    <div class="row">
        <div class="col-md-12">
            <strong class="error">{{ error }}</strong>
            <p data-ng-hide="addMode"><a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a></p>
            <form name="addCustomer" data-ng-show="addMode" style="width:600px;margin:0px auto;">
                <div class="form-group">
                    <label for="cid" class="col-sm-2 control-label">ID:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="cid" placeholder="please enter id" data-ng-model="newcustomer.Id" required />
                    </div>
                </div>
                <div class="form-group">
                    <label for="cname" class="col-sm-2 control-label">Name:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="cname" placeholder="please enter your name" data-ng-model="newcustomer.Name" required />
                    </div>
                </div>
                <div class="form-group">
                    <label for="address" class="col-sm-2 control-label">Address:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="address" placeholder="please enter your address" data-ng-model="newcustomer.Address" required />
                    </div>
                </div>
                <div class="form-group">
                    <label for="city" class="col-sm-2 control-label">City:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="city" placeholder="please enter your city" data-ng-model="newcustomer.City" required />
                    </div>
                </div>
                <div class="form-group">
                    <label for="country" class="col-sm-2 control-label">Country:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="country" placeholder="please enter your country" data-ng-model="newcustomer.Country" required />
                    </div>
                </div>
                <div class="form-group">
                    <label for="age" class="col-sm-2 control-label">Age:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="age" placeholder="please enter your age" data-ng-model="newcustomer.Age" required />
                    </div>
                </div>
                <br />
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addCustomer.$valid" class="btn btn-primary" />
                        <input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
                    </div>
                </div>
                <br />
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <br />
            <br />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" style="width:800px">
                    <tr>
                        <th>#</th>
                        <td>FirstName</td>
                        <th>LastName</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>PostalCode</th>
                        <th>Country</th>
                    </tr>
                    <tr data-ng-repeat="customer in customers">
                        <td><strong data-ng-hide="customer.editMode">{{ customer.Id }}</strong></td>
                        <td>
                            <p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
                            <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Name" />
                        </td>
                        <td>
                            <p data-ng-hide="customer.editMode">{{ customer.Address }}</p>
                            <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Address" />
                        </td>
                        <td>
                            <p data-ng-hide="customer.editMode">{{ customer.City }}</p>
                            <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.City" />
                        </td>
                        <td>
                            <p data-ng-hide="customer.editMode">{{ customer.Country }}</p>
                            <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Country" />
                        </td>
                        <td>
                            <p data-ng-hide="customer.editMode">{{ customer.Age }}</p>
                            <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Age" />
                        </td>
                        <td>
                            <p data-ng-hide="customer.editMode"><a data-ng-click="toggleEdit(customer)" href="javascript:;">Edit</a> | <a data-ng-click="deletecustomer(customer)" href="javascript:;">Delete</a></p>
                            <p data-ng-show="customer.editMode"><a data-ng-click="save(customer)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(customer)" href="javascript:;">Cancel</a></p>
                        </td>
                    </tr>
                </table>
                <hr />
            </div>
        </div>
    </div>
    <div id="mydiv" data-ng-show="loading">
        <img src="Images/ajax-loader.gif" class="ajax-loader" />
    </div>
</div>

10.  Run and enjoy the CRUD in angularjs, the out put is: 

output

If you want to use file upload then please refer below link

http://shazwazza.com/post/uploading-files-and-json-data-in-the-same-request-with-angular-js/