not getting how to use incoming image from android chooser intent - nativescript

Question

I'm trying to display the image in main page. the image will come from whats app profile upon sharing that image to my app.
app.js
if (intent.getClipData()) {
let imageUri = intent.getClipData().getItemAt(0).getUri()
console.log(imageUri);
// content://com.whatsapp.fileprovider/external/WhatsApp/.Shared/photo.jpg
global.imageUri = imageUri;
}
xml
<StackLayout class="p-20">
<Image src="{{ imageUri }}" stretch="none" />
</StackLayout>
viewModel
imageUri: global.imageUri,
getting this error
Error in downloadBitmap - java.net.MalformedURLException: Unknown protocol: content
i need to know how to use incoming images from intent services of android.

Answer 1

add these things in android manifest
<intent-filter>
<action android:name="android.intent.action.SEND" />
<category android:name="android.intent.category.DEFAULT" />
<data android:mimeType="image/*" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.SEND" />
<category android:name="android.intent.category.DEFAULT" />
<data android:mimeType="text/plain" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.SEND_MULTIPLE" />
<category android:name="android.intent.category.DEFAULT" />
<data android:mimeType="image/*" />
</intent-filter>
to handle it copy paste this code anywhere you like
if (platform_1.isAndroid) {
application.android.on(application.AndroidApplication.activityCreatedEvent, function (args) {
var activity = args.activity;
// Get intent, action and MIME type
var intent = activity.getIntent();
var action = intent.getAction();
var type = intent.getType();
if (android.content.Intent.ACTION_SEND === action && type != null) {
if (type.startsWith("text/")) {
handleSendText(intent); // Handle text being sent
}
else if (type.startsWith("image/")) {
handleSendImage(intent); // Handle single image being sent
}
}
else if (android.content.Intent.ACTION_SEND_MULTIPLE === action && type != null) {
if (type.startsWith("image/")) {
handleSendMultipleImages(intent); // Handle multiple images being sent
}
}
else {
// Handle other intents, such as being started from the home screen
}
});
}
function handleSendText(intent) {
if (platform_1.isAndroid) {
var sharedText = intent.getStringExtra(android.content.Intent.EXTRA_TEXT);
if (sharedText != null) {
// Update UI to reflect text being shared
console.log("sharedText: ", sharedText);
console.log("Text received!");
vm.set("sharedText", sharedText);
}
}
}
function handleSendImage(intent) {
if (platform_1.isAndroid) {
var imageUri = intent.getParcelableExtra(android.content.Intent.EXTRA_STREAM);
if (imageUri != null) {
// Update UI to reflect image being shared
console.log("Image received!");
var appContext = application.android.context;
var bitmap = android.provider.MediaStore.Images.Media.getBitmap(appContext.getContentResolver(), imageUri);
console.log("bitmap: ", bitmap);
vm.set("bitmap", bitmap);
}
}
}
function handleSendMultipleImages(intent) {
if (platform_1.isAndroid) {
var imageUris = intent.getParcelableArrayListExtra(android.content.Intent.EXTRA_STREAM);
if (imageUris != null) {
// Update UI to reflect multiple images being shared
console.log("imageUris: ", imageUris);
console.log("Multiple images received!");
}
}
}

Answer 2

You can not directly display image using content uri. You will have to parse the actual file url using MediaStore
You may refer the source code of nativescript-imagepicker for working sample. It returns the actual file path after parsing the content uri when you a image is selected from gallery.