I want to upload extension less file with the below snippet.
<button id="profileImage" ngf-select ng-model="imageFile" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-change="clearImageErrorMsgs()">Change Photo</button>
After i clicked on this "Change Photo" and select an extension less photo am getting "$scope.imageFile" is null. How can i resolve it in AngularJS v1.2.16 ?
You can upload an extension-less file by setting ngf-pattern to a wildcard (asterisk *)
<button id="profileImage" ngf-select ng-model="imageFile"
ngf-pattern="'*'" ngf-accept="'image/*'"
ngf-change="clearImageErrorMsgs()">Change Photo</button>
The pattern you were giving was failing a regexp text because it expected a dot (.).
Here's a plnkr that demonstrates the use case, however of course the Submit fails with a 400 since I don't have anywhere to upload a file ;)
Edit
Given equivalent files "anon.jpg" and "anon" selecting "anon.jpg" yields scope.file as
$ngfName: "anon.jpg"
size:9612
type:"image/jpeg"
__proto__: Blob
Compare with the extension-less "anon" file:
lastModified:1453925356897
lastModifiedDate:Wed Jan 27 2016 15:09:16 GMT-0500 (Eastern Standard Time)
name:"anon"
size:31002
type:""
webkitRelativePath:""
__proto__: File
Please note the difference in the __proto__ properties. Clearly ng-file-upload is treating extension-less (i.e. type-less) files differently.
All you need to do in your HTML to display the file name selected is something like this where scope.file is the ng-model:
<span>{{file.$ngfName || file.name}}</span>
I updated the plunkr to demonstrate this, have a look at the code.
Poking around in the debugger is a time saver.
If you're not satisfied, you need to file an issue at the github project.
Have you tried to omit the ngf-accept attribute?
Related
In my Clojure program (using Hiccup), I'm looking to get the value of a text field when a user clicks on a button, and then append that date to a URL. I've attempted to use "ng-model" from AngularJS, however this results in the following error:
java.net.URISyntaxException: Illegal character in path at index 11: /dashboard/{{date}}
The code I currently use is below:
(text-field {:class "form-control" :ng-model "date"} "date" date)
[:a {:class "btn btn-primary" :href "/dashboard/{{date}}"} "Submit"]
It looks like hiccup is converting the string of your link into an URI and this is causing a problem.
An easy way to get out of the problem would be to avoid using that helper for angular links and directly creates an a tag:
[:a {:class "btn btn-primary" :href "/dashboard/{{date}}"} "Submit"]
Using the ng file upload directive I'm using ngf-accept to specify a list of allowed file types. This has disallowed many file types and they appear grey in the upload dialog but I'm still able to upload any files with a .js or a .sh extension.
I've added the directive to the following link, with the list of allowed files.
<a ng-model="file" data-nodrag ngf-select="openUploadModal($file, this)" ng-show="this.$nodeScope.$modelValue.type === 'folder'" ngf-accept="'image/*,video/*,audio/*,.pdf,.txt,.doc,.docx,.xls,.xlsx'">
The problem comes from the .txt allowed value. If I remove the '.txt' extension the .js and .sh files are also disabled. Apparently this is due to a bug affecting Mac users only, but is there any way around this?
Rather than ngf-accept, try ngf-pattern and then you can use '!' to explicitly disable certain file types:
<a ng-model="file" data-nodrag ngf-select="openUploadModal($file, this)" ng-show="this.$nodeScope.$modelValue.type === \'folder\'" ngf-pattern="'image/*,video/*,audio/*,.pdf,.txt,.doc,.docx,.xls,.xlsx,!.js,!.sh'">
been uploading text files using this button, the check on the file type isn't working for me, the file is considered valid.
<button ng-hide="uploading" class="btn centered" type="file"
ngf-select="uploadFiles($file, $invalidFiles)" accept="'image/*'"
ngf-max-size="4MB" ngf-accept="'image/*'">
{{(boardingData.profile_pic_url) ? "Change Photo" : "Upload a Photo"}}
</button>
We use ng-file-upload fairly heavily in our app, but we do not use the ngf-accept directive. However, you don't need to use this to be able to filter the file type being passed in. Assuming you had the following <div> for dragging:
<div ngf-drop="" ng-model="files" class="some_class_here" ngf-allow-dir="false">
Then there would be a scoped variable in your controller called $scope.files. You can simply check the type attribute of $scope.files to see what the file type is. If you wanted to check for files beginning with image/, then you could use this:
if ($scope.files.startsWith("image/")) {
console.log("You dragged an image file");
// or whatever your logic is
}
You can handle the file type appropriately from your controller with this information. Note that not all files show up as having a type, which is something to also keep in mind.
I know this question is old, but I still use this tool myself and was trying to figure out why I couldn't leave out accept if I had ngf-accept specified without errors. Turns out ngf-accept requires ticks and accept doesn't.
Only use the ' ticks in the ngf attributes e.g. ngf-accept="'image/*'" or ngf-pattern, e.g. ngf-pattern="'image/*'" or ngf-pattern="'.jpg,.png'".
In accept, you should use accept="image/*".
I am using danialfarid/ng-file-upload plugin ,I set the ngf-select
directive to .doc,.pdf extension. Its working fine.
Problem is if a user select .png or jpg file, I want to show an alert
box to user that this file type are not accepted. Thanks for in
advance.
Something like this:
<div ngf-select ngf-pattern="'.png,.jpg'" ng-model="file">
<div class="alert" ng-show="file.$error === 'pattern'">file type is not accepted. Acceptable files: {{file.$errorParam}}</div>
I've got an interesting question.
I have a VisualForce page with some Angular JS.
The problem is with the ng-repeat-end tag.
The HTML looks like this:
<span ng-repeat-end ng-if="$last" class="a nav__links__link" data-nav="control">You are here: {{breadcrumb.label}}</span>
VisualForce won't save with this error:
Attribute name "ng-repeat-end" associated with an element type "span" must be followed by the ' = ' character.
So I change the offending tag to this:
<span ng-repeat-end="" ng-if="$last" class="a nav__links__link" data-nav="control">You are here: {{breadcrumb.label}}</span>
Which makes VisualForce happy but Angular JS mad with this error:
Unterminated attribute, found 'ng-repeat-start' but no matching 'ng-repeat-end' found.
How can I satisfy both VisualForce's parser and AngularJS?
At the end of the day Visualforce needs a valid XML document. Try searching for "Angular + XHTML" I guess? I've found https://groups.google.com/forum/#!topic/angular/8iorDWKsMyI for example.
Will ng-repeat-end="ng-repeat-end" work? I remember that a trick with attr. name as attr. value is what's a perfectly fine workaround to convert for example <input type="checkbox" checked /> into valid XHTML.
SF themselves didn't include an example similar to what you're trying to do and I'm not familiar with AngularJS... It might be that they promote it but only for hybrid apps (where you could have local HTML file without the restrictions) or apps where you'd build your DOM from javascript, without having any skeleton in VF other than <script>s and <body>.
Last but not least - check what you can salvage from:
the "Mobile Pack": (looks like it's only VF sample in that directory),
http://www.oyecode.com/2013/06/getting-started-with-angularjs-on.html
Maybe contact the developers? All examples I can find seem to just "repeat" by creating a <table>, no <span>s...