I have the following code,
http://fiddle.jshell.net/hvLf8yua/
When I click on the image upload button using my mouse, it opens file dialog as expected. However, I couldn't trigger this using JQuery or JS. Could anyone tell me how I can achieve this? What I want is to open the file dialog box when such script is called.
Here is an exmaple snippet you can refer to:-
<script>
function openFile()
{
document.getElementById("dialog").click();
}
</script>
<body onload= "openFile()">
<input type="file" id="dialog" style="display:none">
</body>
Related
I want to file load popup to appear after I use function loadFile(), because myInput is hidden.
//HTML
<div id ="hideWhiteSpace" style="display:none">
<input id="myInput" type="file"/>
</div>
Here is my javascript file example, onchange won't work cause i cant press the button.
//JS
function loadFile(){
document.getElementById('myInput').onchange = function (e){
//run code to load file into web.
}
}
Okay, I got it, just put this before onchange line:
document.getElementById('myInput').click();
I don't know if I should answer my own questions or delete the post if I got the answer.
Comment please.
I am trying to use elninotech/uppload, as it looks like it will do what I want (give me a portable, easy to use, powerful file upload button). However when I click on the button, the upload dialog appears and disappears (press pause, in debugger, before pressing button, then single step. On 2nd step dialog appears, on 3rd step it disappears).
What am I doing wrong?
<html>
<body>
<form class="profile">
<button id="uploadButton">upload image</button>
</form>
<img id="profilePicImage"/>
</body>
<script src="https://unpkg.com/uppload/dist/uppload.min.js"></script>
<script>
const profilePicture = new Uppload({
value: "https://randomuser.me/api/portraits/men/17.jpg",
bind: ["#profilePicImage"],
call: ["form.profile button#uploadButton"],
//endpoint: "https://example.com/upload_backend",
allowedTypes: "image"
});
</script>
</html>
I found a very complex example on their website https://elninotech.github.io/uppload/ I spent some time debugging, and looking at their code. This is what I found.
An element may have the attribute data-uppload-button to mark it as an uppload button. I don't know how that can work with more than one button.
A default button in form dose not work (it causes the problem described in the question). Changing the button to a span works (but is un-intuitive to user). Changing the form to a div, works. Changing the button type to button works.
From the git-hub issue tracker https://github.com/elninotech/uppload/issues/21#issuecomment-445997614
When you have an HTML form element without a method, it defaults to GET. If it has a button inside it, the form assumes it's a submit button, and therefore refreshes the page on pressing it. This means that if you have button without a type="button", the page is refreshed. This means the original state is reverted and you don't see Uppload open up. That's why you need a type="button" on buttons you don't want to submit the page. Alternately, you can have a event.preventDefault() and return false on the onSubmit event on the form too.
Here is the working code:
<html>
<body>
<form class="profile">
<button type="button" id="uploadButton">upload image</button>
</form>
<img id="profilePicImage"/>
</body>
<script src="https://unpkg.com/uppload/dist/uppload.min.js"></script>
<script>
const profilePicture = new Uppload({
value: "https://randomuser.me/api/portraits/men/17.jpg",
bind: ["#profilePicImage"],
call: ["div.profile button#uploadButton"],
//endpoint: "https://example.com/upload_backend",
allowedTypes: "image",
services: ["upload", "camera", "link"],
crop: {
startSize: [100,100, "%"]
}
});
</script>
</html>
I have not yet tested with a working endpoint (server)
I want to change some contents of bootstrap modal body on link click.
Here is the link code:
<a href="" id="login_link" data-toggle="modal" data-target="#myModal" >Log In</a>
And Here is the JQuery code:
$('#login_link').click(function (element) {
$('#myModal').find('#signup_form').hide();
});
Here is the form inside Modal body:
<form class="form-horizontal" id="signup_form" name="signup_form" ></form>
On link click the modal is opening but modal body is not changing.
please help me.
[UPDATES]: Modal is not getting the external js file that manupulate the modal body.
<script type="text/javascript" src="js/code.js"></script>
the js codes works fine when it is the js codes directly embed along with modal.
So I need to know exactly where i have to put the external js file.Currently is it before tag.
Why do you need click function if it is bootstrap modal?
Anyhow you have given "data-target and data-toggle" attribute so you can directly click a button without any click function.
refer https://www.w3schools.com/bootstrap/bootstrap_modal.asp for better understanding of modal
You can try below code. This will hide form on popup of your modal
$('#myModal').on('shown.bs.modal', function () {
$(this).('#signup_form').hide();
});
Try this
$(document).on('click', '#login_link', function(){
$('#myModal').find('#signup_form').hide();
});
I have the following example files:
index.html
<body>
<input type="file" name="image" onchange="handleUpload()">
<script>
function handleUpload() {
window.location = 'aa.html';
}
</script>
</body>
aa.html
<body>
success
</body>
After file upload I'm redirected to another page.
When I hit browser back button I get Uncaught ReferenceError: handleUpload is not defined at HTMLInputElement.onchange.
Can someone explain why is this happening? I understand why handleUpload is triggered but why it's undefined?
Update
My app is more complex. I use webpack to bundle my js files into a single file then I reference it in layout before closing body tag.
What i'm trying to do is a image preview when input file is filled. Everything works great but if I hit back button after the form was submitted I get that error.
I manage to avoid this problem by removing onchange from html and added a event listener in one of js file. This approach has a delay on opening the select file window.
Here is your Answer
<input type="file" name="image" onchange="window.location='aa.html'">
I'm not really familiar with jquery, but am trying to get a simple animated gif to show when a form is submitted. When clicking 'submit' to upload an image I want to show gif so that users know that image is being uploaded. The submit button has an id="submit" and also an onClick="return confirm('message')"
I have the div code containing the gif:
<div id="loading" style="display:none">
<img src="images/hand_timer2.gif" alt="loading" />
</div>
which is hidden. And it does show if I remove the style. Fair enough. But when I try to show it with the following javascript it doesn't show:
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$('#loading').show();
});
});
I have
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>
in a separate PHP header file. As far as I can see it's the only reference to jquery library, but I do have other javascript codes that all work. I just can't get this one to work. Can anyone point out what I'm doing wrong and why I can't get the div to show gif when clicking submit?
I believe the problem could be that your inline onClick="return confirm('message')" prevent the click-event from reaching your click-event listener attached with jQuery - not sure though. Anyhow, instead of listening for a click-event on the submit-button, I would listen for the submit event on the form, that will fire when the form is actually submitted (a form can usually be posted by other means than clicking the submit button as well - through the Enter key for instance).
$('#idOfYourForm').on("submit", function () {
$('#loading').show();
});
Side note:
You don't close the style attribute properly on your loading div (notice that the > is blue):
<div id="loading" style="display:none>