Как сохранить перетаскиваемое изображение локально в браузере

Question

Я новичок в угловом и использовании проекта с угловым файлом на github https://github.com/danialfarid/angular-file-upload в одном из моих приложений. До сих пор бэкэнд не готов, и я хочу, чтобы упакованный файл отображался в браузере локально. Есть ли способ сделать это?

Мой код для зрения:

<div ng-controller="MyCtrl"> 
    <input type="file" ng-file-select="onFileSelect($files)"> 
    <div class="button" ng-file-select="onFileSelect($files)" data-multiple="true"></div> 
    <div id="image_drop_box" ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="optional- css-class-name-or-function" ng-show="dropSupported">drop files here</div> 
    <div ng-file-drop-available="dropSupported=true" ng-show="!dropSupported">HTML5 Drop File is not supported!</div> 
    <button ng-click="upload.abort()">Cancel Upload</button> 
</div> 

и логики в контроллере выглядит, как показано ниже:

.controller('MyCtrl', function($scope){ 
    $scope.onFileSelect = function($files) { 
    //$files: an array of files selected, each file has name, size, and type. 
    for (var i = 0; i < $files.length; i++) { 
     var file = $files[i]; 
     $scope.upload = $upload.upload({ 
     //upload logic 
     }); 
    } 
    }; 
}); 

Answer 1

Convert the image into Base64 code and after that put the Base64 code in the src of imageg tag. 
And to convert Image into Base64 in angular 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'])