Converting a File to Base64 in angularJs
We’ll learn how to convert an image/pdf to base 64 in angularJs by creating a directive and adding extra parameters for the base 64 data
<input type="file" id="fileSelector1" class="form-control" name="schemeupload" accept="image/jpeg,image/png,application/pdf" file-model="vm.schemeApply.documents[0]"/>
To accept the only image of type jpeg we can use the following in HTML accept
accept="image/jpeg"
To accept multiple documents say image files and pdf we can use the accept as
accept="image/jpeg,image/png,application/pdf"
We will create a directive named file-model to convert the file into base64
"use strict";
(function() {
angular.module("SS.pages").directive("fileModel", fileModel);
/** @ngInject */
function fileModel($parse, $q) {
return {
restrict: "A",
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel),
modelSetter = model.assign;
element.bind("change", function() {
scope.$apply(function() {
var file = element[0].files[0];
getFileBuffer(file).then(function(resp) {
modelSetter(scope, resp);
});
});
});
}
};
function getFileBuffer(file) {
var deferred = new $q.defer();
var reader = new FileReader();
reader.onloadend = function(e) {
deferred.resolve(e.target.result);
};
reader.onerror = function(e) {
deferred.reject(e.target.error);
};
reader.readAsDataURL(file);
return deferred.promise;
}
}
})();
In this directive, we are getting the file and we are converting the file into a string(base64) using file reader.
To add Extra parameters for the image(which is converted into base64)
vm.schemeApply.documents.map(function(img, i) {
return {
name: "Additional Documents: " + (i + 1),
document_data_url: img,
ext: base64MimeType(img)
};
});
Note: We should not store the base 64 images directly to the database since it takes more space, as well as the max file size allowed to convert, is 24 (MB).