Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed

Issue

I want to download a zip file from server side in Google Chrome, the server was written by rust. The server side return the rust actix NameFile like this:

pub async fn download_project(
    _req: HttpRequest,
    form: web::Json<DownloadProj>
) -> actix_web::Result<impl actix_web::Responder> {
    let zip_path = handle_compress_proj(&form.0);
    match NamedFile::open(&zip_path) {
        Ok(fe) => {
            // Ok(NamedFile::into_response(fe, &req))
            Ok( fe.use_last_modified(true) )
        },
        Err(_) => Err(actix_web::error::ErrorBadRequest("File not Found") )
    }
}

this is the return content look like:

PK�=!X�f�@F)45e7bfd8344442049c22dd2e37f24ef6/main.texE�1� н��݃x�.�6���&���N����|�y�Z{*-l�mO�>y�i@�����PK.�=!X�f�@F)�45e7bfd8344442049c22dd2e37f24ef6/main.texPKW�

now I want to parse the content to .zip file in the client side typescript like this:

const handleProjDownload = (docItem: TexProjectModel) => {
        let proj : QueryDownload = {
            project_id: docItem.project_id,
            version: "1"
        };
        downloadProj(proj).then((resp) => {
            debugger
            const url = window.URL.createObjectURL(resp);
            const link = document.createElement('a');
            link.href = url;
            link.download = 'file.zip';
            link.click();
            window.URL.revokeObjectURL(url);
        });
    }

this client side typescript code shows error:

ProjectTab.tsx:74 Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
    at ProjectTab.tsx:74:36

Am I missing something? is it possible to parse the file on the client side? I have already tried to convert to blob on the client side like this:

downloadProj(proj).then((resp) => {
            debugger
            const bl = resp.blob();
            const url = window.URL.createObjectURL(bl);
            const link = document.createElement('a');
            link.href = url;
            link.download = 'file.zip';
            link.click();
            window.URL.revokeObjectURL(url);
       });

told the error Uncaught (in promise) TypeError: resp.blob is not a function. I alos tried the code like this:

downloadProj(proj).then((resp) => {
    const blob = new Blob([resp], { type: 'application/zip' }); 
    const url = window.URL.createObjectURL(blob);
    window.open(url);
});

But I can not open the downloaded zip file. when I using this command to download the file from server side, it works fine:

curl -H "Content-Type: application/json" -X PUT -d '{"project_id": "5ef2057551c24b5aa4d0e2cdadcbc524","version": "1"}'  -H "Authorization: Bearer eyJhbxxxxx" -o filename1.zip https://tex.example.top/tex/project/download

BTW, this is the downloadProj function look like:

export function downloadProj(req: QueryDownload) {
  const config: AxiosRequestConfig = {
    method: 'put',
    url: '/tex/project/download',
    data: JSON.stringify(req)
  };
  const actionTypeString: string = ProjectActionType[ProjectActionType.DOWNLOAD_PROJ];
  return XHRClient.requestWithActionType(config, actionTypeString, store);
}

Solution

So, the point is to convert response to blob and then make object URL. You can do it like this:

const blob = new Blob([data], { type: 'application/zip' }); 
const url = window.URL.createObjectURL(blob); 
window.open(url); // this will open download window

For this to work, it's needed to specify responseType: 'arraybuffer' to request.

Answered By - Milos Stojanovic