Angular Create Link to downloaded zip file in ngfor [duplicate]

Question

I need to download a ZIP file and put a link to this file into my application, so user can click on it.

Current Code:

Service:

  public downloadFileWithAuthorization(urlOfFile: string, user: string, password: string) : Observable<any> {
        let headerParams: HttpHeaders = new HttpHeaders({
            "Content-Type": "application/x-www-form-urlencoded",
            "Authorization": "Basic " + btoa(user + ":" + password),
        });

        return this.http.get(urlOfFile, {
            reportProgress: false,
            observe: "events",
            headers: headerParams,
            responseType: "blob"
        })
    }

Resulting BLOB should be stored in an entity with some additional values:

export class URLEntity {
    path?: string;
    name?: string;
    fileContent?: any;
    fileUrl?: string;
}

After Download and assignment to zipFile[0] I create a link to it using createObjectUrl:

getDownloadFile() {
        this.downloadFileSub = this.downloadService.downloadFileWithAuthorization( this.emailMessage!.downloadURL![0].path!, this.user, this.password).subscribe(
            {
                next: value => {
                    this.zipFile[0].fileContent = value.body;
                    this.zipFile[0].fileUrl = window.URL.createObjectURL(this.zipFile[0].fileContent);
                        
                },
                error: err => {
                    new ErrorMessage(err.message, this.messageService).provide();
                    

                }
            }
        );
    }

and display in HTML form using ngFor, as from another code parts multiple files can be provided for the same view:

<div *ngFor="let urlentity of zipFile">
                            <button pButton pRipple icon="p-button-icon pi pi-file-edit"  link="true"
                                    class="p-button-rounded p-button-success mr-2">
                                <a href="{{urlentity.fileUrl}}" target="_blank" rel="noopener noreferrer">{{urlentity.name}}</a>
                            </button>
                        </div>

My problem now is that this in general works, I can download and open the ZIP file. However, in the console there is an error:

Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

Seems like this line

this.zipFile[0].fileUrl = window.URL.createObjectURL(this.zipFile[0].fileContent);

is not correct. Any idea how to solve it?

Naren Murali · Accepted Answer · 2024-10-04 10:10:13Z

1

You can convert the response to a blob, then pass it to createObjectURL, this seems to work.

downloadFile() {
  this.appSvc.getFile({ SomeData: '' }).subscribe((data) => {
    const blob = new Blob([data], { type: 'application/zip' });
    const url = window.URL.createObjectURL(blob);
    window.open(url);
  });
}

Stackblitz Demo

answered Oct 4, 2024 at 10:10

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Create Link to downloaded zip file in ngfor [duplicate]

1 Answer 1

Stackblitz Demo

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related