adonespitogo / angular-base64-upload Goto Github PK
View Code? Open in Web Editor NEWConverts files from file input into base64 encoded models.
Converts files from file input into base64 encoded models.
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?
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:
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 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!
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.
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"
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?
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?
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
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 guys,
Is possible create a trigger to click from other element to open the dialog? Add one example in the Readme 👍
Regards, Nicholls
When i try to use lager file (>300 MB). My browser crashed. How would upload large file.
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? #
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?
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.
Multiple images cant select by this library.
Is there any way to do this ?
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
hi! I upload image with verical orientation it convert into horizontal (90deg left). Is it real to upload in that orientation what it has.
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'm sorry to bother with this, but can anyone share an example of how to handle the post using asp.net webapi?
Update dist folder to reflect changes in pull request #7
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.
Hi.. how is the way to reset the input file after upload ? or reset form ???
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 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
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?
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
I forgot to update the demo. it still says
<input type="file" ng-file="resource.image" name="file" base-sixty-four-input>
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);
});
}
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
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!
How Can i get the image width and height ?
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.
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?!
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.
It would be much appreciated, I would rather not add bower support for the one thing!
Many thanks
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.
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}
.
Image not converted into base64 in latest ionic bundle & latest angularjs.. please provide a solution and reference demo link
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 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
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,
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 ?
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)?
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 !
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.