Load remote file as text and display in textarea

App Building
#1

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?

#2

Answering my own question...
But I'm not sure that's the best way.

  1. A TemporaryState contentOfUrlAsText

  2. 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)
    });
  });
  1. A Markdown area using the following value
{{contentOfUrlAsText.value}}
#3

Hey @wabiloo! That's a great way :slight_smile:

You should also be able to set the component directly like:

textArea.setValue(text)`

instead of

contentOfUrlAsText.setValue(text)

#4

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 :smiley:

#5

Yeah, exactly! Is this working for you now? :blush::crossed_fingers:

#6

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