React-admin: загрузка нескольких изображений на s3 одновременно - PullRequest
Новая
       27

React-admin: загрузка нескольких изображений на s3 одновременно

0 голосов
/ 03 февраля 2020

Я пытаюсь создать страницу создания одной формы для сущности со встроенным массивом других сущностей (который имеет другой уровень глубины). Всем сущностям и встроенным сущностям разрешено (но не обязательно) прикреплять изображение. Для ввода изображения используется пользовательская конечная точка API-платформы для загрузки изображения в AWS s3, а затем возвращается сгенерированный URL-адрес, который копируется в соответствии с текстовым полем. Это работает так, как я хочу, когда я создаю сущность с одним полем изображения.

My Image Uploader:

(Не стесняйтесь критиковать меня за то, как я проверяю, имеет ли изображение изменилось - я рад узнать) 

const ImageUploader = () => (
    <>
      <ImageInput source="imageUpload" label="image">
        <ImageField source="imageUpload" title="title"/>
      </ImageInput>
      <ImageInput source="imageChecker" label="" options={{hidden: true}}> 
      </ImageInput>
      <TextInput source="image" label="Image path"/>
      <FormDataConsumer>
        {
          ({formData}) => {
            if (typeof formData === 'undefined' || typeof formData.imageUpload === 'undefined') {
              return;
            }
            if (formData.imageChecker === null || formData.imageUpload !== formData.imageChecker) {
              formData.imageChecker = formData.imageUpload;
              formData.image = getImagePath(formData.imageUpload);
            }
          }
        }
      </FormDataConsumer>
    </> 
);

В чем проблема:

Проблема в том, что когда у меня есть несколько полей ImageUploader в поле Create, загрузка изображения в один из загрузчиков копирует эффект для всех остальных загрузчиков и ввода текста. Само изображение также загружается во все загрузчики изображений.

Пример моей формы с несколькими загрузчиками изображений: 

const FooBarCreate = props => (
    <CreateGuesser {...props}>

        ...

        <ImageUploader/>

        <ArrayInput fullWidth={true}  source="Foo">
            <SimpleFormIterator>

                ...

                <ImageUploader/>

                <ArrayInput fullWidth={true}   label="Bar" source="Bar">
                    <SimpleFormIterator>

                        ...

                        <FormDataConsumer>
                            {
                               some logic unrelated to images
                            }
                        </FormDataConsumer>
                    </SimpleFormIterator>
                </ArrayInput>
            </SimpleFormIterator>
        </ArrayInput>
    </CreateGuesser>
);

Я предполагаю, что программа не может распознать, какое поле я я пытаюсь присвоить значение, так как все их исходные имена image, и я не знаю, как решить эту проблему.

Что я пробовал:

  • вокруг ImageUploader с тегом <SimpleForm> вместо пустого тега, не повезло, только генерирует кнопки save повсюду.

1 Ответ

0 голосов
/ 15 апреля 2020

Причина в том, что ваш множественный ImageInput использует один и тот же источник imageUpload. React-admin использует источник для чтения и изменения данных формы. Поэтому, когда изменяется один ImageInput, все другие меняются вместе с ним.

Вам нужно будет определить другой источник для внутренней части. Самый простой способ - передать свойство префикса источника извне.

как это: 

<ImageUploader source="image1" />

const ImageUploader = ({source, ...props}) => (
    <>
      <ImageInput source=`${source}imageUpload` label="image">
        <ImageField source="imageUpload" title="title"/>
      </ImageInput>
      <ImageInput source=`${source}imageChecker` label="" options={{hidden: true}}/>
      <TextInput source=`${source}image` label="Image path"/>
    <>
)
...