Image upload: Angular 6












0















I am having issues in image upload. There are two image upload section, in first upload it works fine. but when I am uploading in second upload image only changes in first section. Below are the code details:



<div class="upload">
<div class="center_image">
<div class="image-upload">
<label for="file-input">
<img *ngIf="!url1==true" src="/assets/images/upload.png">
<img [src]="url1" height="60">
</label>

<input id="file-input" type="file" (change)="readUrl($event)" />
</div>
<h6 *ngIf="!url1==true" class="font_u">
Upload Front</h6>
<br>
<div class="li_ol">
<p>The following details must be clearly visible :</p>
<ol>
<li>Name</li>
<li>Date of Birth
</li>
<li>Gender</li>
<li> Aadhaar number
</li>
<li>Photograph</li>
</ol>
</div>
</div>
</div>
<div class="upload">
<div class="center_image">
<div class="image-upload">
<label for="file-input">
<img *ngIf="!url2==true" src="/assets/images/upload.png">
<img [src]="url2" height="60">
</label>

<input id="file-input" type="file" (change)="onSelectFileBack($event)" />
</div>
<h6 *ngIf="!url2==true" class="font_u">
Upload Back</h6>
<br>
<div class="li_ol">
<p>The following details must be clearly visible :</p>
<ol>
<li>Address</li>

<li> Aadhaar number
</li>

</ol>
</div>
</div>
</div>


Javascript:



readUrl(event: any) {
alert(event);
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();

reader.onload = (event: any) => {
this.url1 = event.target.result;
}

reader.readAsDataURL(event.target.files[0]);
}


}



onSelectFileBack(event: any) {
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();

reader.onload = (event: any) => {
this.url2 = event.target.result;
}

reader.readAsDataURL(event.target.files[0]);
}


}



In both the uploads image only uploads on first section but both the div's and even functions are different.










share|improve this question























  • it's working file on my system

    – AkshayM
    Nov 13 '18 at 7:02
















0















I am having issues in image upload. There are two image upload section, in first upload it works fine. but when I am uploading in second upload image only changes in first section. Below are the code details:



<div class="upload">
<div class="center_image">
<div class="image-upload">
<label for="file-input">
<img *ngIf="!url1==true" src="/assets/images/upload.png">
<img [src]="url1" height="60">
</label>

<input id="file-input" type="file" (change)="readUrl($event)" />
</div>
<h6 *ngIf="!url1==true" class="font_u">
Upload Front</h6>
<br>
<div class="li_ol">
<p>The following details must be clearly visible :</p>
<ol>
<li>Name</li>
<li>Date of Birth
</li>
<li>Gender</li>
<li> Aadhaar number
</li>
<li>Photograph</li>
</ol>
</div>
</div>
</div>
<div class="upload">
<div class="center_image">
<div class="image-upload">
<label for="file-input">
<img *ngIf="!url2==true" src="/assets/images/upload.png">
<img [src]="url2" height="60">
</label>

<input id="file-input" type="file" (change)="onSelectFileBack($event)" />
</div>
<h6 *ngIf="!url2==true" class="font_u">
Upload Back</h6>
<br>
<div class="li_ol">
<p>The following details must be clearly visible :</p>
<ol>
<li>Address</li>

<li> Aadhaar number
</li>

</ol>
</div>
</div>
</div>


Javascript:



readUrl(event: any) {
alert(event);
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();

reader.onload = (event: any) => {
this.url1 = event.target.result;
}

reader.readAsDataURL(event.target.files[0]);
}


}



onSelectFileBack(event: any) {
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();

reader.onload = (event: any) => {
this.url2 = event.target.result;
}

reader.readAsDataURL(event.target.files[0]);
}


}



In both the uploads image only uploads on first section but both the div's and even functions are different.










share|improve this question























  • it's working file on my system

    – AkshayM
    Nov 13 '18 at 7:02














0












0








0








I am having issues in image upload. There are two image upload section, in first upload it works fine. but when I am uploading in second upload image only changes in first section. Below are the code details:



<div class="upload">
<div class="center_image">
<div class="image-upload">
<label for="file-input">
<img *ngIf="!url1==true" src="/assets/images/upload.png">
<img [src]="url1" height="60">
</label>

<input id="file-input" type="file" (change)="readUrl($event)" />
</div>
<h6 *ngIf="!url1==true" class="font_u">
Upload Front</h6>
<br>
<div class="li_ol">
<p>The following details must be clearly visible :</p>
<ol>
<li>Name</li>
<li>Date of Birth
</li>
<li>Gender</li>
<li> Aadhaar number
</li>
<li>Photograph</li>
</ol>
</div>
</div>
</div>
<div class="upload">
<div class="center_image">
<div class="image-upload">
<label for="file-input">
<img *ngIf="!url2==true" src="/assets/images/upload.png">
<img [src]="url2" height="60">
</label>

<input id="file-input" type="file" (change)="onSelectFileBack($event)" />
</div>
<h6 *ngIf="!url2==true" class="font_u">
Upload Back</h6>
<br>
<div class="li_ol">
<p>The following details must be clearly visible :</p>
<ol>
<li>Address</li>

<li> Aadhaar number
</li>

</ol>
</div>
</div>
</div>


Javascript:



readUrl(event: any) {
alert(event);
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();

reader.onload = (event: any) => {
this.url1 = event.target.result;
}

reader.readAsDataURL(event.target.files[0]);
}


}



onSelectFileBack(event: any) {
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();

reader.onload = (event: any) => {
this.url2 = event.target.result;
}

reader.readAsDataURL(event.target.files[0]);
}


}



In both the uploads image only uploads on first section but both the div's and even functions are different.










share|improve this question














I am having issues in image upload. There are two image upload section, in first upload it works fine. but when I am uploading in second upload image only changes in first section. Below are the code details:



<div class="upload">
<div class="center_image">
<div class="image-upload">
<label for="file-input">
<img *ngIf="!url1==true" src="/assets/images/upload.png">
<img [src]="url1" height="60">
</label>

<input id="file-input" type="file" (change)="readUrl($event)" />
</div>
<h6 *ngIf="!url1==true" class="font_u">
Upload Front</h6>
<br>
<div class="li_ol">
<p>The following details must be clearly visible :</p>
<ol>
<li>Name</li>
<li>Date of Birth
</li>
<li>Gender</li>
<li> Aadhaar number
</li>
<li>Photograph</li>
</ol>
</div>
</div>
</div>
<div class="upload">
<div class="center_image">
<div class="image-upload">
<label for="file-input">
<img *ngIf="!url2==true" src="/assets/images/upload.png">
<img [src]="url2" height="60">
</label>

<input id="file-input" type="file" (change)="onSelectFileBack($event)" />
</div>
<h6 *ngIf="!url2==true" class="font_u">
Upload Back</h6>
<br>
<div class="li_ol">
<p>The following details must be clearly visible :</p>
<ol>
<li>Address</li>

<li> Aadhaar number
</li>

</ol>
</div>
</div>
</div>


Javascript:



readUrl(event: any) {
alert(event);
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();

reader.onload = (event: any) => {
this.url1 = event.target.result;
}

reader.readAsDataURL(event.target.files[0]);
}


}



onSelectFileBack(event: any) {
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();

reader.onload = (event: any) => {
this.url2 = event.target.result;
}

reader.readAsDataURL(event.target.files[0]);
}


}



In both the uploads image only uploads on first section but both the div's and even functions are different.







javascript angular image-upload






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 13 '18 at 6:46









kunalkunal

36




36













  • it's working file on my system

    – AkshayM
    Nov 13 '18 at 7:02



















  • it's working file on my system

    – AkshayM
    Nov 13 '18 at 7:02

















it's working file on my system

– AkshayM
Nov 13 '18 at 7:02





it's working file on my system

– AkshayM
Nov 13 '18 at 7:02












2 Answers
2






active

oldest

votes


















0














The file input in the first section:



   <input id="file-input" type="file" (change)="readUrl($event)" />


has the same id as the file input in the second section:



   <input id="file-input" type="file" (change)="onSelectFileBack($event)" />


Change one of them so that they are each unique.






share|improve this answer
























  • If I am changing any one one of the then that input section is not working!

    – kunal
    Nov 13 '18 at 7:14



















0














Tried creating stackblitz with same code as above and it is working as expected. only respective input filed change events are getting trigged.



https://stackblitz.com/edit/angular-hmuzzd?file=src%2Fapp%2Fapp.component.ts






share|improve this answer
























  • I don't know what is happening with code it is always calling readurl function.

    – kunal
    Nov 13 '18 at 12:08











  • can you create stackblitz. will validate

    – Suresh Kumar Ariya
    Nov 13 '18 at 12:17











  • In stackblitz code is working perfectly by in my system it creates issue. One more thing if i removed id from input id="file-input" or even change something is id then event file system is not working

    – kunal
    Nov 14 '18 at 5:51











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53275288%2fimage-upload-angular-6%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














The file input in the first section:



   <input id="file-input" type="file" (change)="readUrl($event)" />


has the same id as the file input in the second section:



   <input id="file-input" type="file" (change)="onSelectFileBack($event)" />


Change one of them so that they are each unique.






share|improve this answer
























  • If I am changing any one one of the then that input section is not working!

    – kunal
    Nov 13 '18 at 7:14
















0














The file input in the first section:



   <input id="file-input" type="file" (change)="readUrl($event)" />


has the same id as the file input in the second section:



   <input id="file-input" type="file" (change)="onSelectFileBack($event)" />


Change one of them so that they are each unique.






share|improve this answer
























  • If I am changing any one one of the then that input section is not working!

    – kunal
    Nov 13 '18 at 7:14














0












0








0







The file input in the first section:



   <input id="file-input" type="file" (change)="readUrl($event)" />


has the same id as the file input in the second section:



   <input id="file-input" type="file" (change)="onSelectFileBack($event)" />


Change one of them so that they are each unique.






share|improve this answer













The file input in the first section:



   <input id="file-input" type="file" (change)="readUrl($event)" />


has the same id as the file input in the second section:



   <input id="file-input" type="file" (change)="onSelectFileBack($event)" />


Change one of them so that they are each unique.







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 13 '18 at 7:00









Myk WillisMyk Willis

5,89411936




5,89411936













  • If I am changing any one one of the then that input section is not working!

    – kunal
    Nov 13 '18 at 7:14



















  • If I am changing any one one of the then that input section is not working!

    – kunal
    Nov 13 '18 at 7:14

















If I am changing any one one of the then that input section is not working!

– kunal
Nov 13 '18 at 7:14





If I am changing any one one of the then that input section is not working!

– kunal
Nov 13 '18 at 7:14













0














Tried creating stackblitz with same code as above and it is working as expected. only respective input filed change events are getting trigged.



https://stackblitz.com/edit/angular-hmuzzd?file=src%2Fapp%2Fapp.component.ts






share|improve this answer
























  • I don't know what is happening with code it is always calling readurl function.

    – kunal
    Nov 13 '18 at 12:08











  • can you create stackblitz. will validate

    – Suresh Kumar Ariya
    Nov 13 '18 at 12:17











  • In stackblitz code is working perfectly by in my system it creates issue. One more thing if i removed id from input id="file-input" or even change something is id then event file system is not working

    – kunal
    Nov 14 '18 at 5:51
















0














Tried creating stackblitz with same code as above and it is working as expected. only respective input filed change events are getting trigged.



https://stackblitz.com/edit/angular-hmuzzd?file=src%2Fapp%2Fapp.component.ts






share|improve this answer
























  • I don't know what is happening with code it is always calling readurl function.

    – kunal
    Nov 13 '18 at 12:08











  • can you create stackblitz. will validate

    – Suresh Kumar Ariya
    Nov 13 '18 at 12:17











  • In stackblitz code is working perfectly by in my system it creates issue. One more thing if i removed id from input id="file-input" or even change something is id then event file system is not working

    – kunal
    Nov 14 '18 at 5:51














0












0








0







Tried creating stackblitz with same code as above and it is working as expected. only respective input filed change events are getting trigged.



https://stackblitz.com/edit/angular-hmuzzd?file=src%2Fapp%2Fapp.component.ts






share|improve this answer













Tried creating stackblitz with same code as above and it is working as expected. only respective input filed change events are getting trigged.



https://stackblitz.com/edit/angular-hmuzzd?file=src%2Fapp%2Fapp.component.ts







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 13 '18 at 7:42









Suresh Kumar AriyaSuresh Kumar Ariya

4,4781215




4,4781215













  • I don't know what is happening with code it is always calling readurl function.

    – kunal
    Nov 13 '18 at 12:08











  • can you create stackblitz. will validate

    – Suresh Kumar Ariya
    Nov 13 '18 at 12:17











  • In stackblitz code is working perfectly by in my system it creates issue. One more thing if i removed id from input id="file-input" or even change something is id then event file system is not working

    – kunal
    Nov 14 '18 at 5:51



















  • I don't know what is happening with code it is always calling readurl function.

    – kunal
    Nov 13 '18 at 12:08











  • can you create stackblitz. will validate

    – Suresh Kumar Ariya
    Nov 13 '18 at 12:17











  • In stackblitz code is working perfectly by in my system it creates issue. One more thing if i removed id from input id="file-input" or even change something is id then event file system is not working

    – kunal
    Nov 14 '18 at 5:51

















I don't know what is happening with code it is always calling readurl function.

– kunal
Nov 13 '18 at 12:08





I don't know what is happening with code it is always calling readurl function.

– kunal
Nov 13 '18 at 12:08













can you create stackblitz. will validate

– Suresh Kumar Ariya
Nov 13 '18 at 12:17





can you create stackblitz. will validate

– Suresh Kumar Ariya
Nov 13 '18 at 12:17













In stackblitz code is working perfectly by in my system it creates issue. One more thing if i removed id from input id="file-input" or even change something is id then event file system is not working

– kunal
Nov 14 '18 at 5:51





In stackblitz code is working perfectly by in my system it creates issue. One more thing if i removed id from input id="file-input" or even change something is id then event file system is not working

– kunal
Nov 14 '18 at 5:51


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53275288%2fimage-upload-angular-6%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Florida Star v. B. J. F.

Danny Elfman

Lugert, Oklahoma