title: Upload Image using WebAPI and Angular
body: <p>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. </p>
  
  <pre><code>&lt;form novalidate name="f1" ng-submit="SaveFile()"&gt;
  &lt;div style="color: red"&gt;{{Message}}&lt;/div&gt;
  &lt;table&gt;
   &lt;tr&gt;
    &lt;td&gt;Select File : &lt;/td&gt;
    &lt;td&gt;
      &lt;input type="file" name="file" accept="image/*" onchange="angular.element(this).scope().selectFileforUpload(this.files)" required /&gt;
      &lt;span class="error" ng-show="(f1.file.$dirty || IsFormSubmitted) &amp;&amp; f1.file.$error.required"&gt;Image required!&lt;/span&gt;
      &lt;span class="error"&gt;{{FileInvalidMessage}}&lt;/span&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Description : &lt;/td&gt;
    &lt;td&gt;
      &lt;input type="text" name="uFileDescription" ng-model="FileDescription" class="{{(IsFormSubmitted?'ng-dirty' + (f1.uFileDescription.$invalid?' ng-invalid':''):'')}}" autofocus /&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;
      &lt;input type="submit" value="Upload File" /&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>I have action method code for save the image file. Following code save the image file.</p>
  
  <pre><code>    [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);
      }
  </code></pre>
  
  <p>But I need to convert into web API method.<strong>How to achieve this?</strong></p>