<dropzone class="dropzone" [config]="dropzoneConfig" [message]="'Drop files here or click to upload.'" (success)="onUploadSuccess($event)">
</dropzone>
                    
@if(uploadedFiles){
    <ul class="list-unstyled mb-0" id="dropzone-preview">
        @for (file of uploadedFiles; track $index) {
        <li class="mt-2" id="dropzone-preview-list">
            <!-- This is used as the file preview template -->
            <div class="border rounded">
                <div class="d-flex p-2">
                    <div class="flex-shrink-0 me-3">
                        <div class="avatar-sm bg-light rounded">
                            @if(file.dataURL){
                            <img class="img-fluid rounded d-block" [src]="file.dataURL" alt="Dropzone-Image" />
                            }@else{
                            <img class="img-fluid rounded d-block" [src]="file" alt="Dropzone-Image" />
                            }
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <div class="pt-1">
                            @if(file.name){
                            <h5 class="fs-md mb-1">{{ file.name }}</h5>
                            }
                            @if(file.size){
                            <p class="fs-sm text-muted mb-0">{{ file.size }}</p>
                            }
                            <strong class="error text-danger" data-dz-errormessage></strong>
                        </div>
                    </div>
                    <div class="flex-shrink-0 ms-3">
                        <button (click)="removeFile(file)" class="btn btn-sm btn-danger">Delete</button>
                    </div>
                </div>
            </div>
        </li>}
    </ul>
    }