Returning Raw File Data from @nocodebackend
Ray Deck shows how to return a raw PDF file from Xano without JSON encoding it. The trick is using setHeader to change the Content-Type to application/pdf, which stops Xano from wrapping the binary data in JSON and tells the browser to display the file correctly.
Chapters
So sometimes it can be handy for us to use Xano, not just for getting, you know, JSON-formatted data that's gonna be structured, we can pass back to the front end, but sometimes we want to use it to relay things that are gonna be like complete files. So let's say there's like a PDF that you want for some reason your backend to be retrieving, 'cause you're just using your backend to be gating like a private API key or something for using some sort of third-party service. Right now for the sake of simplicity, I'm going to pull one of the free documents from the Internal Revenue Service in the United States, which publishes a lot of PDFs. And you might have this PDF and you want to have Xano grab, let's say, that PDF or the result of that service or what have you. And you want to then send it back to your front end. Now this gets a little bit tricky because Xano usually wants to create JSON data for you., right? And so we can do, you know, first go through the relatively straightforward, we're just gonna do an external API request to, in this case, IRS to go get the document. And if I were to just throw in a little utility functions and do a stop and debug and take a look at what's actually in there, API one, right? What actually comes back. If I were to quickly run it, doesn't take any arguments, so that's pretty easy. It will run and it will get the data. And I made my request out to the IRS, it came back with a 200 response, which means it was successful. And you can see it's got lots and lots of bytes in here, right? And the shape of this is basically that I've got data, right? That adds up to being a PDF document. But of course it just looks like a whole bunch of bytes. It's not that helpful. So actually viewing it in here is not the most useful way of doing it. Let's take out the stop and debug and let's just let it run. And furthermore, let's not grab the whole object here. Let's just grab the result and send it back, right? Just the actual PDF itself. That way we can see what the PDF looks like. We'll put it into a variable called output and we'll send it back. And if I were to then rerun it, okay, I'm gonna wait, it's gonna get PDF again and it gives me lots of data in here. Now once again, I'm looking at lots of data, I'm looking at it in Xano. So when you're dealing with something like this where you're not passing back standard formats of data, the easy way to look at it is actually to use a preview and you could use for complicated requests, you could use Postman for this., and for a simple request like this, I can just copy the endpoint URL and look at it in my browser. So I'm going to do a quick publish. Fine. Uh, and I'm going to copy the endpoint URL and I'm going to click new tab and then paste this in. Chug, chug, chug. Okay. And you see it gives me the data that kind of looks like what we had previously over on the right-hand side. But there's something else that's really important to look at here. You see all these backslash Rs and these other backslash U-whatevers? Okay, that's actually encoded because what we're looking at is a JSON-encoded string. And the real hint for understanding that is up here, which might just be a little bit outside the range here. Yeah, you can see this little quotation mark at the beginning. If you scroll down, down, down, down, down, down, down, I'm just gonna pull this down. And if you don't like seeing those kinds of things, it's gonna take a second. You see there's a little quotation mark at the end of it too. And you see a little backslash and that's also like a newline character. What that's telling me is that we're looking at JSON encoded data and that's actually not a PDF. It is a JSON encoded representation of a PDF. So if the objective is you're just trying to load it like into a blob that you're going to put into your front end or you want the person to actually be able to download it, they couldn't actually download it this way. This isn't the PDF. In the way that like I was just able to open up from the IRS when I just clicked into it, it like automatically brought this up. So what's the difference in the formatting? See, Xano by default wants to send back JSON. That's its native way of thinking about things. And when it does that, it sends information back with what's called a content type header. And by default, Xano will always send it back with the content type header of application/json. And that's also a little hint to Xano that's going to send you information that is itself JSON. And actually if I wanted to, you know, look at it through DevTools, which I've talked about DevTools in some other videos, I go over to the network tab and I just refresh this page. You'll see that the PDF passthrough that I've got here, I make my request and it comes back with a response and the response includes a content type of, you see here, application/json. But we don't want JSON data to come back. What we want is the PDF. We actually want the one-to-one of whatever it was that we're getting from the third-party service. How do we do that? We do that by giving Xano the hint through a header. There is a function called setHeader, and I'm just gonna recreate it right now. So you can go here, you can go to where it's called utility functions, and down here there's called HTTP header. Of course you can always search for it once you know to look for it. And you just set it to a string and the, this is gonna be the complete header. Now remember over here how it shows content-type colon, then over here is application/json. Don't overthink the key value part. It's just one string going all the way across. It's content-type: space content/json and then some other stuff. Don't worry, even worry about the other stuff right now. Let's just worry about making this into a PDF. We're gonna say content-type: application/pdf and then that way that will be the hint that this is a PDF. In fact, if I go over here and I just, you know, open this up for a second, I kind of wonder whether the, the thing from the IRS, I look at the PDF, you see the content type is coming over as application/pdf over here. Similarly here, I'm going to tell it to use application/pdf. That way it's not going to give me JSON data, it's giving me PDF data. Now, in addition to being something we're going to send to the recipient, to the client, this is also a little hint for, for Xano, because when Xano sees you're overriding the content type, it'll actually stop this business of trying to encode everything in JSON. So let's remember how this thing looked, right? With all that business. All right, let's do a publish again, 'cause remember we gotta look at really through how the browser's going to consume it in order to usefully see the data. And then let's copy the endpoint URL again. I'm gonna make a new tab, right? That way we'll have this as a reference point and we'll do paste. Look at that, it's the actual PDF. And that's because when we sent over that application/pdf header, two things happen. The first is that the data is no longer getting re-encoded, you know, into JSON the way this thing was, right? 'Cause this wasn't JSON data, this wasn't a PDF, this was JSON string that was an encoded version of the PDF. And this is the actual PDF. And the second is by sending over the header that says application/pdf, that's also a hint to the browser that, hey, this is a PDF, maybe you just want to display it. And that's the reason why when I download it from the IRS or if I download it from Xano independently, it's going to immediately know what to do next with it. And that's sort of the benefit of using this Content-Type custom header. Two main benefits, that's gonna be your big takeaways here. You want to use custom headers when you're going to send over data that is not just structured JSON data the way you ordinarily do with Xano. This will have two effects. The first is it will tell Xano to please don't encode your data as JSON. And that means you got to use as self because you don't want it to use any of the structuring. And the second is it gives a hint to the client as to how it can properly use this information. And that lets it do smarter things like actually setting up previews of PDFs or things like that. So working with set headers, obviously on the more complicated end of what people can do with Xano, but it's a really cool power tool. And those kinds of weird things and cool power tools are what we do every day over at StateChange in our office hours. I hope this is helpful for you and what was challenging for you. And if you have other things that are tough as 5%, go check us out.
