Lightweight jQuery Based File Base64 Converter - base64.js

File Size: 5.41 KB
Views Total: 3229
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight jQuery Based File Base64 Converter - base64.js

base64.js is a very light jQuery file base64 converter plugin which processes a file input and returns a base64 string using FileReader web api.

How to use it:

1. Create a text field to accept the file input.

<input id="fileBrowser">

2. Load the core JavaScript file after jQuery library like this.

<script src="//code.jquery.com/jquery.3.1.1.slim.min.js"></script>
<script src="plugin.js"></script>

3. Invoke the plugin on the file input field and we're ready to go.

$("#fileBrowser").base64();

4. Export the base64 string:

$("#fileBrowser").base64({
  "onSuccess":function(inst,base64Str){
    alert(base64Str);
  }
});

5. Customize the file input field.

$("#fileBrowser").base64({
  "customFileBrowser":true,
  "inputStyle":"border:1px solid #efefef;height:36px;width:200px;border-radius:10px;",
  "buttonRequired": true,
  "buttonStyle":"border:1px solid #c8c8c8;border-radius:10px;background:white;height:36px;width:auto;margin-left:10px;cursor:pointer;",
  "buttonText":"Choose a file",
  "acceptableFormats":[],
  "minSize":"",//in bytes
  "maxSize":"",//in bytes
  "minSizeErrorMessage":"File size is less than minimum expected size.",
  "maxSizeErrorMessage":"File size is more than maximum expected size.",
  "formatErrorMessage":"Selected file doesn't match with the specified formats.",
});

This awesome jQuery plugin is developed by shyam1992. For more Advanced Usages, please check the demo page or visit the official website.