attach select on each file uploaded with dropzone in Angular 14
I'm trying to add a select on every uploaded image using dropzone.js and angular, the select should be able to assign a tag to the image so that when saving the name to the database it knows where the image belongs.
The code I have is the following:
.HTML:
<div class="dropzone" [dropzone]="galleryconfig" (error)="onUploadError($event)" (success)="onUploadGallerySuccess($event)">
<div class="dz-message needsclick pt-5">
<i class="fi-image pt-3"></i>
<p>{{t('publication.upload_photo')}}</p>
</div>
</div>
const gallery_drozone_template = `<div class="dz-preview dz-file-preview">
<img data-dz-thumbnail />
<a href="javascript.void(0)" class="btn btn-icon shadow-sm dz-remove-image" data-dz-remove><i class="fi-trash"></i></a>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-success-mark"></div>
<div class="dz-error-mark"></div>
<select class=".gallery-select form-select">
<option>Choose option...</option>
<option>Option item 1</option>
<option>Option item 2</option>
<option>Option item 3</option>
</select>
</div>`;
@Component({
selector: 'app-add-business',
templateUrl: './add-business.component.html',
styleUrls: ['./add-business.component.scss']
})
galleryimages : any[];
galleryconfig = {
acceptedFiles: 'image/*',
createImageThumbnails: true,
maxFiles: 6,
parallelUploads: 1,
previewTemplate: gallery_drozone_template,
};
public onUploadGallerySuccess(event: any) {
let image = {
name : event[1].data.name,
tagsImages : []
}
this.galleryimages.push(image);
}
I don't know how to capture the option chosen in the select (.gallery-select) to be able to fill the tagsImages in the galleryimages variable, because I can't add the event (change) since it is inserted dynamically when dropzone loads the template.
I tried using QueryList to try to capture the selection event but it doesn't work.
If it is not possible to capture the event, I would like to see the correct way to add the input to each file that is loaded so that I can manipulate it with Angular as I normally would.
精彩评论