html - 如何为引导模式对话框实现拖放。所以用户可以从 Windows 资源管理器中拖动文件

Question

如何为引导模式对话框实现拖放。所以用户可以从 Windows 资源管理器中拖动文件。目前有一个编辑按钮，如果单击该编辑按钮，将打开一个模态对话框，我可以在其中实现 DRag 和 DRop。这样用户就可以从 Windows 资源管理器中拖动文件。

     @Input() isUploadImage: boolean;
     @Output() openImageUploadModal = new EventEmitter();
     
     onUploadBtnClick(){
            this.openImageUploadModal.emit('Open');
        }

    openImageUploadModal(content) {
        this.modalService.open(content, { centered: true });
      }

      // fileChangeEvent(event: any): void {
      //   this.imageChangedEvent = event;
      // }
      imageCropped(event: ImageCroppedEvent) {
        if (event.base64.indexOf('data:image/jpeg;base64,') > -1) {
          this.croppedImage = event.base64.split('data:image/jpeg;base64,')[1];
        } else {
          this.croppedImage = event.base64.split('data:image/png;base64,')[1];
        }
      }

      imageLoaded() {
        this.cropperReady = true;
      }

      loadImageFailed() {

      }

      saveCroppedImage() {
        this.imagePath = this.croppedImage;
        this.myprofile.Photo = this.editPhoto === this.croppedImage ? this.editPhoto : this.croppedImage;
        console.log('this.createNewProfile: ', this.createNewProfile);
        this.advisorbranding.saveUpdateBrand(this.myprofile, this.createNewProfile).
          subscribe(() => {
            console.log('Profile Image updated..');
          }, (err) => {
            console.log('save Api failed, err: ', err);
          });
      }

      deletPhoto() {
        this.editPhoto = ProfileImageData.defaultImage;
        // this.croppedImage = this.editPhoto;
        //  this.saveCroppedImage();
      }
     <div class="outer-div-for-the-imgae-icon">
                                        <app-image [imagesrc]="imagePath" [isUploadImage]="true" (openImageUploadModal)="openImageUploadModal(content)" style="width : 38%; margin-top: 30px;"
                                            class="d-none d-sm-block" alt="..." ></app-image>
                                   
                                    </div>
     <div class="upload-icon" *ngIf="isUploadImage" (click)="onUploadBtnClick()" >
        <i  class="fa fa-pencil fa-lg img-upload-icon" aria-hidden="true"> EDIT</i>
     </div>
     <input #inputFile id="filereader" type="file" (change)="onFileChange($event)" style="visibility: hidden;" />

    <ng-template #content let-modal >
        <div class="modal-header">
          <h4 class="modal-title">Edit Photo</h4>
          <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" id="image-upload-modal">
               <image-cropper
                [imageBase64]="'data:image/png;base64,' + editPhoto"
                [maintainAspectRatio]="true"
                [aspectRatio]="4 / 3"
                [resizeToWidth]="128"
                [roundCropper]="false"
                format="png"
                outputType="both"
                (imageCropped)="imageCropped($event)"
                (imageLoaded)="imageLoaded()"
                (loadImageFailed)="loadImageFailed()"
                style="max-height: 33vh"
                [style.display]="cropperReady ? null : 'none'"
            ></image-cropper>
            <h6 style="color: white;font-size: 10px;text-align: center; position: relative;
            top: 10px;">Drag a reposition photo</h6>
        </div>
        <div class="modal-footer">
                <button type="button" class="btn btn-light button" (click)="deletPhoto();">DELETE PHOTO</button>
                <button type="button" class="btn btn-light buttonbg" (click)="inputFile.click();">UPLOAD NEW</button>
                <button type="button" class="btn btn-light" (click)="modal.close('Close click'); saveCroppedImage();">SAVE PHOTO</button>
        </div>
    </ng-template>

标签： htmlangularbootstrap-modal