It works, your browser is too smart, use dumb tools instead
I can download the file perfectly well.
You are on a wrong track.
Yes there is an issue however it’s with mime type deduction. Simply whatever the gateway use belive it’s an DBF file (database used by some spreadsheet software) instead of a json one.
This is harmless and your json is fine.
You are using a much more intelligent piece of software (a browser) to view the file that need to first figure out what the file is before displaying it to you.
Using a CLI tool like ipfs cat or curling the gateway would have been a better idea as you would have seen the true nature of the file.
CRLF → LF
Peeking at your json I see that you are using CR LF (windows) encoding, instead of the recomended LF (*nix), to me that only obvious thing that a mime type detector would screw up (I might be wrong but your json is really fine).
You can fix that by running a linux VM (or WSL2, it’s probably fine but I like VMs more (no actually I like running linux on baremetal as it’s faster and I hate the buggy bloated shit that windows is but whatever)) and working in that unix friendly environment.
I don’t know what tool you are using, you can probably configure it to output LF lines, just google <Insert the software you use> output LF files.
Or lastly you can use a converter tool by googling “crlf to lf” and using whatever CLI tool stackoverflow propose you after 3 minutes of search.
On an other subject
Your metadata file is broken
Also I see your json is :
{
"name": " #12",
"description": "test description",
"image": "ipfs/QmXtr1NjrvafSM2NkzBqEwh8E6uCFFDVGv46uCrf1FXMG1/image12.png",
"attributes":[
{
"trait_type": "Background",
"value": "Green"
},
{
"trait_type": "Shape",
"value": "circle"
},
{
"trait_type": "Emotion",
"value": "sad"
}
]
}
The image field is wrong, it must be ipfs://... so for yours ipfs://QmXtr1NjrvafSM2NkzBqEwh8E6uCFFDVGv46uCrf1FXMG1/image12.png.
Consider minifying it
Also as a one last thing.
This is meant to be red by machines, not humans.
So you should minifiy it (remove useless indentation and new lines) like this:
{"name":" #12","description":"test description","image":"ipfs://QmXtr1NjrvafSM2NkzBqEwh8E6uCFFDVGv46uCrf1FXMG1/image12.png","attributes":[{"trait_type":"Background","value":"Green"},{"trait_type":"Shape","value":"circle"},{"trait_type":"Emotion","value":"sad"}]}
This also increase chances of success because in case you ever encounter a decoder that only supports one type of new lines, well there is no newlines, everything is compacted together so no issue can occur. 
