NativeScript / plugins

@nativescript plugins to help with your developments.
https://docs.nativescript.org/plugins/index.html
Apache License 2.0
187 stars 104 forks source link

imagepicker with NativeScript Vue is not working #573

Open mamaku30 opened 4 months ago

mamaku30 commented 4 months ago

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?

icheered commented 4 months ago

Same issue here, did you ever find a solution?

nydsteven commented 2 months ago

I had the same issue and was able to fix it by installing JDK 17 (instead of JDK 11) that I had.

Here's some instructions, but instead of temurin11, install temurin17

choco install -y temurin17

https://docs.nativescript.org/setup/windows#installing-a-jdk