We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Get file content (not download) via HTTP request

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;
}





1 Reply 1 reply marked as answer

MM Matthew Marichiba November 22, 2022 08:55 PM

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`.  


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon