Angular ng-file-upload convert from base64 to file

Question

I tried to upload and cropping using ng-file-upload.

The problem is the cropped image become base64 format instead of 'file` format.

Here is the console.log result on testing:

my html:

<div class="form-group">
     <label class="control-label">Cover</label>
     <input type="file" ngf-select ng-model="category.cover" name="cover" id="cover" ngf-pattern="image/*" accept="image/*"
     ngf-max-size="512KB" class="filestyle" data-button-name="btn-danger">

     <div ngf-drop ng-model="category.cover" ngf-pattern="image/*" class="cropAreaCover">
          <img-crop image="category.cover  | ngfDataUrl" result-image="category.croppedDataUrl" ng-init="category.croppedDataUrl=''"
                              area-type="square" area-min-size="800">
           </img-crop>
      </div>
</div>

How can I convert the cover result (base64) to file like logo result?

ssuhat · Accepted Answer · 2016-01-12 07:25:21Z

5

I've found it using plain javascript syntax:

var cover =Upload.dataUrltoBlob(category.croppedDataUrl);
cover = new File([cover], 'cover.jpg', {type:"image/jpg"});

answered Jan 12, 2016 at 7:25

ssuhat

7,70621 gold badges68 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Morteza QorbanAlizade Over a year ago

that was perfect

Nelson · Accepted Answer · 2016-01-12 07:10:04Z

0

Use like this

<img ng-src="data:image/jpg;base64,{{logo}}"  / >

answered Jan 12, 2016 at 7:10

Nelson

3834 silver badges17 bronze badges

1 Comment

ssuhat Over a year ago

hi, isn't this code convert from file to base64? i've tried on my cover. it says invalid url.

Collectives™ on Stack Overflow

Angular ng-file-upload convert from base64 to file

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related