0

The code below is used to upload images. I would like to know the Angular code for posting data and web API code to save images on server.

<form novalidate name="f1" ng-submit="SaveFile()">
<div style="color: red">{{Message}}</div>
<table>
 <tr>
  <td>Select File : </td>
  <td>
    <input type="file" name="file" accept="image/*" onchange="angular.element(this).scope().selectFileforUpload(this.files)" required />
    <span class="error" ng-show="(f1.file.$dirty || IsFormSubmitted) && f1.file.$error.required">Image required!</span>
    <span class="error">{{FileInvalidMessage}}</span>
  </td>
</tr>
<tr>
  <td>Description : </td>
  <td>
    <input type="text" name="uFileDescription" ng-model="FileDescription" class="{{(IsFormSubmitted?'ng-dirty' + (f1.uFileDescription.$invalid?' ng-invalid':''):'')}}" autofocus />
  </td>
</tr>
<tr>
  <td></td>
  <td>
    <input type="submit" value="Upload File" />
  </td>
</tr>

I have action method code for save the image file. Following code save the image file.

    [HttpPost]
    public string SaveFiles(string description)
    {
        string Message = "";
        string fileName, actualFileName;
        Message = fileName = actualFileName = string.Empty;
        bool flag = true;
        var allDatawithmsg = new Data();
        if (Request.Files != null)
        {
            var file = Request.Files[0];
            actualFileName = file.FileName;
            fileName = file.FileName;
            int size = file.ContentLength;
            var folderpath = @"C:/Images/MoreInfo/";
            foreach (string fileinfo in Directory.GetFiles(folderpath))
            {
                string FileName = Path.GetFileName(fileinfo);
                if (actualFileName == FileName)
                {
                    flag = false;
                }
            }
            if (flag)
            {
                try
                {
                    file.SaveAs(Path.Combine(folderpath, fileName));
                    byte[] photo = GetPhoto(Path.Combine(folderpath, fileName));
                    context.sp_updateImageData(actualFileName, fileName, description, size, photo);
                    allDatawithmsg.successMessage = "File upload successfully";
                    allDatawithmsg.imageTableData = GetImageInfo();
                }
                catch (Exception)
                {
                    allDatawithmsg.unSuccessMessage = "File upload failed! Please try again";
                }
            }
            else
            {
                allDatawithmsg.unSuccessMessage = "File already exists ! Please try again";
            }

        }
        var setting = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
        return JsonConvert.SerializeObject(allDatawithmsg, Formatting.Indented, setting);
    }

But I need to convert into web API method.How to achieve this?

Ahasanul Banna
  • 113
  • 2
  • 12
Vishal Bedre
  • 119
  • 1
  • 8
  • See [how to upload multipart form content with Angular](http://stackoverflow.com/questions/24443246/angularjs-how-to-upload-multipart-form-data-and-a-file). Then handle it with [HttpPostedFileBase](http://stackoverflow.com/questions/10402094/uploading-image-in-asp-net-mvc) server-side. – Jasen Nov 30 '16 at 00:45
  • what part of the code you posted isn't working? – Claies Nov 30 '16 at 00:48

0 Answers0