Is there a way in AMP to show the selected image from input form before upload?

Question

I want to show the image from input form file before upload using AMP (in client side), I am trying to avoid the process of upload the image in a temporary folder and load it from there. this form is to add items (with image) to a list and it can be easily abandoned, so I want to avoid to purge orphan images.

I did a little research and found that all solutions involves Javascript, like this and this but I prefer not to use javascript in a "full AMP website).

Is there a solution using AMP for this problem?

Answer 1

That's currently not supported by AMP. One workaround is to embed the form via iframe and implement the file selector there using JS.

Answer 2

I solved it. I saw in this page that allows base64 as a src value, so I implemented and endpoint that receive the image from a form and return this data:

data:{content_type};base64,{coded_img}

Then I use the on attribute to set a state with this data and the src attribute of the image gets that value.

<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>