i am implementing image upload in my app. i want to use imgur's api. i got the code from the postman collection in their docs. but i am getting - DioException [connection error]: The connection errored: The XMLHttpRequest onError callback was called. This typically indicates an error on the network layer. This indicates an error which most likely cannot be solved by the library.

my code -

final ImagePicker picker = ImagePicker();

      // Pick an image from the gallery
      final XFile? image = await picker.pickImage(source: ImageSource.gallery);

      if (image == null) {
        print("No image selected.");
        return;
      }

      // Read the image as bytes
      final bytes = await image.readAsBytes();

      // Convert the bytes to base64
      String base64Image = base64Encode(bytes);

      // Imgur API endpoint
      String uploadUrl = "/";

      var headers = {'Authorization': 'Client-ID $clientId'};
      FormData data = FormData.fromMap({
        'image': base64Image,
        'type': 'base64',
        'title': 'Simple upload',
        'description': 'This is a simple image upload in Imgur'
      });

      var dio = Dio();
      var response = await dio.post(
        '',
        options: Options(
          headers: headers,
        ),
        data: data,
      );

I tried using http or dio. I tried the same code on Postman, and it worked there.

i am implementing image upload in my app. i want to use imgur's api. i got the code from the postman collection in their docs. but i am getting - DioException [connection error]: The connection errored: The XMLHttpRequest onError callback was called. This typically indicates an error on the network layer. This indicates an error which most likely cannot be solved by the library.

my code -

final ImagePicker picker = ImagePicker();

      // Pick an image from the gallery
      final XFile? image = await picker.pickImage(source: ImageSource.gallery);

      if (image == null) {
        print("No image selected.");
        return;
      }

      // Read the image as bytes
      final bytes = await image.readAsBytes();

      // Convert the bytes to base64
      String base64Image = base64Encode(bytes);

      // Imgur API endpoint
      String uploadUrl = "https://api.imgur/3/image/";

      var headers = {'Authorization': 'Client-ID $clientId'};
      FormData data = FormData.fromMap({
        'image': base64Image,
        'type': 'base64',
        'title': 'Simple upload',
        'description': 'This is a simple image upload in Imgur'
      });

      var dio = Dio();
      var response = await dio.post(
        'https://api.imgur/3/image',
        options: Options(
          headers: headers,
        ),
        data: data,
      );

I tried using http or dio. I tried the same code on Postman, and it worked there.

• flutter
• http
• dio
• imgur

• Hey! @Aayan Agarwal if you find my answer useful please select that tick mark it will help other people too – Tanu Purohit Commented 20 hours ago

1 Answer 1

If you are testing on an Android device, ensure your AndroidManifest.xml has the required permissions:

<uses-permission android:name="android.permission.INTERNET"/>

If testing on iOS, update ios/Runner/Info.plist to allow HTTP requests

<key>NSAppTransportSecurity</key>
<dict>
 <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Ensure Dio is set up correctly with proper timeouts. Try using this configuration:

var dio = Dio(
  BaseOptions(
  connectTimeout: Duration(seconds: 10),
  receiveTimeout: Duration(seconds: 10),
));

If Dio isn’t working, test with http as a workaround:

var response = await http.post(
  Uri.parse("https://api.imgur/3/image"),
headers: {
  "Authorization": "Client-ID $clientId",
},
 body: {
  "image": base64Image,
  "type": "base64",
  "title": "Simple upload",
  "description": "This is a simple image upload in Imgur",
});
print(response.body);