Skip to content

imagepicker with NativeScript Vue is not working #573

Open
@mamaku30

Description

@mamaku30

Hello,

I'm writing an application in nativescript vue where I need to pick an image on iOS Photo Library.
For that I wanted to use the imagepicker plugin.

Authorization is working and I can select the pictures, but unfortunately as result I got that the uri is undefined.
Here after my code :

<template>
  <Page @loaded="onPageLoaded">
      <ActionBar title="Select Image" />
      <StackLayout>
          <Button text="Select Image" @tap="onSelectImageTap" />
          <Image v-if="selectedImage" :src="selectedImage" stretch="aspectFill" />
      </StackLayout>
  </Page>
</template>
<script>
import * as ImagePicker from 'nativescript-imagepicker';
export default {
  data() {
      return {
          selectedImage: null,
          imagePicker: null // Initialize imagePicker property
      };
  },
  methods: {
      onPageLoaded() {
          this.imagePicker = ImagePicker.create({
              mode: 'single' // or 'multiple'
          });
      },
      async onSelectImageTap() {
          try {
              if (!this.imagePicker) {
                  console.error('ImagePicker is not initialized.');
                  return;
              }
              await this.imagePicker.authorize();
              const selection = await this.imagePicker.present();
              console.log('Selection:', selection.map(item => ({ uri: item.uri })));
              if (selection && selection.length > 0 && selection[0].uri) {
                  this.selectedImage = selection[0].uri;
              } else {
                  console.error('No image selected or URI is undefined.');
              }
          } catch (error) {
              console.error('Error selecting image:', error);
          }
      }
  }
};
</script>

It seems that the same issue is happing also on the demo available under : https://www.npmjs.com/package/@nativescript/imagepicker#demo -> https://stackblitz.com/edit/nativescript-vue3-beta-krjk9k?file=app%2Fcomponents%2FHome.vue,app%2Fapp.css

Can you support me on this issue?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions