Cómo codificar un <file de input> a base64 en AngularJs?

Necesito save una image en Drupal, a través del service / file drupal. Por lo que entiendo, necesito decodificar el file en una base64 y enviar esto como una carga para el service / file. ¿Cómo puedo codificar el para hacer esto ??? Quiero hacer esto en javascript.

Soy el autor de angular-base64-upload como lo menciona @GrimurD. Esta directiva funciona perfectamente para este escenario. Analiza la image (o cualquier otro tipo de file) en la encoding base64 y adjunta la información del file a un model en su scope.

Uso de muestra:

<input type='file' ng-model='yourModel' base-sixty-four-input> 

Una vez que haya seleccionado un file, su yourModel tendrá un valor de algo como:

 { "filetype": "text/plain", "filename": "textfile.txt", "base64": "/asdjfo4sa]f57as]fd42sdf354asdf2as35fd4" } 

También tiene un código de muestra para decodificar el file base64 en su server, usando PHP o ruby.

Te recomendaría que uses https://github.com/ninjatronic/angular-base64 .

Después de seguir las instrucciones para usar esta biblioteca, simplemente puede llamar a:

 var imageData=$base64.encode(image); 

No olvides insert en tu module:

 .module('myApp', ['base64']) 

Sé que es bastante viejo, pero vine aquí por una solución.

Al final descubrí que (si no quieres usar bibliotecas externas) cargar una image en la base 64 es tan simple como usar javascript FileReader.readAsDataURL ()

Espero que mi código final ayude a otros principiantes como yo. Cuenta con:

  • Archivo de input con input type='file' HTML5 input type='file' (inspirado en esta respuesta )
  • Entrada de activación de otros elementos html (inspirada en esta respuesta )
  • Compruebe si el browser admite input type='file' (inspirado en esta respuesta )

También está en 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 desinetworking } 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: networking'>{{data.alert}}</span> <div style='word-wrap:break-word'> {{data.b64}} </div> </body> 

No necesitas AngularJs para eso. Aquí hay un hilo que explica cómo hacerlo usando Javascript y canvas: Cómo convertir una image en una cadena base64 usando JavaScript

Estaba teniendo el mismo problema y me encontré con este repository en github . Lo probé y funcionó perfectamente.