flutter_image_cropper icon indicating copy to clipboard operation
flutter_image_cropper copied to clipboard

Unsupported operation: _Namespace : getting this error on web

Open am1tr0r opened this issue 3 years ago • 15 comments

Error: Unsupported operation: Namespace at Object.throw [as throw] (http://localhost:55543/dart_sdk.js:5067:11) at Function.get _namespacePointer [as _namespacePointer] (http://localhost:55543/dart_sdk.js:56707:17) at Function._namespacePointer (http://localhost:55543/dart_sdk.js:54523:28) at Function._dispatchWithNamespace (http://localhost:55543/dart_sdk.js:54526:31) at io._File.new.length (http://localhost:55543/dart_sdk.js:54649:23) at imageCompress (http://localhost:55543/packages/agendaboa/utils/image_compress.dart.lib.js:86:29) at imageCompress.next () at runBody (http://localhost:55543/dart_sdk.js:40590:34) at Object._async [as async] (http://localhost:55543/dart_sdk.js:40621:7) at imageCompress (http://localhost:55543/packages/agendaboa/utils/image_compress.dart.lib.js:83:18) at compute (http://localhost:55543/packages/flutter/src/foundation/_isolates_web.dart.lib.js:28:14) at compute.next () at http://localhost:55543/dart_sdk.js:40571:33 at _RootZone.runUnary (http://localhost:55543/dart_sdk.js:40441:59) at _FutureListener.thenAwait.handleValue (http://localhost:55543/dart_sdk.js:35363:29) at handleValueCallback (http://localhost:55543/dart_sdk.js:35931:49) at Function._propagateToListeners (http://localhost:55543/dart_sdk.js:35969:17) at async._AsyncCallbackEntry.new.callback (http://localhost:55543/dart_sdk.js:35698:27) at Object._microtaskLoop (http://localhost:55543/dart_sdk.js:40708:13) at _startMicrotaskLoop (http://localhost:55543/dart_sdk.js:40714:13) at http://localhost:55543/dart_sdk.js:36191:9

on web, app get stuck here on completer function with the error mentioned above

/// Creates a completer for the given JS promise. Completer<T> _completerForPromise<T>(Promise promise) { Completer<T> out = Completer();

// Create interopts for promise promise.then(allowInterop((value) { out.complete(value); }), allowInterop(([value]) { out.completeError(value, StackTrace.current); }));

return out; }

am1tr0r avatar May 10 '22 13:05 am1tr0r

Look like this #334

hnvn avatar May 11 '22 01:05 hnvn

@hnvn I think this is because of the type of image file path in web. I am not able to upload the image file to firebase storage in web if path is like this .(Note : on mobiles I am able to upload because paths are not of this kind(blob)) blob:http://localhost:62886/e9b451d1-61eb-4964-8d6b-53f3010d12e9

secondly on web , when I try to open an image from cache whose path is /.tmp_rand0/cacherand0/8fa428c0-d128-11ec-ac29-7df3657f842d.bin then image cropper does't display the image in cropper.

Screen Shot 2022-05-11 at 6 20 20 PM

if path is like this blob:http://localhost:62886/e9b451d1-61eb-4964-8d6b-53f3010d12e9 then image cropper displays the image.

am1tr0r avatar May 11 '22 12:05 am1tr0r

Web is another world, you don't work with files directly, instead you work with a "binary" version of that file (called BLOB), see this for more detail

hnvn avatar May 11 '22 14:05 hnvn

so I have to use this for web?. or can we use image_picker 2.0.2 after making some changes in it.

am1tr0r avatar May 11 '22 14:05 am1tr0r

You have to convert you file into BLOB format, provide it to ImageCropper in an URI like blob:....

hnvn avatar May 11 '22 14:05 hnvn

yes I have been trying to find a way to convert file to BLOB format and vice a versa (BLOB format to File). but could't find a solution yet. it would be great for me if you could help. Thanks

am1tr0r avatar May 11 '22 15:05 am1tr0r

What is your scenario? where does your input data for ImageCropper come from?

hnvn avatar May 11 '22 15:05 hnvn

my data to ImageCropper come from a firebase image url and after cropping image also I am saving it into firebase storage.

am1tr0r avatar May 11 '22 15:05 am1tr0r

Do something like this:

Blob myBlob = Blob(await file.readAsBytes());

Note that Blob object come from html package, so it is only available for web

hnvn avatar May 11 '22 15:05 hnvn

but this myBlob will be an object of Blob, how we Get a path from it to pass in ImageCropper. because Blob object does't returns path it has only type of blob, size and slice.

am1tr0r avatar May 11 '22 15:05 am1tr0r

html.Url.createObjectUrl(myBlob);

hnvn avatar May 11 '22 15:05 hnvn

Thanks finally I got the path(blob url path : blob:http://localhost:60379/7ce38fe2-465c-4222-b64c-cee13e2c8608). but still I have white screen , I am not sure why.

Is there a way to get the simple File from this type of path (blob url path : blob:http://localhost:60379/7ce38fe2-465c-4222-b64c-cee13e2c8608), file that I want to upload to firebase?

am1tr0r avatar May 11 '22 16:05 am1tr0r

here we need to put the await file.readAsBytes() in an array , then it works.

like this : html.Blob blob = html.Blob([await logo.readAsBytes()]);

am1tr0r avatar May 12 '22 07:05 am1tr0r

Is there a way to get the simple File from this type of path (blob url path : blob:http://localhost:60379/7ce38fe2-465c-4222-b64c-cee13e2c8608), this is the File that I want to upload to firebase, I need to get it from blob url.

am1tr0r avatar May 12 '22 07:05 am1tr0r

You can try this package: https://pub.dev/packages/cross_file

Aqua-Ye avatar Mar 21 '23 14:03 Aqua-Ye