Custom Ui with p-fileUpload of primeng in angular 15

22 Views Asked by At

I am using p-fileUpload of primeng with angular 15. Here i am making custom Ui for p-fileUpload.Here I am while edit time I am getting file from the api so i want to set that file intop-fileUpload

below once is my html file code

\<p-fileUpload
    name="demo\[\]"
    accept="application/pdf,image/\*"
    (onSelect)="fileChangeEvent($event)"
    cancelLabel="PDF, Images"
    cancelIcon=" "
    chooseLabel=" "
    uploadIcon=" "
    chooseIcon="pi pi-upload"
    uploadLabel="Add File"
    maxFileSize="1000000"
\\>
\</p-fileUpload\>

and here below is my css

::ng-deep {
.upload_file .p-fileupload .p-fileupload-buttonbar {
    border: 1px dashed #5d5f6b !important;
    display: flex;
    align-items: center;
    padding: 13px;
}
.upload_file span.p-button.p-component.p-fileupload-choose.p-ripple {
    padding: 0;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background-color: #292929;
    border: 1px solid #292929;
    outline: none;
}
.upload_file .p-button .pi-upload {
    font-size: 28px;
}
.upload_file .p-fileupload-buttonbar p-button:nth-of-type(1) {
    position: relative;
    top: -6px;
    left: 6px;
    cursor: default;
}
.upload_file button.p-button.p-component.p-ripple {
    color: #393939;
    background: none;
    border: none;
    padding: 0;
    font-weight: 500;
    cursor: default;
    outline: none;
}
.upload_file .p-button .p-button-icon-left {
    margin-right: 0;
    color: #fff;
}
.upload_file .p-fileupload-buttonbar p-button:nth-of-type(2) {
    position: absolute;
    left: 82px;
    top: 40px;
    outline: none;
    cursor: default;
}
.upload_file .p-fileupload-buttonbar p-button:nth-of-type(2) .p-button.p-component.p-ripple {
    font-size: 11px;
    color: #959595;
}
.p-fileupload-content {
    border: none !important;
}
.p-fileupload-content .p-fileupload-files .p-fileupload-row \> div {
    width: auto;
}
button.p-button.p-component.p-button-icon-only {
    background-color: #292929;`your text`
    color: #fff;
}

}

Also my ts file codfe is as below


if (event.currentFiles && event.currentFiles.length) {
    this.uploadedFile = event.currentFiles\[0\];
}

I tried to change my currentfile array which is coming as event of selecting files

0

There are 0 best solutions below