CODEWITHSUNDEEP
javascriptangularjsupload
Gaurav
Gaurav

Reputation: 609

How to save a dragged image locally in the browser

I am new with angular and using angular-file-upload project on github https://github.com/danialfarid/angular-file-upload in one of my applications. Till now the backend is not prepared and i want the dropped file to be displayed in the browser locally. Is there a way to do it?

My code for the view :

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

and the logic in the controller looks as below: 

.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 
      });
    }
  };
});

Upvotes: 0

Views: 95

Answers (1)

Karan Patyal
Karan Patyal

Reputation: 381

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'])

Upvotes: 3

Related Questions