Html5 File Input inside Popover - javascript

I'm trying to implement a note system where users can append notes to documents and upload files inside a popover
Unfortunately, when I click on the "Browse" button, the popup is closed.
Is there anything I can do to prevent that?
Thanks

Well, forget about it, I had another event (body click) that was being intercepted by the file input button.
I've fixed the issue.

Related

JS form action link is used instead of link that is actually clicked

I just came accross the below issue in a project of mine:
user clicks a button
a js function is called to check the
input of the form field and if accepted will submit the form to save_to_db.php in an
iframe.
in the iframe, save_to_db.php will save the form details to the db and calls another js function that updates the contents of html elements on the current page showing the latest status.
This used to work without any issues (and still does in most browsers).
But now in Chrome Mobile browser version 63.0.3239 somehow every link a user clicks after they clicked the button, will load to save_to_db.php (the form action of the button) instead of the link that is clicked.
Has anyone noticed this or similiar behaviour or does anyone know how to resolve this?

How to upload same file twice in angularjs?

I am using angular-file-upload
I am taking file input in a dialog, my flow is as follows:
User open dialog, Upload File, User Closes the dialog
The issue is, when the user opens the dialog next time, without refreshing the page (obviously), the previous file name is still there next to "browse" button. But when user click on upload, it doesn't upload the same file, even if the user re select the same file. I know it has something to do with the onchange event but how to solve this in angularjs?
I tried resetting the model attached to file input, but no luck.
Try to set replaceFileInput config to true

HTML5 File Upload Input - onChange

When the user selects files to be uploaded I present one of two buttons to take action on the file(s) based on how many files there are. I get the number of files by including an onchange=getNumFiles(this) in the file input tag.
My problem is that I hide the button to take action on the files after the user clicks it, and if the user selects the same file(s) a second time the button is not "re-presented". This is happening because the file upload input never actually changed because the input is still holding the original file selection. How can I account for this?
Is there a way to clear the contents of the file upload input? I've tried setting the value to null to no avail. Or is there a different event other than onchange that I should be using? hope this makes sense....
"Is there a way to clear the contents of the file upload input"
Yes, call .reset() on the form.
$("#myform")[0].reset();
Now if the same file is selected again it will correctly trigger a change event since it changed from nothing to something again.

making drag and drop upload with less javascript

I'm trying to make an upload holder for my website, so users can easily drag and drop a file on it.
there is a lot of libraries and events for doing that, but I need a simple way.
this (thought) came to my mind...
I put a file input to the page and sets width and height.
now when my user drag a file on it, onchange event will work.
but I want to hide browse button and there is two way:
set 0 opacity.(it is not working in some browsers)
set hidden visibility.(the thought is not working)
help me, what else I can try?
Put the form on a hidden iframe. Use an ordinary div for the target. When the file is dropped, catch the event and update the input, then submit as post. The result is ajax-like uploading via file drag and drop.

Open browse window in IE on single click file input

I'm having some trouble to make the file input work the way I want it. The file element exists of 2 parts, the textfield and the browse button. In other browsers than IE clicking either of them opens a window where you can select your files. In IE however it only opens when I click the browse button. If I click the textfield next to it I have to doubleclick in order for the window to open.
Is there a way to fix this with javascript so a single click on the textfield will also open the window? I tried the following, but it didn't work. (code is much simplified from the real example)
Html:
<input id="file" name="file" type="file"/>
JS / jQuery:
$("#file").click(function(){
$(this).trigger("dblclick");
});
$("#file").dblclick(function(){
alert("Double");
});
Now the above code alerts the "Double" but doesn't open the window. Is there a way to fix this?
Thanks in advance.
Since the entire control is native to the browser (and are never exposed as text box plus button) you simply do not have access to methods/events that will allow you to invoke the upload button. I believe this is mainly to avoid sites tricking the user into uploading non-intended files.
If you can manage to take a little time to implement a workaround, this does a nice of job of creating a rather nice upload component thats easier to manage. I'm sure a quick google will list you many other examples on how to style the file upload component.
Just tested your code with JSFiddle on IE6 (http://jsfiddle.net/SUWRK/) and, from my understanding, it works as you're expecting ... The alert shows up on a single click event (please note that's it's tricky to catch the dblclick event in IE < 9 - see https://gist.github.com/399624).
Are you sure there's not something else going on with the larger code set?

Categories

Resources