В AMP есть способ показать выбранное изображение из формы ввода перед загрузкой?

Question

Я хочу показать изображение из файла формы ввода перед загрузкой с помощью AMP (на стороне клиента), я пытаюсь избежать процесса загрузки изображения во временную папку и загрузки его оттуда. эта форма предназначена для добавления элементов (с изображением) в список, и от него можно легко отказаться, поэтому я хочу избегать очистки потерянных изображений.

Я провел небольшое исследование и обнаружил, что все решения включают в себя Javascript, например это и это , но я предпочитаю не использовать javascript на "полном веб-сайте AMP).

Есть ли решение, использующее AMP для этой проблемы?

Answer 1

Я решил это. Я видел на этой странице, которая позволяет base64 в качестве значения src, поэтому я реализовал и конечную точку, которая получает изображение из формы и возвращает эти данные:

data:{content_type};base64,{coded_img}

Затем я использую *Атрибут 1006 * on устанавливает состояние с этими данными, а атрибут src изображения получает это значение.

<form id="item-form"
      method="post"
      action-xhr="//{{ request.get_host }}{% url 'submit-image' %}"
      target="_top"
      on="submit-success:AMP.setState({ currentItem: {imageUrl: event.response.image }})">
<input type='file' name='image'>
<button type='submit'></button></form>

<amp-img alt="Item Image"
         src=""
         [src]="currentItem['imageUrl']"
         width="150"
         height="150"
         layout="responsive">
</amp-img>

Answer 2

Это в настоящее время не поддерживается AMP. Одним из обходных путей является внедрение формы через iframe и реализация там селектора файлов с помощью JS.