Hey all,
I am getting stuck on something that seems simple...
I want to be able to load the content of a remote file (over http/https), as text, and display it in a textarea. Or optionally into another component with syntax highlighting.
The URL to the file could be anything (and therefore I can't use a REST API query), for example a text file, an XML file, etc.
Any idea how to achieve that?
Answering my own question...
But I'm not sure that's the best way.
-
A TemporaryState contentOfUrlAsText
-
A JS function using the FetchAPI to retrieve the content of a given URL (itself coming from another component)
const url = urlComponent.value
const options = {
headers: {
}
};
fetch(url, options)
.then(function(response) {
response.text().then(function(text) {
contentOfUrlAsText.setValue(text)
});
});
- A Markdown area using the following value
{{contentOfUrlAsText.value}}
Hey @wabiloo! That's a great way 
You should also be able to set the component directly like:
textArea.setValue(text)
`
instead of
contentOfUrlAsText.setValue(text)
Oh yeah, that makes sense.
So you mean:
const url = urlComponent.value
const options = {
headers: {
}
};
fetch(url, options)
.then(function(response) {
response.text().then(function(text) {
textArea.setValue(text)
});
});
And no need for a TemporaryState. Not sure why I didn't think of that 
Yeah, exactly! Is this working for you now? 

Yes, perfectly, thanks!
However I decided to keep the temporaryState as it allows me to retrieve several other pieces of information from the request and keep them all into a single object that I can refer to throughout the app
1 Like