开发者

attach select on each file uploaded with dropzone in Angular 14

开发者 https://www.devze.com 2022-12-07 22:03 出处:网络
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 th

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>

.T开发者_StackOverflow社区S:

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号