Kevin Powell - Community•11mo ago

How can I fix the issue with garbled characters that appear after selecting files using the input?

In my web application, I have implemented a file input element (<input type="file">) to allow users to select files. After selecting a file (I'm trying to open MS Word files, which are written in cyrillic), the content is displayed in an editable <div>. However, the text shows garbled characters. How can I handle different encodings (if needed) and ensure that the file content is correctly displayed without any garbled characters? Here's the code snippet:

<div class="import">
  <input type="file" onchange="openDocument()" />
</div>
  <div class="editor" contenteditable="true" id="editor" style="height: 297mm"></div>

<div class="import">
  <input type="file" onchange="openDocument()" />
</div>
  <div class="editor" contenteditable="true" id="editor" style="height: 297mm"></div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  min-width: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.editor {
  background-color: #ffffff;
  height: 100svh;
  width: 800px;
  margin: auto;
  padding: 48px;
  border: 1px solid #c7c7c7;
  margin-top: 20px;
  font-size: 16px;
}

.editor:focus {
  outline: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  min-width: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.editor {
  background-color: #ffffff;
  height: 100svh;
  width: 800px;
  margin: auto;
  padding: 48px;
  border: 1px solid #c7c7c7;
  margin-top: 20px;
  font-size: 16px;
}

.editor:focus {
  outline: none;
}

  const openDocument = async () => {
    const container = document.getElementById('editor')
    const fileInput = document.querySelector('input[type="file"]')

    if (fileInput.files && fileInput.files.length > 0) {
      const file = fileInput.files[0]
      const reader = new FileReader()
      reader.onload = function () {
        const fileContent = reader.result
        container.textContent = fileContent
      }
      reader.readAsText(file)
    }
  }

  const openDocument = async () => {
    const container = document.getElementById('editor')
    const fileInput = document.querySelector('input[type="file"]')

    if (fileInput.files && fileInput.files.length > 0) {
      const file = fileInput.files[0]
      const reader = new FileReader()
      reader.onload = function () {
        const fileContent = reader.result
        container.textContent = fileContent
      }
      reader.readAsText(file)
    }
  }

2 Replies

Joao•11mo ago

Microsoft Word is not plain text format, it's binary. You need to use something that is capable of reading it. I've never tried anything like this but this seems like a good solution: https://github.com/dolanmiu/docx

GitHub

GitHub - dolanmiu/docx: Easily generate and modify .docx files with...

Easily generate and modify .docx files with JS/TS with a nice declarative API. Works for Node and on the Browser. - GitHub - dolanmiu/docx: Easily generate and modify .docx files with JS/TS with a ...

celineOP•11mo ago

Thank you for your support, sir. It totally worked for me. Take care 🙏

Gaming

Programming

How can I fix the issue with garbled characters that appear after selecting files using the input?