Save Textbox Value to File using JavaScript

In this article you will learn how to convert textbox value to files using JavaScript. If we want to create any type of file such as HTML, CSS, text etc., we manually use it with the help of different types of text editors. However, this type of project can make this work easier. With this project you can easily save any text content as any file.

You can watch the live demo to see how it works. First we have created a box in which different types of text or information can be input. Text area has been used to create this box. Then there is the input space that we created using the input function of HTML.

In the input box you can add the name of the file of your choice and add to it any file you want to convert. Then when you click on the download button, the texts in that text area will be converted to a file and saved. I used HTML CSS and JavaScript to create this project.

Hope the above video has helped you a bit. However, below I have shared the step-by-step tutorial. If you want, you can download the source code of this project (Textarea Text to a File using JavaScript).

1. Create a box on the webpage

<div id="container">

</div>

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #044b82;
  font-family: "Kanit", Verdana, Arial, sans-serif;
}

#container {
  width: 430px;
  padding: 40px 20px;
  background: white;
}

2. Add a heading

<h1>Save the text to a file</h1>

h1 {
  color: #0773d7;
  font-size: 30px;
  width: 100%;
  margin-top: -15px;
  margin-bottom: 30px;
  text-align: center;
  text-transform: uppercase;
}

3. Create a text input box

<textarea placeholder="Type your text here..." id="text"></textarea>

#text {
  display: block;
  width: 100%;
  background-color: transparent;
  color: #021652;
  border: 2px solid #3ba9f4;
  border-radius: 2px;
  resize: none;
  margin-bottom: 35px;
  height: 200px;
  padding: 10px;
  font-size: 20px;
}

4. Create a box to input the file name

<input id="filename" placeholder="Specify a filename..." />

#filename {
  width: calc(100% - 200px);
  border: 2px solid #3ba9f4;
  border-radius: 2px;
  background-color: transparent;
  color: #052a53;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  margin-right: 20px;
}

5. Create file download button

<button id="download">Download file</button>

#download {
  background-color: #3ba9f4;
  color: #fff;
  font-size: 20px;
  height: 50px;
  border: none;
  border-radius: 2px;
  width: 174px;
  cursor: pointer;
}

6. Save Text to File with JavaScript

function downloadFile(filename, content) {
  // It works on all HTML5 Ready browsers as it uses the download attribute of the <a> element:
  const element = document.createElement('a');

  //A blob is a data type that can store binary data
  // "type" is a MIME type
  // It can have a different value, based on a file you want to save
  const blob = new Blob([content], { type: 'plain/text' });

  //createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.
  const fileUrl = URL.createObjectURL(blob);

  //setAttribute() Sets the value of an attribute on the specified element.
  element.setAttribute('href', fileUrl); //file location
  element.setAttribute('download', filename); // file name
  element.style.display = 'none';

  //use appendChild() method to move an element from one element to another
  document.body.appendChild(element);
  element.click();

  //The removeChild() method of the Node interface removes a child node from the DOM and returns the removed node
  document.body.removeChild(element);
};

window.onload = () => {
  document.getElementById('download').
  addEventListener('click', e => {

    //The value of the file name input box
    const filename = document.getElementById('filename').value;

    //The value of what has been input in the textarea
    const content = document.getElementById('text').value;

    // The && (logical AND) operator indicates whether both operands are true. If both operands have nonzero values, the result has the value 1 . Otherwise, the result has the value 0.

    if (filename && content) {
      downloadFile(filename, content);
    }
  });
};

Hopefully the above tutorial has helped you to know how I created this Save textbox value to file using JavaScript. You must comment on how you like this design.

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/

Comments

[Alfredo Prádanos]

Thanks for sharing, amazing code!

[Spandan Sehgal]

Awesome and helpful post i was making a project that required this feature and you made this post today itself what a coincedence .
Thanks bro for this post.
Keep it up

[Shantanu Jana]

Welcome 😍