Client Side File Saving with FileSaver.js

Developer
John Duprey
Size
4,783 Kb
Views
4,048
  1. Client Side File Saving with FileSaver.js Previews
  2. Client Side File Saving with FileSaver.js HTML Codes
  3. Client Side File Saving with FileSaver.js CSS Codes
  4. Client Side File Saving with FileSaver.js JS Codes

How do I make an client side file saving with filesaver.js?

There are times when you want to save data built/compiled/input in the browser to the client/local side and NOT rely on a server. FileSaver.js compiles the best implementation to do that.. What is a client side file saving with filesaver.js? How do you make a client side file saving with filesaver.js? This script and codes were developed by John Duprey on 23 January 2023, Monday.

Client Side File Saving with FileSaver.js Previews
IQ Test

Client Side File Saving with FileSaver.js - Script Codes HTML Codes

<!DOCTYPE html>
<html class="no-js">
<head> <meta charset="UTF-8"> <title>Client Side File Saving with FileSaver.js</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Client Side File Saving</title>
<meta name="description" content="Client Side File Saving with FileSave.js">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">John Duprey </a> </div> <!--div class="navbar-collapse collapse"> <form class="navbar-form navbar-right" role="form"> <div class="form-group"> <input type="text" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div--><!--/.navbar-collapse --> </div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron"> <div class="container"> <h1>File Loading &amp; Saving<br><small>From the Client Side</small></h1> <p>You can <b>load</b> files into your browser on the client side using the <a href="http://www.w3.org/TR/file-upload/">HTML5 File API</a>. See <a href="https://www.html5rocks.com/en/tutorials/file/dndfiles/">this HTML5Rocks article</a> for usage examples. You can <b>save</b> files on the client side with ease using <a href="https://github.com/eligrey/FileSaver.js" target="_new">FileSave.js</a>.</p> </div>
</div>
<div class="container"> <!-- Saving text --> <div class="row"> <div class="col-sm-12"> <section id="save-text"> <h2>Saving Text</h2> <form onsubmit="return saveText(this, $('#fname').val(), $('#textInput').val(), 'text/plain;charset=utf-8')"> <span class="loadblock" class="pull-right"> <span class="file-details"></span><input type="file" id="load-text-file" name="load-text-file" /> </span> <textarea class="input form-control" id="textInput" rows="5" placeholder="Type some text here, then enter a file name and click &quot;Save&quot;."></textarea> <br> <div> <span class="saveblock" class="pull-right"> <input id="fname" type="text" placeholder="filename"></input><span>.txt</span> <button class="btn btn-sm btn-success" type="submit" role="button">Save</button> </span> </div> </form> </section> </div>
</div>
<!-- Saving HTML -->
<div class="row"> <div class="col-sm-12"> <section id="save-html"> <h2>Saving HTML</h2> <p>You can edit HTML using the "<a target="_blank" href="http://html5doctor.com/the-contenteditable-attribute/">contenteditable</a>" attribute.</p> <form onsubmit="return saveText(this, $('#fname-html').val(), $('#htmlInput').html(), 'text/html;charset=utf-8')"> <div class="loadblock" class="pull-right"> <span class="file-details"></span><input type="file" id="load-html-file" name="load-html-file" /> </div> <div id="htmlInput" contenteditable="true">Type some text here, then enter a file name and click &quot;Save&quot;.</div> <br> <div class="saveblock" class="pull-right"> <input id="fname-html" type="text" placeholder="filename"></input><span>.html</span> <button class="btn btn-sm btn-success" type="submit" role="button">Save</button> </form> </section> </div>
</div>
</div>
<hr>
<footer> <p>&copy; John Duprey 2014</p>
</footer>
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script> (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='//www.google-analytics.com/analytics.js'; r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); ga('create','UA-XXXXX-X');ga('send','pageview'); </script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/filesaver.js/0.2/FileSaver.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Client Side File Saving with FileSaver.js - Script Codes CSS Codes

body { padding-top: 50px; padding-bottom: 20px;
}
/* webkit solution */
.saveblock ::-webkit-input-placeholder { text-align: right;
}
/* mozilla solution */
.saveblock input:-moz-placeholder { text-align: right;
}
.saveblock input { text-align: right;
}
input[type=file] { /* display: inline-block; */
}
/* webkit solution */
.loadblock ::-webkit-input-placeholder { text-align: right;
}
/* mozilla solution */
.loadblock input:-moz-placeholder { text-align: right;
}
.loadblock input { text-align: right; padding: 5px;
}
[contenteditable="true"] { padding: 10px; outline: 3px dashed #CCC;
}
[contenteditable]:hover { background-color: yellow;
}

Client Side File Saving with FileSaver.js - Script Codes JS Codes

$(function() { console.log( "ready!" ); // Check for the various File API support. if (window.File && window.FileReader && window.FileList && window.Blob) { //alert("This browser supports file loading..."); $('#load-text-file').change(function(evt){ return handleFileSelect(evt, $('#textInput')); } ); $('#load-html-file').change(function(evt){ return handleFileSelect(evt, $('#htmlInput')); } ); } else { alert('The File APIs are not fully supported in this browser.'); } } );
function saveText(ref, fname, text, mime)
{ var blob = new Blob([text], {type: mime}); saveAs(blob, fname); return false;
}
function handleFileSelect(evt, target)
{ var files = evt.target.files; if( files.length > 1 ) { alert("Multiple files not supported..."); } //alert(JSON.stringify(files,null,2)); file = files[0]; $(evt.target).prev('.file-details').html(file.name + " " + " size " + file.size + " type " + file.type + " last modified " + file.lastModifiedDate ); var reader = new FileReader(); // Closure to capture the file information. reader.onload = ( function(theFile) { return function(e) { target.html( e.target.result ); }; } )(file); // Read in the image file as a data URL. reader.readAsText(file);
}
Client Side File Saving with FileSaver.js - Script Codes
Client Side File Saving with FileSaver.js - Script Codes
Home Page Home
Developer John Duprey
Username jduprey
Uploaded January 23, 2023
Rating 3
Size 4,783 Kb
Views 4,048
Do you need developer help for Client Side File Saving with FileSaver.js?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John Duprey (jduprey) Script Codes
Name
Columns Using CSS2
Columns in CSS3
Hangman Version 1
Testing Code Pen
Tag example
Hangman Version 1.2
Nested Flexbox Example
In re. Closures
A Pen by John Duprey
Hello, World for L2C4K
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!