NativeScript / NativeScript/plugins

imagepicker with NativeScript Vue is not working

Open
#573 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
206
Forks
123
Avg merge
2d 1h
Merged PRs (30d)
1

Description

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?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked StackBlitz demo on iOS and inspect app/components/Home.vue, with app/app.css available as part of the demo. Reproduce image selection and compare the returned selection object with the issue's logged undefined uri. Done means the selected image exposes a usable URI in the NativeScript Vue example.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, typescript
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.