Typescript Servicestack-client post file and request

Clients TypeScript
1

Hi,

I would like to be able to post a file and a request at the same time similar to using How to upload a file and post JSON data in the same request

We are using the TypeScript client and I’d like to do something like:

var client = new JsonServiceClient(apiUrl);
var response = client.PostFile<UploadResponse>("/UploadFile", fileToUpload);

Using ServiceStack-Client 0.0.38. and Angular 4

Thanks,
John

2

The TypeScript Service Client doesn’t support uploading files directly but for browsers that support the new fetch API you should be able to upload them using FormData as seen in the Image Upload example in Gistlyn.

If you need to support older browsers that don’t support fetch you’ll need to use a dedicated library like fineuploader, we have an example for how to use this with ServiceStack in the HttpBenchmarks demo.

3

Thanks for the quick response mythz

I can get the fetch to work with a simplified example below where the Request.Files is populated, but I’d like to get the request DTO sent as well.

As far as I can tell I need to supply it in the POST url as Fetch doesn’t support parameters yet.

I was expecting client.createUrlFromDto to include the fileRequest.Path parameter is this not the case and should I be encoding it separately?

const client = new JsonServiceClient(environment.apiUrl);
const fileRequest = new UploadFiles();

uploadFile(environmentName: string, file : File): Promise<Response> {

    fileRequest.Path = 'testPath';
    var postUrl = client.createUrlFromDto('POST', fileRequest);   
    const formData = new FormData();
    formData.append('description', file.name);
    formData.append('type', 'file');
    formData.append('file', file);

    var result = fetch(postUrl,
     {
	method: 'POST',
	headers: {
		Accept: 'application/json'
		
	},
	body: formData,
    });

    return result;
}
4

A POST Request sends its properties in the Request Body not in the URL, you would need to use specify a method without a Request Body like “GET” to have them added on the queryString, or just create the URL manually.