Currently, I am developing a multi-step registration form that includes an option for users to upload an avatar. As it's a complex form, I've decided to store the data in a Pinia store until the final submission. Everything seems to be functioning correctly so far. However, I'm facing an issue regarding the ability to delete the Blob URL value associated with the avatar, allowing users to select a different image. My attempted solution was to set the avatar value to '' using
userRegisterStore.cardOwner.avatar = ''runtime-core.esm-bundler.js:218 Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'avatar'In addition, I make use of cropperjs and vue-cropperjs libraries, although these may not be directly related to the issue at hand. After spending hours searching online without success, I'm hoping someone here can provide some assistance.
[EDIT] I have created a sample demonstration on codesandbox.io. You can access RegisterFormFive.vue either through the provided link or by using the integrated preview in codesandbox: . Upload an image, crop it (orange button below the image), and try deleting it (red button).
Below is a snippet of my code:
// RegisterDataStore.js
export const useRegisterDataStore = defineStore('RegisterDataStore', {
state: () => ({
imgReady: false,
cardOwner: reactive({
firstName: '',
lastName: '',
email: '',
password: '',
agbAccepted: false,
dsgvoAccepted: false,
title: '',
companyName: '',
companyPublic: false,
position: '',
positionPublic: false,
avatar: '',
addresses: [],
contacts: [],
links: [],
}),
}),
// Cropper part
<Cropper
v-if="registerDataStore.cardOwner.avatar && !registerDataStore.imgReady"
class="mx-auto max-h-[350px] max-w-[350px] overflow-hidden rounded-lg border-2 border-skin-primary bg-skin-primary"
ref="cropper"
alt="User avatar"
drag-mode="move"
:src="registerDataStore.cardOwner.avatar"
// Other Cropper configurations...
></Cropper>