How to fix property file is undefined in ion-input type file
How to fix property file is undefined in ion-input type file
I'm developing Ionic 3 mobile app and I want to upload images from the mobile app to web API. For that, I'm using POST method to send the image. I'm trying to upload the image as a multipart file because the server is expecting a multipart file. Therefore I added an input field to choose the file such as. Next, I created the changeListener() event to send the image to the server.
changeListener()
<ion-input type="file" accept="image/*" id="upload" [(ngModel)]="imagePath" (ionChange)="changeListener($event)"></ion-input>
changeListener($event): void
this.imagePath = $event.target.files[0];
console.log($event.target.files[0])
this.imageProvider.uploadImage(this.imagePath)
When I choose the file it's giving me a typeError such as "cannot read the property file of undefined".
Can anyone help with this problem?
$event
I added the HTML part
– Udara Indrajith
Sep 12 '18 at 15:36
What does
console.log($event) print?– Amit Chigadani
Sep 12 '18 at 15:39
console.log($event)
TextInput _config: Config, _elementRef: ElementRef, _renderer: RendererAdapter, _componentName: "input", _mode: "md", …autocomplet …}_readonly: false_relocated: false_renderer: RendererAdapter delegate: DebugRenderer2_scrollData: null_type: "file"_useAssist: true_value: "C:fakepath15915100635_fdd8bc8554_k.jpg"proto: BaseInput
– Udara Indrajith
Sep 12 '18 at 15:45
1 Answer
1
Change ionChange to change.
ionChange
change
<ion-input type="file" accept="image/*" id="upload"
[(ngModel)]="imagePath"
(change)="changeListener($event)"></ion-input>
Working example
I change the code now I'm getting another error such as "Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string"
– Udara Indrajith
Sep 13 '18 at 3:20
Is your early error fixed?
– Sudarshana Dayananda
Sep 13 '18 at 3:23
yes I make change the ionChange to change
– Udara Indrajith
Sep 13 '18 at 3:26
Then accept this as correct answer and post your new error as a new question.
– Sudarshana Dayananda
Sep 13 '18 at 3:27
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Can you add to your post the content of the
$event?– Jacopo Sciampi
Sep 12 '18 at 15:10