title: Upload the image into storage blob using typescript and angular2
body: <p>I am developing angular 2 application using typescript. in my current project I implemented the functionality for uploading image into azure storage blob, for that I followed the below link.</p>
  
  <p><a href="http://www.ojdevelops.com/2016/05/end-to-end-image-upload-with-azure.html" rel="noreferrer">http://www.ojdevelops.com/2016/05/end-to-end-image-upload-with-azure.html</a></p>
  
  <p>I write the below lines of code for my view to select the image from my local machine.</p>
  
  <pre><code>&lt;form name="form" method="post"&gt;
              &lt;div class="input-group"&gt;
  
                  &lt;input id="imagePath" class="form-control" type="file" name="file" accept="image/*" /&gt;
  
                  &lt;span class="input-group-btn"&gt;
  
                      &lt;a  class="btn btn-success" (click)='uploadImage()'&gt;Upload&lt;/a&gt;
                      &lt;!--href="../UploadImage/upload"--&gt;
                      &lt;!--(click)='uploadImage()'--&gt;
                  &lt;/span&gt;
              &lt;/div&gt;               
          &lt;/form&gt;     
  </code></pre>
  
  <p>My view will be like this below figure.
  <a href="https://i.stack.imgur.com/CA9Ec.png" rel="noreferrer"><img src="https://i.stack.imgur.com/CA9Ec.png" alt="enter image description here"></a></p>
  
  <p>when I click Upload button, in the <strong>uploadcomponent.ts</strong> file I write the below lines of code for making http post request along with content as selected image path.</p>
  
  <pre><code>        uploadImage(): void {
  
  
  
              //var image = Request["imagePath"];
              //alert('Selected Image Path :' + image);
  
              this.imagePathInput = ((&lt;HTMLInputElement&gt;document.getElementById("imagePath")).value);
              alert('Selected Image Path :' + this.imagePathInput);
  
  
             let imagePath = this.imagePathInput;
  
             var headers = new Headers();
             headers.append('Content-Type', 'application/x-www-form-urlencoded');//application/x-www-form-urlencoded
  
             this._http.post('/UploadImage/UploadImagetoBlob', JSON.stringify(imagePath),
              {
                 headers: headers
              })
              .map(res =&gt; res.json())
              .subscribe(
              data =&gt; this.saveJwt(data.id_token),
              err =&gt; this.handleError(err),
              () =&gt; console.log('ImageUpload Complete')
              );
  
  
      }
  </code></pre>
  
  <p><strong>UploadImageController.cs</strong></p>
  
  <p>In the <strong>UploadImageController.cs</strong> file I write below lines of code for upload the image into azure storage blob.</p>
  
  <pre><code>    [HttpPost]
      [Route("UploadImage/UploadImagetoBlob")]
      public async Task&lt;HttpResponseMessage&gt; UploadImagetoBlob()
      {
          try
          {
              //WebImage image = new WebImage("~/app/assets/images/AzureAppServiceLogo.png");
              //image.Resize(250, 250);
              //image.FileName = "AzureAppServiceLogo.png";
              //img.Write();
              var image = WebImage.GetImageFromRequest();
              //WebImage image = new WebImage(imagePath);
              var imageBytes = image.GetBytes();
  
              // The parameter to the GetBlockBlobReference method will be the name
              // of the image (the blob) as it appears on the storage server.
              // You can name it anything you like; in this example, I am just using
              // the actual filename of the uploaded image.
              var blockBlob = blobContainer.GetBlockBlobReference(image.FileName);
              blockBlob.Properties.ContentType = "image/" + image.ImageFormat;
  
              await blockBlob.UploadFromByteArrayAsync(imageBytes, 0, imageBytes.Length);
  
              var response = Request.CreateResponse(HttpStatusCode.Moved);
              response.Headers.Location = new Uri("../app/upload/uploadimagesuccess.html", UriKind.Relative);
              //return Ok();
              return response;
  
          }
          catch (Exception ex)
          {
              Debug.WriteLine(ex.Message);
              return null;
          }
  
  
  
      }
  </code></pre>
  
  <p>In the above controller code, the below line code always gives null value.</p>
  
  <pre><code>var image = WebImage.GetImageFromRequest();
  </code></pre>
  
  <p>Can you please tell me how to resolve the above issue.</p>
  
  <p>-Pradeep</p>