Me estoy cargando una imagen, o de la cámara en una aplicación Angular:

<button type="button" onclick="userData.store()">send now</button><br>
<input type="file" label="add photo" accept="image/*;capture=camera">

Entonces (por ahora) manejándolo con este Javascript:

var input = document.querySelector('input[type=file]');
var issuediv = document.getElementById('issue');

input.onchange = function () {
  var file = input.files[0];
  displayAsImage(file);
};

function displayAsImage(file) {
  var imgURL = URL.createObjectURL(file),
  img = document.createElement('img');
  img.onload = function() {
    URL.revokeObjectURL(imgURL);
  };
  img.src = imgURL;
  issuediv.appendChild(img);
}

Dos cuestiones:

Esto no es un código Angular, ¿cuál sería una forma Angular-ish de manejar la imagen y prepararla para la base de datos (MySQL) a través de JSON?Lo anterior muestra el blob de la imagen en Firefox y Chrome, pero los navegadores de iOS y Android no parecen adjuntar laimg etiqueta y muestra solo una pequeña miniatura.