I know it's quite old,
but I came here for a solution.. in the end I found out that -if you don't want to use external libraries- loading an image in base 64 is as simple as using javascript FileReader.readAsDataURL()
Hopefully my final code will help others beginners like me. it features:
- input file with HTML5
input type='file' (inspired by this answer)
- trigger input from other html elements (inspired by this answer)
- check if browser supports
input type='file' (inspired by this answer)
also on codepen
angular.module('starter', [])
.controller('Ctrl', function($scope) {
$scope.data = {}; //init variable
$scope.click = function() { //default function, to be override if browser supports input type='file'
$scope.data.alert = "Your browser doesn't support HTML5 input type='File'"
}
var fileSelect = document.createElement('input'); //input it's not displayed in html, I want to trigger it form other elements
fileSelect.type = 'file';
if (fileSelect.disabled) { //check if browser support input type='file' and stop execution of controller
return;
}
$scope.click = function() { //activate function to begin input file on click
fileSelect.click();
}
fileSelect.onchange = function() { //set callback to action after choosing file
var f = fileSelect.files[0],
r = new FileReader();
r.onloadend = function(e) { //callback after files finish loading
$scope.data.b64 = e.target.result;
$scope.$apply();
console.log($scope.data.b64.replace(/^data:image\/(png|jpg);base64,/, "")); //replace regex if you want to rip off the base 64 "header"
//here you can send data over your server as desired
}
r.readAsDataURL(f); //once defined all callbacks, begin reading the file
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<body ng-app='starter' ng-controller='Ctrl'>
<button ng-click='click()'>click to select and get base64</button>
<br>BASE 64 data:
<br>
<span style='color: red'>{{data.alert}}</span>
<div style='word-wrap:break-word'>
{{data.b64}}
</div>
</body>
