current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 11 down vote favorite
5

I need to save an image into Drupal, through the drupal service/file. For what i understand i need to decode the file into a base64 and send this as a payload for the service/file. How can i get to encode the in order to do this???? I want to do this in javascript.

share|improve this question
    
why angular js? – cocco Jul 9 '13 at 13:54
    
stackoverflow.com/a/17502568/2450730 this can help you , contains full example of filereader,canvas resize and save as png – cocco Jul 9 '13 at 14:01
up vote 24 down vote

I am the author of angular-base64-upload as mentioned by @GrimurD. This directive works perfectly for this scenario. It parses image(or any other file types) into base64-encoding and attach the file info to a model in your scope.

Sample usage:

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

Once you selected a file, yourModel will have a value of something like:

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

It also has sample code for decoding the base64 file in your server, using PHP or ruby.

share|improve this answer
1  
A very elegant extension installable via bower. – metakermit Mar 27 '15 at 20:42
    
great plugin .loving it – ImranNaqvi Feb 25 at 16:22
    
great plugin! this saves my day! – Bonch May 12 at 15:21
up vote 8 down vote

I would recommend you to use https://github.com/ninjatronic/angular-base64.

After following instructions for using this library, you can simply call:

var imageData=$base64.encode(image);

Don't forget to inject in your module:

.module('myApp', ['base64'])
share|improve this answer
    
That library works well. I used it in conjunction with a php based REST server. – RevNoah Sep 6 '14 at 23:48
3  
how can i use it this library with an <input file> – Abdrahmn_msi Sep 11 '14 at 21:39
    
@Abdrahmn_msi I'm the maintainer - raise an issue on the repo for help github.com/ninjatronic/angular-base64/issues – Pete Martin Jan 29 '15 at 11:40
    
how can I get from image file – Georgi Kovachev Dec 2 at 13:00
up vote 7 down vote

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)

It is 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>

share|improve this answer
    
worked for me... thank you – Null Pointer Oct 26 at 7:24
up vote 0 down vote

You don't need AngularJs for that. There is a thread here explaining how to do it using Javascript and canvas: How to convert image into base64 string using javascript

share|improve this answer
    
+1 for the link – fiberOptics Sep 25 '14 at 1:47
up vote 0 down vote

I was having the same problem and ran into this repository on github. Tried it out and it worked perfectly.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.