title: Upload image to Azure blob using Flutter (iOS/Android)
body: <p>How can we upload images(.jpg, .png) to Azure blob storage. Not getting any insight to start with.</p>
  <p>If you have used example would love to see and try if that is the way to do, any working example/url would help get started with</p>
  <p>Here is i am trying to upload .jpg file and getting 400 error,</p>
  <pre><code>image.forEach((element) async {
      ImageDetailsUpload result = ImageDetailsUpload.fromJson(element);
      var postUri = Uri.parse('$url/${result.fileName}?$code'); //Azure blob url
      var request = new http.MultipartRequest(&quot;PUT&quot;, postUri); //Put method
      request.files.add(
        new http.MultipartFile.fromBytes(
          'file',
          await File.fromUri(Uri.parse(result.path)).readAsBytes(),
        ),
      );
      request.send().then((response) {
        print(response.statusCode);
      }, onError: (err) {
        print(err);
      });
    });
  </code></pre>
  <p>image is a LIST and holds the fileName and File path, this is what i get as bytes (see image below)</p>
  <p><a href="https://i.stack.imgur.com/Ro2gM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ro2gM.png" alt="enter image description here" /></a></p>
  <p>Solved the issue of upload but image is being corrupted now on server -</p>
  <pre><code>image.forEach((element) async {
      ImageDetailsUpload result = ImageDetailsUpload.fromJson(element);
      var postUri = Uri.parse('$url/${result.fileName}?$code');
      var request = new http.MultipartRequest(&quot;PUT&quot;, postUri);
      request.headers['X-MS-BLOB-TYPE'] = 'BlockBlob';
  
      request.files.add(
        new http.MultipartFile.fromBytes(
          'file',
          await File.fromUri(Uri.parse(result.path)).readAsBytes(),
        ),
      );
      request.send().then((response) {
        print(response.statusCode);
      }, onError: (err) {
        print(err);
      });
    });
  </code></pre>
  <p>this seems to haunting me.</p>
  <p>There is more to the question, what i noticed is the file uploaded using postman to blob storage are store as actual image of type <code>image/jpeg</code> depending on what type of image i am uploading. But when uploading using application i am using as mutipart which is making th e stored file into of type <code>multipart/form-data</code>. Uploaded both types of image jpg/png both gives type as mentioned above.
  <a href="https://i.stack.imgur.com/sMxdh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sMxdh.png" alt="enter image description here" /></a></p>
  <p>[![enter image description here][3]][3]</p>