I have a form with a div and an img where the user's current photo is. I created an icon at the top of the img which, when clicked, activates the dropzone directive and opens the box to choose a new photo. The problem is that when selecting the photo, a dynamic div is generated by the drop zone itself, as the documentation explains, and what I want is for the image to be reloaded in the img and in the template I've already created. I'm trying to use the previewTemplate but this is not what I want, I do not want to create a new template and I want the image to be reloaded inside my div with the current img. It's possible? How can I bind an id in previewTemplate to reference my div with img that already exists to only change the src of img? I'm using angular version 8.
I have a form with a div and an img where the user's current photo is. I created an icon at the top of the img which, when clicked, activates the dropzone directive and opens the box to choose a new photo. The problem is that when selecting the photo, a dynamic div is generated by the drop zone itself, as the documentation explains, and what I want is for the image to be reloaded in the img and in the template I've already created. I'm trying to use the previewTemplate but this is not what I want, I do not want to create a new template and I want the image to be reloaded inside my div with the current img. It's possible? How can I bind an id in previewTemplate to reference my div with img that already exists to only change the src of img? I'm using angular version 8.
Example:
< div fxLayout="column" > < img [src]='assets/images/{{photo}}.jpg' /> < mat-icon class="material-icons" [dropzone]="config" (init)="onUploadInit($event)" color="primary">photo_camera < / div>
Component:
public config: DropzoneConfigInterface = { clickable: true, maxFiles: 1, autoReset: null, errorReset: null, cancelReset: null, previewTemplate: ? };
https://stackblitz.com/edit/angular-uvvw3w