DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Save Textbox Value to File using JavaScript
Shantanu Jana
Shantanu Jana

Posted on

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>
Enter fullscreen mode Exit fullscreen mode
* {
  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;
}

Enter fullscreen mode Exit fullscreen mode

Create a box on the webpage

2. Add a heading

<h1>Save the text to a file</h1>
Enter fullscreen mode Exit fullscreen mode
h1 {
  color: #0773d7;
  font-size: 30px;
  width: 100%;
  margin-top: -15px;
  margin-bottom: 30px;
  text-align: center;
  text-transform: uppercase;
}
Enter fullscreen mode Exit fullscreen mode

Add a heading

3. Create a text input box

<textarea placeholder="Type your text here..." id="text"></textarea>
Enter fullscreen mode Exit fullscreen mode
#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;
}
Enter fullscreen mode Exit fullscreen mode

Create a text input box

4. Create a box to input the file name

<input id="filename" placeholder="Specify a filename..." />
Enter fullscreen mode Exit fullscreen mode
#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;
}
Enter fullscreen mode Exit fullscreen mode

Image description

5. Create file download button

<button id="download">Download file</button>
Enter fullscreen mode Exit fullscreen mode
#download {
  background-color: #3ba9f4;
  color: #fff;
  font-size: 20px;
  height: 50px;
  border: none;
  border-radius: 2px;
  width: 174px;
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

Image description

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);
    }
  });
};
Enter fullscreen mode Exit fullscreen mode

Save Text to File with JavaScript
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/

Top comments (3)

Collapse
 
pipe_pc profile image
Alfredo PrΓ‘danos

Thanks for sharing, amazing code!

Collapse
 
spandan profile image
Spandan

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

Collapse
 
shantanu_jana profile image
Shantanu Jana

Welcome 😍

Dream Big


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category.

β†’ Join the Hackathon <-