storyblok / field-plugin

Create and deploy Storyblok Field Plugin
https://www.storyblok.com/docs/plugins/field-plugins/introduction
25 stars 3 forks source link

"actions.selectAsset()" only returns the filename but not things like Alt Text or Asset ID #392

Open MilanFox opened 1 week ago

MilanFox commented 1 week ago

Describe the bug First of all, thanks for making Storyblok such a modular product. The recent changes in the Field Plugins are much appreciated!

I am in need of building a rather customized version of the native asset selector, for which I would need the whole asset object, but "selectAsset()" only returns an Object that includes the filename for me, but not the rest of the Asset Metadata, like Alt Texts, Focus Points, etc.:

{
  "filename": "https://www.a.storyblok.com/some/file/path.png"
}

I can reproduce the behaviour from a fresh new instance of a Plugin that is created with "npx @storyblok/field-plugin-cli@latest add --dir \"./packages\" --structure monorepo" (this is a monorepo project), so I am not linking a minimal repro here - in case this would help I am of course adding it.

I am using the Vue 3 template in case this makes a difference.

To Reproduce Steps to reproduce the behavior:

  1. Create a new Component, following the documentation
  2. In the Example-Component "AssetSelector.vue", add a console log of the content of "asset.value" after line 10, where it waits for the asset selector promise.
  3. Select any asset (in my case I've tried it with images only)
  4. Console.log shows an "incomplete" asset object with only a filename.

Expected behavior I would have expected the asset object to include the same data, that the native asset selector returns. At a minimum the asset ID so I can get the missing Info via the management API.

For reference, the Asset Object, I would have expected: https://www.storyblok.com/docs/api/management/core-resources/assets/the-asset-object

Desktop (Just in case this makes a difference):

Additional context I did a very quick test with the old <sb-asset-selector> and I feel like this meta component does the same thing, but I might be wrong here.

MilanFox commented 1 week ago

I have decided to quickly set up a minimal repro anyways, just for convenience:

This Field Type Plugin:

<template>
  <SbButton size="small" @click="handleSelectAsset" is-full-width>Select Asset</SbButton>
  <SbButton size="small" @click="removeAsset" is-full-width>RemoveAsset</SbButton>
  <pre>{{ asset }}</pre>
</template>

<script setup lang="ts">
import { useFieldPlugin } from '@storyblok/field-plugin/vue3'
import { SbButton } from '@storyblok/design-system'
import { ref } from 'vue'

import type { Asset } from '@storyblok/field-plugin'

const asset = ref<Asset>()

const plugin = useFieldPlugin()

const handleSelectAsset = async () => {
  asset.value = await plugin?.actions?.selectAsset()
}

const removeAsset = () => {
  asset.value = undefined
}
</script>

produces this example output after selecting an image asset (I just printed it below the two buttons, sorry for the horrible formating)

Bildschirmfoto 2024-06-24 um 18 13 54

Selecting the same image with the native Asset Picker gives me all of these and not just the filename:

Bildschirmfoto 2024-06-24 um 18 17 53

eunjae-lee commented 1 week ago

Hi @MilanFox thanks for suggesting this change 🙂 As we are in the middle of something, I cannot guarantee the ETA, but I will hopefully discuss about this and bring it to you soon.

MilanFox commented 6 days ago

Hey thanks! Fully understandable - This would be much appreciated, but in the meantime, we are using a workaround through the Management API, so we are not in a hurry right now.