Image uploading doesn't work on Web [Web]

[EshanNimesha01]

Image uploading doesn't work on Web

Error: MissingPluginException(No implementation found for method getApplicationDocumentsDirectory on channel plugins.flutter.io/path_provider)
at Object.throw_ [as throw] (http://localhost:65041/dart_sdk.js:5032:11)
at platform_channel.MethodChannel.new._invokeMethod (http://localhost:65041/packages/flutter/src/services/system_channels.dart.lib.js:953:21)
at _invokeMethod.next ()
at http://localhost:65041/dart_sdk.js:37210:33
at _RootZone.runUnary (http://localhost:65041/dart_sdk.js:37081:59)
at _FutureListener.thenAwait.handleValue (http://localhost:65041/dart_sdk.js:32337:29)
at handleValueCallback (http://localhost:65041/dart_sdk.js:32864:49)
at Function._propagateToListeners (http://localhost:65041/dart_sdk.js:32902:17)
at _Future.new.[_completeWithValue] (http://localhost:65041/dart_sdk.js:32750:23)
at async._AsyncCallbackEntry.new.callback (http://localhost:65041/dart_sdk.js:32771:35)
at Object._microtaskLoop (http://localhost:65041/dart_sdk.js:37333:13)
at _startMicrotaskLoop (http://localhost:65041/dart_sdk.js:37339:13)
at http://localhost:65041/dart_sdk.js:33110:9

[souzaavi]

This is not the issue with the library.
Due to Security reasons u don't have access to the file system in the web (you may except this in future). and also the getApplicationDocumentsDirectory() method belongs to path_provider library. In web this will not work due to the above mentioned reason. But now as a solution what you can do is

In File class you have a method called readAsBytes() and readAsBytesSync() it returns Future and Unit8List respectively. so using tis method u can retrieve image bytes. so using this you upload the file using a multipart request to any of your server. Then return that uploaded Image's url from _onImagePickCallback function

Example:

// Renders the image picked by imagePicker from local file storage
// You can also upload the picked image to any server (eg : AWS s3 or Firebase) and then return the uploaded image URL
final base_url = "YOUR_SERVER_BASE_URL";
// import 'package:http/http.dart' as http;
Future _onImagePickCallback(File file) async {
final imageBytes = file.readAsBytesSync();

final req = http.MultipartRequest(
  'POST',
  Uri.parse(
    '$base_url/api/v1/<API_WHICH_IS_USED_TO_UPLOAD_AND_STORE_IN_SERVER>',
  ),
);

req.headers.putIfAbsent('Content-Type', () => 'multipart/form-data');

req.files.add(
  http.MultipartFile.fromBytes(
    'image',
    imageBytes,
  ),
);

final streamedResponse = await req.send();
final response = await http.Response.fromStream(streamedResponse);
final decodedJSON = json.decode(response.body);
/* Sample JSON FROM YOUR API RESPONSE
* {
*   'data': {
*     'url': "https://URL_FOR_YOUR_UPLOADED_FILE",
*     'field_1': "Field_data",
*     ..
*     ..
*     ..
*   }
* }
* */
return decodedJSON['data']['url'];

}

You can refer this article to upload image to amazon s3

You can refer this article to upload image to Firebase Storage