Upload And Save File Using JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this article we will show you the solution of upload and save file using JavaScript, we will use normal JavaScript operations to create and save the text file on the user’s computer.
Users can use the HTML <a> tag to create a text file from the custom content and save it.
Developers should follow the below syntax to create a text file from the text input and save it.
We have written the code in the example below by following the syntax and algorithm. We have created the HTML <textfield>.
Users can enter the content they want to add to the file and click on the ‘save file’ button to save the text file on the computer.
When a user clicks on the ‘save file’ button, it will call the ‘downloadFile()’ function, in which we have added the code to create and save the text files.
The ‘FileSaver’ is the JavaScript library that we can use to create a text file in vanilla JavaScript. Users can use the CDN of the library to use it with HTML and JavaScript.
Users should use the below syntax to use the FileSaver library.
We have added the CDN of the ‘FileWriter’ library in the <head> section of the below code. When a user clicks on the ‘create text file’ button, it will invoke the ‘CreateTextFile()’ function in JavaScript, which creates the blob object of the sentence ‘This is a simple file content’ and executes the ‘saveAs()’'function to save the text file.
We have used the ‘FileSaver’ JavaScript library in the example below, as shown in the above syntax. We have created the file input field, allowing users only to upload the image file.
Step By Step Guide On Upload And Save File Using JavaScript :-
<html>
<head>
<script
src =
"https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"
integrity = "sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ=="
crossorigin = "anonymous"
referrerpolicy = "no-referrer">
</script>
</head>
<body>
<h2>TalkersCode Upload image <i> TalkersCode FileSaver </i> JavaScript Library.</h2>
<input type = "file" id = "uploadedImage" accept = "image/png, image/gif, image/jpeg"/>
<script>
var element = document.getElementById("uploadedImage");
element.onchange = function (event) {
var blob = new Blob[event.target.files[0]], {
type: "text/plain;charset=utf-8",
});
saveAs(blob, "download.txt");
};
</script>
</body>
</html>
- We start by writing <HTML>, which tells the browser what HTML version we're using. Tags are the beginning of HTML documents.
- In order to explain the project's heading, we must use the <head> tag.
- Then we added an HTML page with a <script> tag. The script tag explains the source code we used for the JavaScript google API run and the file we used that or the code.
- Then </script> and </head> script and head close.
- This is followed by the <body> tag that defines the body of the webpage.
- Then we upload an image using id.
- After that we again open the script tag explaining the source code we used for the JavaScript google API to run and the file we used that or the code.
- After that </script></body></html> and code should be executed after closing all tags.
Conclusion :-
In JavaScript, we have added the event listener to the file input, and as the user uploads a file, it will create a text file using the uploaded image file and save it to the user’s computer.
I hope this article on upload and save file using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
