The ng-file-upload documentation shows samples of usage. The first sample fiddle displays a validation message for file size:
<input type="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required>
<i ng-show="myForm.file.$error.required">*required</i><br>
<i ng-show="myForm.file.$error.maxSize">File too large
{{picFile.size / 1000000|number:1}}MB: max 2M</i>
However, when I run the fiddle and upload a file larger than 2M, the validation message says:
File too large MB: max 2M
So the expression {{picFile.size / 1000000|number:1}} is absent from the message. It looks like picFile.size is not set. Is there a way to show the size?
Updated the sample page: http://jsfiddle.net/danialfarid/maqbzv15/544/
You can use ngf-model-invalid="errorFiles" and then get the invalid file size by errorFiles[0].size.
Related
I want to read the default text inside an input text field. For Example: -
Reservation Text Value
I want to read - "Enter Reservation Number" from the input field. And I need to verify this text.
Here is the html value: -
<div class="input-field" ng-class="{'has-error': !$ctrl.isValid}">
<input id="reservation-number" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-maxlength" maxlength="30" required="" title="reservation-number" ng-blur="$ctrl.reservationModified($ctrl.reservationNumber);" ng-model="$ctrl.reservationNumber" type="text">
<label class="avoid-overlap ng-binding" for="resNumber"> Enter Reservations Number </label>
How can I read that using protractor?
I have tried these css value:-
element(by.css('.avoid-overlap.ng-binding').getText();
element(by.css('label.avoid-overlap.ng-binding').getText();
element(by.css('ng-pristine.ng-untouched.ng-empty.ng-invalid.ng-invalid-required.ng-valid-maxlength').getText();
getText() returns a promise.
See the documentation. An example explains how to solve it.
Thank you for the help. It is working now. I tried this code:-
element(by.css('[for="resNumber"]')).getText();
And It is working fine for me.
Mu current form works with an usual form file input :
<form method="POST" enctype="multipart/form-data">
<input type="file" name="file">
</form>
Is it possible to use the ng-file-upload directive to replace the input to make use of its ngf-drop and ngf-select (to simply display file info easily for example) as well as style it easily, without using it with AJAX ?
Yes, you can just use ngf-select ng-model="files" to display files info. If you use input type file the same element will be used so styles would be the same as normal input. For ngf-drop you need to have a div or similar element. There are jsfiddle samples on the docs.
When I click on my file input button and I select two files in the file dialog, on the add callback I see that the value of data.files.length is 2. Just before calling data.submit(), the value is still 2. However, only 1 file is uploaded.
Why?
Relevant configuration options used are:
autoUpload: false,
singleFileUploads: false,
jQuery File Upload is attached to...
<input id="fileupload" type="file" name="attachment" multiple>
The configuration option you are looking for is MaxNumberOfFiles.
// sets maximum number of files...
$("form#formid").fileupload('option', 'maxNumberOfFiles', 10);
You might also would like to change the input to following
<input id="fileuploadinput" type="file" name="attachment[]" multiple>
// Only reason to change id is so that it may not conflict. You may not have to do it though.
Hopefully this should solve your problem if no other issues are there.
I am building a form using Parsley.js, but the size command does not work:
<input type="text" size="2" id="month" value=""
data-parsley-type="digits"
data-parsley-length="[2, 2]"
data-parsley-error-message="Expiration Month is Required"
data-parsley-required />
Can anyone suggest an other way of doing this, or is it a bug..
The size attribute you refers to is perfectly working. It affects the input width (the box, not its content). Try putting 10 or 20 instead, and you'll see the box size changing accordingly.
Maybe you are referring to maxlength="2" attribute, that prevent user to enter more than 2 characters in the input box? (That is working too with Parsley)
Best
I am trying to get the filename of an uploaded picture to appear in the input field next to the picker button (for filepicker.io) . Basically I am trying to find what to put in the value field for the input tag to get the filename to appear once the picture is uploaded. Here is the code I have:
<div class="row margin" id='img-row'>
<input id="filename" disabled="disabled" value="<WHAT DO I PUT HERE?>" class="input" type="text" style="width: 360px;"/>
<input name="img" data-fp-class="form-simple-action-btn filepicker_launcher" data-fp-button-text="Choose Image" data-fp-services="COMPUTER,FACEBOOK,FLICKR,INSTAGRAM,PICASA" data-fp-container="modal" data-fp-mimetypes="image/*" type="filepicker" data-fp-apikey="#################" id='campaign-img-input' value="<php echo h($_POST['img'])"/>
</div>
Thank you for your help! I haven't found any other examples like this in the documentation.
The recommended way to do this would be to bind a function to the onchange event of the filepicker input type. Once the upload occurs, the function will be called, and you can pull the filename out of the e.fpfile attribute.
Alternatively, it may be easier to use the filepicker.pick call directly given that you are interested in customizing the behavior. The widget is great for a drop-in solution in many cases, but if you're looking to customize further I'd recommend using the javascript api directly.