Bdtjtk

How to Implement Drag and Drop for a bootstrap modal dialog.. So user can drag a file from the windows explorer.
At Present there is an EDIT button and if Click on that Edit button a modal dialog will open and in that I ahve to implement DRag and DRop.So that user can drag a file from the windows explorer.

     @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>