# Need to refresh the page to display file content

**URL:** <https://discuss.codemirror.net/t/need-to-refresh-the-page-to-display-file-content/1999>\
**Category:** Uncategorized\
**Created:** [February 18, 2019, 7:42am UTC](https://discuss.codemirror.net/t/need-to-refresh-the-page-to-display-file-content/1999 "2019-02-18T07:42:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rkt78244](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/r/7ea924/32.png) [@rkt78244](https://discuss.codemirror.net/u/rkt78244)\
**Post date:** [February 18, 2019, 7:42am UTC](https://discuss.codemirror.net/t/need-to-refresh-the-page-to-display-file-content/1999/1 "2019-02-18T07:42:50Z")

</div>

I am using this link [https://stackoverflow.com/a/44161989/10220825](https://stackoverflow.com/a/44161989/10220825) to load the content of the chosen file into the textarea. It is working without doing refreshing the page. But when I am involving codemirror javascript function, it is not immediate reflecting, instead I need to do refresh to show the contents.

Without codemirror javascript function,it is working

```auto
<div>
 <label for="input-file">Specify a file:</label><br>
 <input type="file" id="input-file">
</div>

<textarea id="content-target"></textarea>

<script>
document.getElementById('input-file')
  .addEventListener('change', getFile)

function getFile(event) {
        const input = event.target
  if ('files' in input && input.files.length > 0) {
          placeFileContent(
      document.getElementById('content-target'),
      input.files[0])
  }
}

function placeFileContent(target, file) {
        readFileContent(file).then(content => {
        target.value = content
  }).catch(error => console.log(error))
}

function readFileContent(file) {
        const reader = new FileReader()
  return new Promise((resolve, reject) => {
    reader.onload = event => resolve(event.target.result)
    reader.onerror = error => reject(error)
    reader.readAsText(file)
  })
}</script>

```

But when I am putting codemirror javascript function just after the textarea , it is not working instead, it involves refreshing of page.

```auto
<textarea id="content-target"></textarea>
    <script>
            var editor = CodeMirror.fromTextArea(document.getElementById('content-target'),{
                     mode:"text/x-java",
                     lineNumbers:true,
                     lineSeparator: "\n",
                     autoCloseTags:true,
                     tabSize:5
                });

    </script>
    <script>
    document.getElementById('input-file')
      .addEventListener('change', getFile)
      .....

```

Please suugest me how to get rid of refreshing the page when codemirror mode is used.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [February 18, 2019, 8:28am UTC](https://discuss.codemirror.net/t/need-to-refresh-the-page-to-display-file-content/1999/2 "2019-02-18T08:28:22Z")

</div>

> [@rkt78244](#):
>
> ```
> target.value = content
> 
> ```

You’ll have to call `setValue` on the actual `CodeMirror` instance to update its content—changing the value of the textarea that it originated from doesn’t automatically cause the editor instance to update itself.

---

<div class="post-metadata">

**Author:** ![rkt78244](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/r/7ea924/32.png) [@rkt78244](https://discuss.codemirror.net/u/rkt78244)\
**Post date:** [February 18, 2019, 8:58am UTC](https://discuss.codemirror.net/t/need-to-refresh-the-page-to-display-file-content/1999/3 "2019-02-18T08:58:34Z")

</div>

Hi margin, I tried many times with different approach, but it is not happening. Here what I have tried:  
1st approach:

```
var editor = CodeMirror.fromTextArea(document.getElementById('content-target'),{
                            mode:"text/x-java",
                            lineNumbers:true,
                            lineSeparator: "\n",
                            autoCloseTags:true,
                            tabSize:5
                    });
  editor.setValue(target.value=content);

```

2nd approach:

```auto
this.editor.setValue(content);
var that = this;
setTimeout(function() {
    that.editor.refresh();
},1);

```

Please suggest me correct approach and syntax to implement it. Thanks!