I would like to show when a file is selected, in the input. Why isn't it showing? My code:
<input type="file" id="logo" name="logo" ng-model="service.logo" required="required">
<img ng-src="{{service.logo}}">
Here is a JSFiddle.
Because in this you are just taking the input from the user. You need to write code to open the file, read it and display on to the view. As you want to show the image when the user browses and selects it, you need to trigger the fileSelect.
Also, look into this, I think this is what you want. How to read a file in AngularJS?
Because the only thing that gets passed to value and thus ng-model of a file input is the file name
If you want a preview (before upload) you need to use FileReader API to read the file and parse it into a data url and pass that to an image element
Related
make value from api appeare as chosse file inputs default value react js
i have this input field i want to display filename that i get from api default value
<input
name="Idproof"
Value={details.Idproof} //how to add value from api
onChange={FileHandler}
type="file"
/>
make value from api appeare as chosse file inputs default value react js
i have this input field i want to display filename that i get from api default value
Because of security reasons it wont be possible to set value to input type file. Imagine someone sets value to some important document/file in a computer, these can be submitted to server without user knowing this right?
Alternatively to display selected file, its good to make some UI section that show previously selected file/files and give user option to choose new one if needed.
How to upload(attach image) the image on react pages using (capybara webkit+ cucumber) for integration UI testing.
I am able to attach an image to rails page but react pages i am unable to upload?
I tried some solutions, still unable to find solution.
1) attach_file('.pb-text-field__browse_file_label', image_file_name)
2) find('.pb-text-field__browse_file_label').set('/scratch/data/1.png')
Actual HTML:
<form>
<div class="file text-field">
<div class="text-field__input-wrapper">
<div class="text-field__box"></div>
<div class="text-field__upload_file">
<input class="text-field__file-input" placeholder="Upload only jpeg or png images" disabled="">
<div class="text-field__browse_file">
<label class="text-field__browse_file_label" for="image-file">Browse</label>
<input id="image-file" class="text-field__browse" type="file">{this is invisible}
</div>
</div>
attach_file takes the file inputs name, id, or associated label text - https://www.rubydoc.info/gems/capybara/Capybara/Node/Actions#attach_file-instance_method - so passing it a CSS class selector is never going to work. You don't show what your actual HTML is, but assuming you had a file input like
<input id="my_file_input" name="some_name" type="file"/>
then you could do either of
attach_file('my_file_input', path_to_file)
attach_file('some_name', path_to_file)
The other issue you may be running into is that the file input is often hidden to allow for consistent styling across browsers. If that is the case for your app then you can use the make_visible option to tell Capybara to make the file input visible, attach the file, and then rehide the input.
attach_file('my_file_input', path_to_file, make_visible: true)
UPDATE: now that actual HTML has been provided and confirmed that the file input is actually input any of the following should work
attach_file('image-file', path_to_file, make_visible: true)
attach_file('Browser', path_to_file, make_visible: true)
find('.text-field__browse_file').attach_file(path_to_file, make_visible: true)
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 have to upload an excel file in the application.For that, I need to click on one arrow mark (i.e;browse button)which will open up the popup for the user to choose the file from local drives.Below is the code displayed when I did inspect element on the arrow mark.
" ".
Also, the path which will display after choosing the file will be greyed out before user selects the file. This will be enabled only when the user chooses some file from the local.
I was trying below code but it did not work. I think send keys is wrong option as the text path is greyed out.
Help me on this.
WebElement El = driver.findElement(By.id("'uploadInp'"));
driver.findElement(By.id("uploadInp")).click();
El.sendKeys("D:\\NTN 4\\Demo\\BulkCart_Template.xlsx");
Arrow HTML code:-
<input id="file1" type="file" value="" style="background-color: red;opacity:0;filter:alpha(opacity=0);cursor: pointer; padding-top:3px;width:25px;" name="file">
You do not need to click on browser button or open any pop-up. sendkeys will going to dump your path in HTML DOM for you
So don't click on browser button while use the same button element to perform sendkeys like below:-
WebElement El = driver.findElement(By.id("'uploadInp'"));
El.sendKeys("D:\\NTN 4\\Demo\\BulkCart_Template.xlsx");
Now you need to click on element which is going to start your upload. As you didn't mention and it's unclear according to your question that which element going to upload your file. Just find that element and click on it normally.
Hope it will help you :)
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>