fix embed upload endpoint

Author: aguingand

resources/js/form/components/Field.vue

@@ -8,7 +8,7 @@
     import Editor from "./fields/editor/Editor.vue";
     import Geolocation from "./fields/geolocation/Geolocation.vue";
     import Html from "./fields/Html.vue";
-    import List from "./fields/List.vue";
+    import List from "./fields/list/List.vue";
     import Number from "./fields/Number.vue";
     import Select from "./fields/select/Select.vue";
     import Tags from "./fields/Tags.vue";

resources/js/form/components/fields/Autocomplete.vue

@@ -26,6 +26,7 @@
     import { useFullTextSearch } from "@/composables/useFullTextSearch";
     import { useRemoteAutocomplete } from "@/composables/useRemoteAutocomplete";
     import { useFieldContainerData } from "@/form/useFieldContainerData";
+    import { useParentListField } from "@/form/components/fields/list/useParentListField";
 
     const props = defineProps<FormFieldProps<FormAutocompleteLocalFieldData | FormAutocompleteRemoteFieldData>>();
     const emit = defineEmits<FormFieldEmits<FormAutocompleteLocalFieldData | FormAutocompleteRemoteFieldData>>();
@@ -43,13 +44,16 @@
             searchKeys: props.field.mode === 'local' ? props.field.searchKeys : [],
         }
     );
+    const parentListField = useParentListField();
     const fieldContainerData = useFieldContainerData(form);
     const { loading, search: remoteSearch } = useRemoteAutocomplete(({ query, signal, onSuccess, onError }) => {
         const field = props.field as FormAutocompleteRemoteFieldData;
         return api.post(
             route('code16.sharp.api.form.autocomplete.index', {
                 entityKey: form.entityKey,
-                autocompleteFieldKey: props.parentListField ? `${props.parentListField.key}.${field.key}` : field.key,
+                autocompleteFieldKey: parentListField && parentListField.form === form
+                    ? `${parentListField.props.field.key}.${field.key}`
+                    : field.key,
                 endpoint: field.remoteEndpoint,
                 search: query,
                 ...fieldContainerData,

resources/js/form/components/fields/editor/Editor.vue

@@ -86,7 +86,8 @@
         uploadModal,
         embedManager,
         embedModal,
-    } satisfies ParentEditor);
+        form,
+    });
 
     watch(() => [embedManager.contentEmbeds, uploadManager.contentUploads], () => {
         emit('input', {

resources/js/form/components/fields/editor/extensions/upload/UploadNode.vue

@@ -76,7 +76,6 @@
                 readOnly: parentEditor.props.field.readOnly,
             }"
             :field-error-key="`${parentEditor.props.fieldErrorKey}-upload-${props.node.attrs['data-key']}`"
-            :parent-list-field="parentEditor.props.parentListField"
             :editor-field="parentEditor.props.field"
             :value="upload?.file"
             as-editor-embed

resources/js/form/components/fields/editor/useParentEditor.ts

@@ -8,16 +8,17 @@ import EditorUploadModal from "@/form/components/fields/editor/extensions/upload
 import EditorEmbedModal from "@/form/components/fields/editor/extensions/embed/EditorEmbedModal.vue";
 
 /**
- * @see import('./Editor.vue') -> provide('editor')
+ * @see import('./Editor.vue')
  */
 export type ParentEditor = {
     props: FormFieldProps<FormEditorFieldData>,
     embedManager: ContentEmbedManager<Form>,
     embedModal: Ref<InstanceType<typeof EditorEmbedModal>>
     uploadManager: ContentUploadManager<Form>,
     uploadModal: Ref<InstanceType<typeof EditorUploadModal>>,
+    form: Form,
 };
 
 export function useParentEditor() {
-    return inject<ParentEditor>('editor');
+    return inject<ParentEditor>('editor', null);
 }

…urces/js/form/components/fields/List.vue …/js/form/components/fields/list/List.vueresources/js/form/components/fields/List.vue renamed to resources/js/form/components/fields/list/List.vue resources/js/form/components/fields/List.vue renamed to resources/js/form/components/fields/list/List.vue

@@ -3,7 +3,7 @@
     import { useParentForm } from "@/form/useParentForm";
     import { FormFieldData, FormListFieldData, FormUploadFieldData, FormUploadFieldValueData } from "@/types";
     import { getDependantFieldsResetData } from "@/form/util";
-    import { computed, nextTick, ref, watch, watchEffect } from "vue";
+    import { computed, nextTick, provide, ref, watch, watchEffect } from "vue";
     import { Button, buttonVariants } from '@/components/ui/button';
     import { showAlert } from "@/utils/dialogs";
     import { FieldMeta, FieldsMeta, FormFieldEmitInputOptions, FormFieldEmits, FormFieldProps } from "@/form/types";
@@ -22,11 +22,18 @@
     import { useSortable } from "@vueuse/integrations/useSortable";
     import { useEventListener, watchArray } from "@vueuse/core";
     import { FormEvents } from "@/form/Form";
+    import { ParentListField } from "@/form/components/fields/list/useParentListField";
 
     const props = defineProps<FormFieldProps<FormListFieldData>>();
     const emit = defineEmits<FormFieldEmits<FormListFieldData>>();
 
     const form = useParentForm();
+
+    provide<ParentListField>('listField', {
+        props,
+        form,
+    });
+
     const canAddItem = computed(() => {
         const { field, value } = props;
         return field.addable &&
@@ -226,7 +233,6 @@
                                                             :field="form.getField(itemFieldLayout.key, field.itemFields, item, props.field.readOnly)"
                                                             :field-layout="itemFieldLayout"
                                                             :field-error-key="`${field.key}.${item[errorIndex] ?? item[itemKey]}.${itemFieldLayout.key}`"
-                                                            :parent-list-field="field"
                                                             :value="item[itemFieldLayout.key]"
                                                             :locale="(form.getMeta(`${field.key}.${item[itemKey]}.${itemFieldLayout.key}`) as FieldMeta)?.locale ?? form.defaultLocale"
                                                             :parent-data="item"

resources/js/form/components/fields/list/useParentListField.ts

@@ -0,0 +1,16 @@
+import { FormFieldProps } from "@/form/types";
+import { FormListFieldData } from "@/types";
+import { inject } from "vue";
+import { Form } from "@/form/Form";
+
+export type ParentListField = {
+    props: FormFieldProps<FormListFieldData>,
+    form: Form,
+}
+
+/**
+ * @see import('./List.vue')
+ */
+export function useParentListField() {
+    return inject<ParentListField>('listField', null);
+}

resources/js/form/components/fields/upload/Upload.vue

@@ -42,9 +42,10 @@
     import { rotate, rotateTo } from "@/form/components/fields/upload/util/rotate";
     import { createThumbnail } from "@/form/components/fields/upload/util/thumbnail";
     import { useFieldContainerData } from "@/form/useFieldContainerData";
+    import { useParentEditor } from "@/form/components/fields/editor/useParentEditor";
+    import { useParentListField } from "@/form/components/fields/list/useParentListField";
 
     const props = defineProps<FormFieldProps<FormUploadFieldData> & {
-        editorField?: FormEditorFieldData,
         asEditorEmbed?: boolean,
         legend?: string,
         dropdownEditLabel?: string,
@@ -68,6 +69,8 @@
         (e: 'edit', event: CustomEvent): void
     }>();
     const form = useParentForm();
+    const parentEditor = useParentEditor();
+    const parentListField = useParentListField();
     const transformedImg = ref<string>();
     const persistedEditableImg = ref<string>();
     const playablePreviewUrl = ref<string>();
@@ -76,6 +79,22 @@
         return props.value && canTransform(props.value.name, props.value.mime_type) && !props.hasError
             || !!props.dropdownEditLabel;
     });
+    const fieldContainerData = useFieldContainerData(form);
+    const uploadEndpoint = computed(() => {
+        // we check form equality because the field may be in an editor embed
+        // so parentEditor can be the embed parent editor and not an embed form field
+        let uploadFieldKey = parentEditor && parentEditor.form === form
+            ? parentEditor.props.field.key
+            : props.field.key;
+        if(parentListField && parentListField.form === form) {
+            uploadFieldKey = `${parentListField.props.field.key}.${uploadFieldKey}`;
+        }
+        return route('code16.sharp.api.form.upload', {
+            entityKey: form.entityKey,
+            uploadFieldKey,
+            ...fieldContainerData,
+        });
+    });
     const uppy = new Uppy({
         id: props.fieldErrorKey,
         restrictions: {
@@ -95,13 +114,7 @@
         autoProceed: true,
     })
         .use(XHRUpload, {
-            endpoint: route('code16.sharp.api.form.upload', {
-                entityKey: form.entityKey,
-                uploadFieldKey: props.parentListField
-                    ? `${props.parentListField.key}.${props.editorField?.key ?? props.field.key}`
-                    : props.editorField?.key ?? props.field.key,
-                ...useFieldContainerData(form),
-            }),
+            endpoint: uploadEndpoint.value,
             fieldName: 'file',
             headers: {
                 'Accept': 'application/json',

resources/js/form/types.ts

@@ -23,7 +23,6 @@ export type WithDynamicAttributesApplied<Data extends FormFieldData> =
 
 export type FormFieldProps<Data extends FormFieldData = FormFieldData, Value = Data['value']> = {
     field: WithDynamicAttributesApplied<Data>,
-    parentListField?: FormListFieldData,
     fieldLayout?: LayoutFieldData,
     fieldErrorKey?: string,
     parentData?: FormFieldData | FormListFieldData['value'][number],