Get file content (not download) via HTTP request

[Matthew Marichiba]

I need to get file contents into my app directly from a FileManager action. For example, when I double-click a file, I want to make an HTTP request to the FileService API to return the file content in the Body. I want to get the data as the result of the HTTP request (not treated as a downloaded by the browser).

Below is my attempt. Calling `getFile().subscribe(res => handleResponse(res)` activates the HTTP request, and the request gets made. The response body has the file content. But somehow the response creates a browser error, and I never get the data. I'd appreciate a hint on how to do this correctly. Thanks!

    /**
     * Retrieves a file from the SyncFusion file service.
     */
     public getFile(downloadUrl: string, file: ISyncFusionFileDescriptor): Observable<string> {
        const httpFormData = this.makeDownloadFormData(file);

        // These are my best guess at headers, based on the headers I observe on FileManager's AJAX requests
        const headers = new HttpHeaders();
        headers.set('Content-Type', 'application/x-www-form-urlencoded');
        headers.set('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9');
        headers.set('Sec-Fetch-Dest', 'document');
        headers.set('Sec-Fetch-Mode', 'no-cors');
        headers.set('Sec-Fetch-Site', 'cross-site');
        headers.set('Sec-Fetch-User', '?1');
        headers.set('Upgrade-Insecure-Requests', '1');


        return this._http.post(downloadUrl, httpFormData, { headers: headers });
    }


    /** Forms a FormData for a download request for a given file descriptor. */
    private makeDownloadFormData(file: ISyncFusionFileDescriptor): FormData {
        const downloadReq: ISyncFusionDownloadRequest = {
            action: 'download',
            path: file.filterPath,
            names: [ file.name ],
            data: [ file ]
        }

        const downloadReqStr = JSON.stringify(downloadReq);
        const httpFormData = new FormData();
        httpFormData.append("downloadInput", downloadReqStr);


        return httpFormData;
    }



[Matthew Marichiba]

I figured out my own problem. For one, I was forming my HttpHeaders incorrectly; I needed to chain ".append()"s. However, the headers weren't the core of the problem.

The bigger issue is that I needed to customize Angular's `HttpClient.post()` with HttpOptions to instruct it to get just the response body text, and not try to parse it as JSON.

    /**
     * Retrieves a file from the SyncFusion file service.
     */ 
    public getFile(downloadUrl: string, file: ISyncFusionFileDescriptor): Observable {
        const httpFormData = this.makeDownloadFormData(file);
        const headers = new HttpHeaders()
            .append('Accept', 'text/*');

        const httpOptions: unknown = {
            headers: headers,
            observe: 'body',
            responseType: 'text'
        };
        return this._http.post<any>(downloadUrl, httpFormData, httpOptions);
​    }


    /** Forms a FormData for a download request for a given file descriptor. */
    private makeDownloadFormData(file: ISyncFusionFileDescriptor): FormData {
        const downloadReq: ISyncFusionDownloadRequest = {
            action: 'download',
            path: file.filterPath,
            names: [ file.name ],
            data: [ file ]
        }

        const downloadReqStr = JSON.stringify(downloadReq);
        const httpFormData = new FormData();
        httpFormData.append("downloadInput", downloadReqStr);


        return httpFormData;
    }



NOTE: There appears to be a bug in the Angular14 Typescript types for the `HttpClient.post()` method. The signature clearly accepts the body/text combination for the HttpOptions as shown above, but I couldn't get post() to work until I de-typed the HttpOptions object as `unknown`.  

[Shereen Shajahan]

Hi Matthew,

Thank you for the suggestion. We are glad that the issue has been resolved. We are marking it as solved.

Regards,

Shereen