title: Cannot upload image using dio post request
body: <p>I am trying to upload a photo with caption to REST API. But since it is my first time, I am getting some exceptions. My code for uploading the image is shown below:</p>
  <pre><code>Dio dio = new Dio();
  
        dio.options.headers['content-Type'] = 'multipart/form-data';
        dio.options.headers['Authorization'] = 'Token ${box.get('token')}';
  
        FormData formData = FormData.fromMap({
          &quot;author&quot;: box.get('user_id'),
          &quot;description&quot;: _caption,
          &quot;image&quot;: MultipartFile.fromFileSync(_image.path,
              filename: _image.path.split(Platform.pathSeparator).last)
        });
  
        dio
            .post(&quot;$baseURL/posts/create/&quot;,
                data: formData,
                options:
                    Options(method: 'POST', responseType: ResponseType.plain))
            .then((response) =&gt; print(response))
            .catchError((error) =&gt; print(error));
  </code></pre>
  <p>After I run this on my device and try to upload image, it directs me to dio.dart package line <code>throw assureDioError(e, options);</code></p>
  <p>If you have any knowledge with uploading images using dio, kindly help solve it.</p>
  <p><strong>UPDATED</strong>: body of json</p>
  <pre><code>{
      &quot;author&quot;: null,
      &quot;description&quot;: &quot;&quot;,
      &quot;image&quot;: null
  }
  </code></pre>
  <p><strong>UPDATED</strong>: I tried with another service uploading image (not dio)</p>
  <pre><code>// string to uri
        var uri = Uri.parse(&quot;$baseURL/posts/create/&quot;);
  
        // create multipart request
        var request = http.MultipartRequest(&quot;POST&quot;, uri);
  
        // add headers with Auth token
        Map&lt;String, String&gt; headers = {
          &quot;Authorization&quot;: &quot;Token ${box.get('token')}&quot;,
          &quot;Content-type&quot;: &quot;multipart/form-data&quot;
        };
  
        request.headers.addAll(headers);
  
        // add fields
        Map&lt;String, String&gt; fields = {
          'author': box.get('user_id').toString(),
          'description': _caption,
        };
  
        request.fields.addAll(fields);
  
        // multipart that takes file
        var multipartFile = http.MultipartFile(
          'file',
          _image.readAsBytes().asStream(),
          _image.lengthSync(),
          filename: _image.path.split('/').last,
          contentType: MediaType('image', 'jpeg'),
        );
  
        // add file to multipart
        request.files.add(multipartFile);
        print(request.toString());
  
        // send
        var response = await request.send();
        print(response.statusCode);
  
        // listen for response
        response.stream.transform(utf8.decoder).listen((value) {
          print(value);
        });
  
  </code></pre>
  <p>I have tried uploading images with the above code as well. But this returns me the error saying <code>&quot;image&quot;:[&quot;No file was submitted.&quot;]</code></p>