File and JSON parametr send issue

ServiceStack
1

Hello everybody!
I encountered such a problem.
I need to send a file with a request.
I read this post and helped to send the file to me:
[Typescript Servicestack-client post file and request][1]
[1]: Typescript Servicestack-client post file and request

But now the problem is that I can not send json objects, they are not deserialized on the server side and therefore the value is exactly null.

public class DTO {       
        public string uid { get; set; }        
        public string name { get; set; }    
       
        public CatalogItemStock stock { get; set; }      
}

So I send the file and settings, except the stock all comes to the server.

    var stock: CatalogItemStock = new CatalogItemStock();
    stock.Stock = 10;

    let dest1: StockDestination = new StockDestination();
    dest1.Stock = 10;
    dest1.Destination = 'London';

    stock.StockDestination = [dest1];

    var file = new File([''], 'file.txt');

    var postUrl = 'http://url';
    const formData = new FormData();
    formData.append('uid', '123');
    formData.append('name', 'name of item');   
    formData.append('file', file);
    formData.append('stock', JSON.stringify(stock));

    fetch(postUrl,
      {
        method: 'POST',
        headers: {
          Accept: 'application/json',           
        },
        body: formData,
      }).then(r =>{
        console.log(r);
    });

I very much ask you, tell me how it can be solved because I’m not a frontend programmer and have been racking my brains for several days :frowning:

Thanks in advance!

2

You can’t send JSON objects because you’re sending a multipart/form-data Content-Type not JSON.

The easiest solution is to flatten the CatalogItemStock DTO so you’re not trying to send complex types in form-data values (for which there’s no standard for), e.g:

public class DTO 
{       
    public string uid { get; set; }        
    public string name { get; set; }    
   
    public int stockId { get; set; }      
    public string stockName { get; set; }      
}
3

The question is that I have to send an array of objects to the server, when I do all this from the C # client, the SS passes and the query looks like this:

Where json in the form of text.
I do not know how to do this in the JS

The parameter has such a structure:

public class StockDestination {
    public string Destination { get; set; }
    public decimal Stock { get; set; }
}

public class CatalogItemStock {
    public decimal Stock { get; set; }
    public List<StockDestination> StockDestination { get; set; }
}
4

This is bad API design, you’re making your API interoperable by trying to send nested complex types along with HTTP File Uploads. Consider splitting your API into 2 requests with the HTTP File upload on its own.

Otherwise you can try sending complex types in a single scalar value using the JSV format. There’s a JavaScript implementation available in JSV.js, which you can use like:

formData.append('stock', JSV.stringify(stock));
1 Like
5

Thanks Demis, it really helped me!