adonespitogo / angular-base64-upload Goto Github PK

It would be much appreciated, I would rather not add bower support for the one thing!

Many thanks

I installed and configure the pluguin correctly but seems it doesn't work. I use AngularJS v1.5.8 .
Can anybody say me if it works at this version?

Thanks for your library. I ran into issue in Safari on Windows. When file is being uploaded it errors out saying 'undefined' is not constructor {evaluating 'new $window.FileReader()'}. Any ideas? Thanks

angular-base64-upload v0.1.13
Windows 7, IE9

Hello,

I would love to see an example (or support for) with compression of an image as part of the encoding process, so that might be the ability to set a maximum height/width for an image, or a ratio to reduce the "physical" dimensions by.

I feel this is going to be a common use case, so just wanted to pitch the idea!

Thanks for the library.

Hi guys,

When the page inits the following error comes up in the console.

The issue is spotted on Safari 5.1.7 which is default for Mac OS X version 10.7.5 (Lion) users.

Can't find variable: FileReader
https://192.168.1.215:4433/bower_components/angular-base64-upload/dist/angular-base64-upload.js:20 < input id="addressProof" type="file" ng-model="$parent.addressProof" base-sixty-four-input="" valid-file="" required="" accept="image/png,image/jpg, image/jpeg, application/pdf" ng-change="addressFileCheck();formChanged(4)" class="ng-pristine ng-untouched ng-valid" >

I have configured the my upload field to accept MS Word files:
<input type="file" name="file" ng-model="vm.file" base-sixty-four-input accept=".doc, .docx">
Unfortunately that prevents upload files with upper case characters in the extension like some.DOC or another.Doc.
(For some reason our users have lots of word documents with .DOC suffix.)

Ideas:

• Generally make the "accept" value case insensitive
• Add an option to make the "accept" value case insensitive
• Accept regexp objects in the "accept" parameter (or add a new parameter like "accept-regexp")

When base-sixty-four-input is used inside ng-repeat and model value is predefined then model is set to null. Here is code snippet:

<div ng-repeat="obj in licenses">
  <label>
     <img ng-src="data:image/png;base64,{{obj.base64}}"
     <input type="file" ng-model="obj" style="display:none" base-sixty-four-input>
  </label>
</div>

I am getting an undefined method '[]' for nil:NilClass when I try to upload an image. Not really sure what is going on. It seems to be working as intended, but the image won't take once it hits my controller.

Any ideas why? I am pretty new to Ruby on Rails/AngularJS so it might just be a simple error I am overlooking.

def decode_base64
      Rails.logger.info 'decoding base64 file'
      decoded_data = Base64.decode64(params[:image][:base64])
      data = StringIO.new(decoded_data)
      data.class_eval do
        attr_accessor :content_type, :original_filename
      end

      data.content_type = params[:image][:filetype]
      data.original_filename = params[:image][:filename]

      data
    end

def create
    @post = Post.new(post_params)
    @post.attachment = decode_base64
    @post.status = 'open'

    if @post.save
      render json: @post, status: :created, location: @post
    else
      render json: @post.errors.full_messages, status: :unprocessable_entity
    end
  end

Hi dudes!
I have trouble with attaching file twice

  .img.avatar
    / show img if file selected
    %img{'ng-src' => "data:{{user.new_avatar.filetype}};base64,{{user.new_avatar.base64}}", width: '128px', height: '128px', 'ng-if' => 'user.new_avatar'}

    / avatar input
    %input{'ng-model' => 'user.new_avatar',:accept => "image/jpeg,image/png,image/gif", :autocomplete => "off", :name => "img", :style => "cursor:pointer;", :type => "file"}(base-sixty-four-input)
  .add-file.blockLeft
    %input#avatar_browser{:accept => "image/jpeg,image/png,image/gif", :autocomplete => "off", :name => "img", :style => "cursor:pointer;", :type => "file", 'ng-model' => 'user.new_avatar'}(base-sixty-four-input)

/ Delete (clearing the input) avatar file
%p.blockLeft.file{'ng-if' => 'user.new_avatar'}
  %a{'ng-click' => 'user.new_avatar = null'}
  %span {{user.new_avatar.filename}}

If i chose file , then clear file handle and choose the same file angular-base64-upload do not attach againt file to ng-model

Hi, is there a way to clear a file that is already loaded in the 'input' ? I tried setting the model to null, but it didn't clear away the file. Would be nice if there's an on-demand function to call and reset the file uploader. Thanks!

hi,

i've implemented your solution base64 and it's pretty good on the view side...But, when i try to use $scope.file, it is undefined...Any suggestion?

view side

<code><form>
  <input type='file' ng-model='creativefile' base-sixty-four-input>
  <button ng-click='upload_file()'>Upload</button>
creativefile :{{creativefile.filesize}}
filesize apres click: {{filesize}}
</form>
</code>


/*js side in my controller*/

scope.creativefile={};

        $scope.upload_file = function(){
          $scope.filesize=$scope.creativefile.filename;
        }


any suggestion?

When i try to use lager file (>300 MB). My browser crashed. How would upload large file.

First of all, great module! Neat and simple!

I tried using $watch, but eventually I get

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Is there an efficient way to detect when an image was uploaded to the uploader?

i wanna add validations on image resolution and my backend accepts base64 encoded image data, is it possible to get image dimensions so i can validate before pushing to server?

Hi guys,

Is possible create a trigger to click from other element to open the dialog? Add one example in the Readme 👍

Regards, Nicholls

I suspect this is related to a similar issue on another project, at aadsm/JavaScript-ID3-Reader#13 which has some good reading. It sounds like readAsBinaryString is deprecated, so readAsArrayBuffer is better.

bower_components/angular-base64-upload/dist/angular-base64-upload.js: reader.readAsBinaryString(file);
bower_components/angular-base64-upload/dist/angular-base64-upload.min.js:angular.module("naif.base64",[]).directive("baseSixtyFourInput",function(){return{restrict:"A",require:"ngModel",link:function(a,b,c,d){var e={};a.readerOnload=function(b){var c=btoa(b.target.result);e.base64=c,a.$apply(function(){d.$setViewValue(e)})};var f=new FileReader;f.onload=a.readerOnload,b.on("change",function(){var a=b[0].files[0];e.filetype=a.type,e.filename=a.name,f.readAsBinaryString(a)})}}});
bower_components/angular-base64-upload/src/angular-base64-upload.js: reader.readAsBinaryString(file);

Any chance that can be swapped for readAsArrayBuffer to get IE compatibility?

Thanks!
Chris

Hi all,
Using this directive, I can see how it outputs to base64, but am confused on how to pass this into my $http post as it is currently uploading a "corrupted" image file via SharePoint's REST API.
HTML:

<form>
<input type="file" data-ng-model="files" base-sixty-four-input>
<button data-ng-click="upload()">Submit</button>
</form>

Upload Function:

$scope.upload = function () {
        console.log($scope.files);
                        $http.post("/sites/ens/_api/web/lists/getByTitle('Report Images')/RootFolder/Files/add(url='" + $scope.files.filename + "',overwrite='true')", $scope.files.base64,
                    {
                        headers: {
                            'X-RequestDigest': $("#__REQUESTDIGEST").val(),
                        }

                }).success(function (d) {
                    console.log(d);
                });
            }

I forgot to update the demo. it still says
<input type="file" ng-file="resource.image" name="file" base-sixty-four-input>

Multiple images cant select by this library.

Is there any way to do this ?

It would be nice to have an attribute for resizing an image, instead of having to write a parser yourself. Because after 2h of trying I still can't get my own parser to work. I am trying it to do with the canvas trick, but I think canvas.toDataURL(fileType) as resized isn't accepted by var modelVal = {file:file, resized: resized}.

Hi guys,

When the page inits the following error comes up in the console.

The issue is spotted on Safari 5.1.7 which is default for Mac OS X version 10.7.5 (Lion) users.

Can't find variable: FileReader
https://192.168.1.215:4433/bower_components/angular-base64-upload/dist/angular-base64-upload.js:20 < input id="addressProof" type="file" ng-model="$parent.addressProof" base-sixty-four-input="" valid-file="" required="" accept="image/png,image/jpg, image/jpeg, application/pdf" ng-change="addressFileCheck();formChanged(4)" class="ng-pristine ng-untouched ng-valid" >

Update dist folder to reflect changes in pull request #7

Hi,

I can't pass the form validation $scope.myForm.$valid with base-sixty-four-input input.
I have complain that field is not valid which makes my form invalid.

Any idea how to fix this?

Thanks.

hi! I upload image with verical orientation it convert into horizontal (90deg left). Is it real to upload in that orientation what it has.

When I crop the image i put a button to upload with ng-click='uploadFile()' and in the controller i make this changes:

$scope.uploadFile = function(){
//$scope.myCroppedImage is the name of img src

$http.post('/public/up64.php', $scope.myCroppedImage)
.success(function(res){
alert('View file '+res+' ?');
$window.location.assign(res);
})
}

But I receive error from PHP!

fopen(): Filename cannot be empty in .....on line 18
fwrite() expects parameter 1 to be resource, boolean given in ....line 19
fclose() expects parameter 1 to be resource, boolean given in....line 20

I've to make changes on php files?!

when i upload the file,i set the input maxsize, then the onChange Event fire,i judge the file size is legal,if not i want prevent the other event fire,and just alert the error to user

I am using this plugin in my project, however, it seems that sometimes it works, but sometimes it doesn't work fine even though it is the same file.
in .html:

"input id="file" class="upload-file" type="file" ng-model="file" name="file" base-sixty-four-input onload="onload" maxsize="10" accept="image/*""

in controller .js:

$scope.onload = function (e, reader, file, fileList, fileOjects, fileObj) {
if ($scope.photoForm.$invalid) {
if ($scope.photoForm.file.$error.maxsize) {
...

For example, i tried to upload the same file with size 14k, sometimes it passed the maxsize validation, but sometimes it didn't. Have no idea for it.

Appreciate for any help.

Thanks!

Hi.. how is the way to reset the input file after upload ? or reset form ???

Image not converted into base64 in latest ionic bundle & latest angularjs.. please provide a solution and reference demo link

Hi guys,

I using [email protected] with [email protected]. I have a form similar to the one below:

<ng-form name="editForm" role="form" form-confirm>
<div class="form-group col-xs-2">
                                            <div class="input-group">
                                                <div class="control-label">{{document.documentFile.filename}}</div>
                                                <span class="file-upload">
                                                    <span class="nav-link" translate>DOCUMENT.ATTACH</span>
                                                <input class="upload" name="documentFile" type="file" ng-model="document.documentFile" base-sixty-four-input>
                                                </span>
                                            </div>
                                        </div>
</ng-form>


My form is initially flagged as dirty although the input itself is not. The flag is removed as soon as i remove the base-sixty-four-input or the ng-model from the input element, i.e., the base-sixty-four-input seems the change the model, any ideas on what's happening ?

How Can i get the image width and height ?

Hi,

Thx for this, this is a cool feature, but unfortunately, it does not work on IE9 because of FileReader API...
Is there a way to make it work on IE9 ?

Thx !

I have an issue where in my view i have

<input type="file" ng-model="attachment" class="ion-paperclip text-right float-right attachment" base-sixty-four-input onerror="errorHandler" onchange="fileChanged"/>

For one I have fileChanged defined in the controller and everytime I add a file that function comes up as undefined.

For two I have a div with {{attachment}} this is showing up correctly for when I add the file, but when I go to use that file in another function $scope.attachment, it's coming up as undefined.

Any help would be appreciated.

Sean

In RegisterController.js

function saveUpdatedProfile() {

var editProfile={

            "profileDetails":{
                "firstName":$scope.firstName,
                "lastName":$scope.lastName,
                "dob"      :$scope.dob,
                "eMailId":$scope.eMailId,

                  "ImageProofContent":$scope.imageProof[0].base64,
                 "ImageProofType":$scope.imageProof[0].filetype,

}

                           <input type="file" ng-model="imageProof" name="imageProof"  accept="image/jpg, zip" maxsize="5000" required base-sixty-four-input>
                           <img ng-show="form.imageProof.$valid" ngf-thumbnail="imageProof" class="thumb">
                          <span ng-show="form.imageProof.$dirty && form.imageProof.$error.required" class="help-block">Files must not exceed 5000 KB</span>
                        
                           <span ng-show="form.imageProof.$error.maxSize" class="help-block">File too large: max 1M</span>

i want the form to allow without selecting imageProof , form can be submiited without the imageproof .

Working fine when i select a file , getting this is when i am not selecting any file.
i have to send base64 and fileType to the server.

Is there a maximum file size? When I try and upload a file of 35MB, the browser crashes. I've narrowed it down to this code:
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
Is this control capable of handling large files of these sizes?

Hi, what is the right schema atribute to sabe this in MongoDB ?

I'm trying to use with this one

var projectSchema = mongoose.Schema({

name: {
    type: String,
    required: true
},
room: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'Room'
},
members: {
    type: [{
        type: mongoose.Schema.Types.ObjectId,
        ref: 'User'
    }]
},
managers: {
    type: [{
        type: mongoose.Schema.Types.ObjectId,
        ref: 'User'
    }]
},
image: {
  data: Buffer
}

});

But I can get it to work with "data:buffer"

Hello,

Versions above 0.0.6 break for me when I try to use it with npm install and then browserify the code client side, so I feel there may have been a regression somewhere?

is there possible send own param to onloadend event ?

%input.hidden_input{:type => "file", 'ng-model' => "record.attach", "onloadend" => "vm.attach_loaded"}(base-sixty-four-input)

controller:

  attach_loaded: (event_object, file_reader, file, file_list, file_objects, object) ->
    console.log @ # <-- want here my controller object but got Window {external: Objec

I'm sorry to bother with this, but can anyone share an example of how to handle the post using asp.net webapi?

I'm sending a picture to a service, but I need to append the extension.

In the other hand I could rename the picture, but I dont know hot to do it.

Can you help me? #

Hi, congratulations and thanks for your library

When I reset the form, the error message still appears. Could you tell me why?

I made a codepen showing an error when the selected image has a size greater than 100kb
http://codepen.io/DiV666/pen/oxKeOK

Thank you.

I'm working on a file type and size validation routine that is perfomed prior to base64 conversion (I used to validate it after the ngModel was updated untill I tested a big file and it crashed my browser. Also, there's no point in performing the whole thing if it's just gonna get ditched in the end because the file is too big, for example).

Right now there are new optional attributes (max size, accepted formats and response) that handle those. The response is a string returned to the controller with the proper event description (maxSizeExceeded, invalidFormat and success - which resolves #20 I believe).

It's pretty much finished, just running some tests to be sure it's all ok (100% compatibility with how it's implemented right now). Would this be something you'd like to incorporate? Or you want it to be as simple as possible (added about 25 lines of code or so)?

To be able to use the image in a roundtrip back on the UI in Angular, we need to write something like:

<img data-ng-src="{{picture.dataURI}}"/>

where dataURI needs to be the Data URI scheme for the browser to render the image properly:

picture.dataURI = "data:image/" + picture.filetype + ";base64," + picture.base64;

Having to manually type this out is a bit tiresome and it would be cool if there was e.g. a method like picture.dataURI() that we could call. It could maybe be added to the fileObject or as some sort of service. What do you think? I could try to prepare a pull request if you're interested.

Index.html can't include "../dist/angular-base64-upload.js" with php built-in server.

In RegisterController.js

function saveUpdatedProfile() {

var editProfile={

            "profileDetails":{
                "firstName":$scope.firstName,
                "lastName":$scope.lastName,
                "dob"      :$scope.dob,
                "eMailId":$scope.eMailId,

                  "ImageProofContent":$scope.imageProof[0].base64,
                 "ImageProofType":$scope.imageProof[0].filetype,

}

I want the form to allow without selecting imageProof , form can be submiited without the imageproof .

Working fine when i select a file , getting this is error when i am not selecting any file.
i have to send base64 and fileType to the server.

I get an exception RangeError: Invalid string length on the line

var base64 = btoa(e.target.result);

During testing I uploaded a PSD file which is over 400MB—obviously this is a ridiculous and largely unrealistic size of file but could we handle the error?

I'm building an app with Ionic and using angular-base64-upload to save images to my remote server. On iOS, the filetype is being found fine, but on Android, the filetype is left blank. On both the base64 works fine.

Edit:
Alternatively, I'm currently just getting the mime type in on the server-side, by decoding the base64 and using PHP's FileInfo function.