I'm trying to use ng-file-upload on my page. I've tried several different ways to invoke the file upload prompt, including an
<input type="file" ngf-select="myFunction()" />
and this
<a ngf-select="myFunction()"></a>
I've tried wrapping both of those options in forms, and tried outside of forms. The issue I'm having is that it's really hard to get the file upload prompt to pop up when you click on the link. It only shows up every now and then. The other issue is that the myFunction() function is called multiple times even when I can't get the file upload prompt to popup and select a file.
When I am finally able to select a file, the function is called over and over and I get caught in an infinite loop. It seems like I have everything set up the same as the demo page but it doesn't work. Has anyone else had this issue?
Thanks in advance!
Related
I'm building an internal tool where my team members need to copy some value from PDF into an input field. So I'm loading the pdf beside the input field using an iframe like this :
<iframe style={{width:"40vw", height:"100vh"}} src=""https://drive.google.com/file/d/1Q_0Jj3ba85sTBHir4F0BKJ2WurjYnCBg/preview""
frameBorder="0"
/>
CTRL + C doesn't work. So copy value using right click. When I click the copy button and try pasting in the input field, the entire screen freezes. Even just by copying everything freezes.
Why is this happening? How can someone fix this?
Maybe problem not with code because in example all works fine without any freezes
https://codesandbox.io/s/trusting-glitter-5ghgqu?file=/src/App.js
If you want to hotkeys work, you should pass listener to iframe
window.myIframe = document.getElementById("iframe id").contentWindow;
window.addEventListener("keydown", function(evt) {
myIframe.myKeydownEventHandler(evt);
});
I am using FileBase64 react component for uploading files (images), but I have a problem. When I try to upload the same named image twice in a row the file uploader doesn't even trigger. I also tried to upload an image and then change the name of it and try again and then it worked. So I am guessing that the problem is with the file uploader which is not triggered when you try to upload the same NAMED file more times in a row. I have also the function addImageToBase which is just calling an endpoint to send images to the server. I tried to print something on the first line of that function so I can be sure that the problem is not with the function, and the function wasn't triggered at all, so it is a one hundred percent problem with the file uploader.
<FileBase64
type="file"
name='image'
id="file-upload"
multiple={false}
accept="image/*"
onDone={(e) => { setFieldValue("image", e); addImageToBase(e) }}
/>
I don't think that this code is important, but if it will help, here you go. Can anyone tell me how to fix this problem?
I am building a fullStack project with react where you can create posts.
I am trying to use input type file to upload a picture, but when I click the choose file button, the pop up window does not appear. Here is the input:
<input type="file" onChange={e => setPhoto(e.currentTarget.files[0])} />
This isn't working. I tried changing onChange for onInput and it is still not working. I also looked around to make sure it wasn't nested inside another element that had e.stopPropagation or e.preventDefault. It is not. I tried placing it in different parts of my code and components and it still isn't working.
Something that I found curious is that, this issue is happening on Chrome. When I checked my localhost on Safari, the window where I can select the file pops up.
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 :)
The page loads without any of the images displaying on IE11 only, but refreshes them accordingly when we resize the browser intermittently (1/3 loads). We cannot replicate this with any of the other browsers. srcset works fine by itself with static content.
Here is a Plunker example of it not working in IE11.
Or quick and easy, the actual img html we're using:
<img data-ng-srcset="{{::image.url}}, {{::image.url2x}}" alt="{{::image.name}}"/>
The images or surrounding divs do not have any transitions, shadows or opacity applied.
The html renders fine with angular passing over and rewriting the srcset attribute correctly. The images just do not appear, only the alt tag. Wondering if this could be a call stack issue due to the intermittence of it, maybe a race condition with Picturefill loading before angular finishes a digest or something.
Cheers in advance!
A work around if you use PictureFill in a loop and in a specific case (not on all images of your application), is calling a function that launch PictureFill directly from HTML, after last item loaded (this is not the best practice but fix the IE11 problem) :
<picture><!-- Your image --></picture>
<span ng-if="$last">
{{ controllerAlias.launchPictureFill() }}
</span>
Came across this as a solution: http://tech.endeepak.com/blog/2014/05/03/waiting-for-angularjs-digest-cycle/
var waitForRenderAndDoSomething = function() {
if($http.pendingRequests.length > 0) {
$timeout(waitForRenderAndDoSomething); // Wait for all templates to be loaded
} else {
$window.picturefill();
}
}
$timeout(waitForRenderAndDoSomething);
The only issue that the blog post describes is here, so if anyone has anything better please let me know:
The $http.pendingRequests supposed to be used for debugging purpose only. If angular team decides to remove this, you can implement the same using http interceptors as suggested in this link.