React.js to pain HTML: how to convert imageupload.html react code into angular 6 HTML code?

Question

onChange(e) {
      const file = e.target.files[0];
      Storage.put('example.png', file, {
          contentType: 'image/png'
      })
      .then (result => console.log(result))
      .catch(err => console.log(err));
  }

imageupload.html

<input type="file" accept='image/png' onChange={(evt) => this.onChange(evt)}/>

So the following code is in react.How can I write the following code in an angular 6 HTML file? Mainly how to write thisonChange={(evt) => this.onChange(evt)} part in HTML?

For see the original code: https://docs.amplify.aws/lib/storage/upload/q/platform/js#browser-uploads

Does this answer your question? [Angular File Upload](https://stackoverflow.com/questions/47936183/angular-file-upload) — Dane Brouwer, May 05 '20 at 05:47
Yes, I get the idea. But how can I write ```onChange={(evt) => this.onChange(evt)}``` this in HTML of my angular — Toufiqur Rahman, May 05 '20 at 06:04

score 0 · Answer 1 · answered May 05 '20 at 06:20

0

HTML also have the onchange event attribute you can just call the function in the html like: <input type="file" accept='image/png' onchange="onChange(this.value)"/>

answered May 05 '20 at 06:20

shayansolutions

1

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

To copy+paste directly from the SO Post I mentioned;

<input 
    type="file"
    id="file"
    (change)="handleFileInput($event.target.files)"
>

So all we need to do to get this to work with your code is the following:

<input 
    type="file"
    id="file"
    (change)="onChange($event)" 
>

Notice how (change) is now slightly different.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 05 '20 at 07:02

Dane Brouwer

2,827
1
22
30

React.js to pain HTML: how to convert imageupload.html react code into angular 6 HTML code?

2 Answers2

To copy+paste directly from the SO Post I mentioned;