I have a form which is in a modal window, as part of this form I have a file upload.
I am struggling to find a way to upload in the
<g:form>
via Ajax. I know I can use uploadForm, but this refreshes the page which is not what I want.
I have tried all the ajax file upload grails plugins with no luck.
Can anyone point me to some sort of way I can do this.
What I have tried so for is as follows:
<g:form action="save">
<g:textField name="category" value=""/>
<g:uploadForm name="myUpload">
<input type="file" name="myFile" />
</g:uploadForm>
<g:submitButton name="create"value="create" />
</g:form>
<g:javascript>
$(document).ready(function() {
$('#myUpload').ajaxForm(function() {
alert("File upload finished!");
});
});
</g:javascript>
The alert never get triggered.
I have added the relevant JS files.
You can ajaxify your upload form using the jquery ajax form plugin.
If you want to submit everything in your form in one go via ajax, you can do something like this:
<g:uploadForm name="myUpload" action="save">
<g:textField name="category" value=""/>
<input type="file" name="myFile" />
<g:submitButton name="create"value="create" />
</g:uploadForm>
<script>
$(document).ready(function() {
$('#myUpload').ajaxForm(function() {
alert("File upload finished!");
});
});
</script>
Related
I am trying to build an image upload interface which submits the form automatically as soon as choosing a file from the file browse window. This is how my HTML looks like:
<form enctype="multipart/form-data" action="avatar.php" method="post" id="avatarForm">
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8mN2ibS1RFAfbliQ_QjEPmnVFY272SpjSCSz9uDIfj4wUvM39Rw" width="100px"/>
<input onchange="javascript:this.form.submit();" type="file" id="avatar" style="display: none;" />
</form>
and this is how my JS looks like:
$("input[type='image']").click(function() {
$("input[id='avatar']").click();
});
Problem is as soon as I click image input which triggers #avatar, file browser is being opened but the form automatically being submitted without allowing me to choose a file from the window.
What is wrong here?
The <input type="image"> is a graphical submit button, so when you click it, it will automatically submit the form. Here's the documentation on it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/image. If you want to stop the form from submitting, you need to cancel the default action of the click. So, your code would be this:
$("input[type='image']").click(function(e) {
e.preventDefault();
$("input[id='avatar']").click();
});
I don't really understand your problem. Here it seems to work. It doesn't submit the form when I open the file browser, until I choose an image and close the file browser. (note it doesn't post after it either but that's because of a javascript error that is not related to your problem. When you copy this code to an empty html it should work)
$("input[type='image']").click(function() {
$("input[id='avatar']").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" action="avatar.php" method="post" id="avatarForm">
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8mN2ibS1RFAfbliQ_QjEPmnVFY272SpjSCSz9uDIfj4wUvM39Rw" width="100px"/>
<input onchange="javascript:this.form.submit();" type="file" id="avatar" style="display: none;" />
</form>
I'm using an icon instead of the regular upload input + submit button.
I want the upload to starts automatically right after a file is chosen.
Once the user selects a file, nothing happens though.
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input id="upload" type="file" name="image" style="display:none" value=/>
<input name="wishid" type="hidden" value=/>
<img id="upload_img" src="/images/upload.png">
</form>
<script type="text/javascript">
$('#upload_img').click(function(){
$('#upload').click();
});
</script>
What do I need to add to the jQuery code to actually start the upload process via upload.php ?
Take a look at this description of how to replace input:file with image and then you can just use the code below...
<script type="text/javascript">
$('#upload_img').click(function(){
$('form').submit();
});
</script>
I use this upload form all of the time and use the same file name each time.
I wonder if there is a way to set the file name in a form by changing the code and saving the file locally. If there other ways to automate this I'd be open to that too. Thanks.
Here is the source:
<html>
<body>
<form enctype="multipart/form-data" action="mibdata.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
Choose a file to upload: <input name="uploadedfile" type="file"/><br />
<input type="submit" value="Upload File" />
</body>
</html>
PHP Code: (in mibdata.php)
$target_path = "/path/to/save/file/filename.ext";
if(isset($_FILES['uploadedfile'])){
move_uploaded_file($_FILES['uploadedfile']['tmp_name'],$target_path);
}
Make sure that the target_path is writable by server.
You'll also have to use something like PHP as a Script so you can move your uploaded file from the Webserver's temp-directory to somewhere where it can be saved persistent.
Look at this Tutorial for example.
Using Javascript I would like to show a working/loading image once a user hits submit on my form. The form is used to upload video's so it can take a while for the file to upload. Once the file is done uploading the page reloads so the loading image would not need to be visible anymore.
Can anyone help me with this please?
<form method="POST" enctype="multipart/form-data" action="">
<input type="hidden" name="MAX_FILE_SIZE" value="5120000" />
<input type="hidden" name="upload" value="yes">
First Name: <input type="text" name="firstname"><br>
Email: <input type="text" name="email"><br>
Email Confirmation: <input type="text" name="email2"><br>
Video Title: <input type="text" name="title"><br>
Video Description: <input type="text" name="description"><br>
Video to upload: <input type="file" name="uploadedfile"><br>
Terms: <input type="checkbox" name="terms"> Must be checked to accept our terms of service.<br><br>
<input type="submit" value="Upload Video">
</form>
Using jquery: you can use as follow within document.ready
$("form").submit(function() { //you can assign id to your form and used that id instead of form
$("#iamgeid").show();
return true;
});
Normally We cannot display a loading image after submitting a form, because when we submit a form initially it sends request to the server and the loading is only because of the server response after uploading. loading image will not animate while server is loading.
To show the loading image we have to do some tricks.
1. We should not submit the form in the same window, instead we have to post the form to a iframe. this can be done by adding the target attribute to the form tag.
<div id="form-container">
<form ... action="uploadfilepath" target="iframe_name">
......................
......................
</form>
</div>
<iframe name="iframe-name" onsubmit="showimage()" style="width:1px; height:1px; visibility:hidden;"></iframe>
2. We have to add the script to show image when server is loading inside the iframe.
<img src="loading image path" id="image-container">
<script>
function showimage() {
document.getElementById('form-container').style.display='none';
document.getElementById('image-container').style.display='block';
}
</script>
3. Also add the script after uploading the file.
.......................................
.......................................
your file uploading
code goes here
.......................................
.......................................
at the end print the script to reload the parent window or call the function in parent window.
Best approach would be an AJAX call to do the whole thing.
Place an image with display: none on the desired location and then do this small thing:
var d = document;
var demoInterval;
$("form").submit(function() {
$("img").show();
demoInterval = setInterval(intervalFunc, 1000);
});
function intervalFunc()
{
if(d.ready) // finished uploading video
{
window.clearInterval(demoInterval);
$("img").hide();
}
}
I am trying to initiate upload of a file as soon as the user selects the file. The form should disappear replaced by the "Uploading your picture..." message.
So far, all I get is the form being hidden (and message showing), but the upload is not happening. The form is not being submitted. Any ideas why?
This is the JS
<script>
$(function(){
$("#file_select").change(function(){
$(this).parents("#upload_form").submit();
$("#upload_form_div").hide();
$("#loading").show();
});
});
</script>
and the HTML
<div class="float_left" id="upload_form_div">
<h3>Select a picture for your profile (4 MB max):</h3>
<form action="http://example.com/profile/upload_picture"
id="upload_form"
enctype="multipart/form-data"
method="post" accept-charset="utf-8">
<input type="file" name="userfile"
id="file_select" />
<input type="hidden" name="upload" value="upload" />
<button id="submit" type="submit"><img height="24" width="24"
alt="Upload" src="images/icons/small/white/bended%20arrow%20right.png">
<span>Upload</span>
</button>
</form>
<form action="http://example.com/profile/remove_picture"
method="post" accept-charset="utf-8">
<button type="submit"><img height="24" width="24"
alt="Remove" src="images/icons/small/white/trashcan.png">
<span>Remove</span>
</button>
</form>
</div>
<div id="loading" style="display:none;">
Uploading your picture...
</div>
It probably has something to do with this part:
<input type="file" name="userfile"
value="onchange="return validateFileExtension(this)""
id="file_select" />
An input type=file should not have a value= attribute (and even if it did, you shouldn't put javascript in there!)
You also have some javascript in the form:
onsubmit="return validateFileExtension(this.userfile)"
If the function validateFileExtension() returns false then the form will not submit.
However, the way you have written the jQuery means that the message will still appear.
EDIT:
Change the id on your submit button to something other than "submit".
In the jQuery docs:
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.
HOWEVER:
You should consider #Abdul's solution, since the working submit will take you away from your message.
If you are using CodeIgniter and you don't want to use Ajax, you should consider using the flash functionality to display the message to the user after the form submits.
You should think of using jquery form plugin to submit your form and jquery validate plugin to validate your form for file extensions and everything.Jquery form plugin submits your form using ajax. In that way you won't be redirected to form action. Also
if you want you can consider using jquery dialog to display the result.
$("#upload_form").validate({
rules: {
MyFile: {
required: false,
accept: "jpg|jpeg|png|gif"
}
}
});
$("#file_select").change(function(){
("#upload_form").ajaxSubmit();
$("#upload_form_div").hide();
$("#loading").show();
});
Submit form on file selection and validate for CSV file input
$('#file').change($('form').submit());
$('form').submit(function(){
if($('#file').val().toLowerCase().indexOf('.csv') != -1){
$('#spinner').show();
return true;
}
else{
alert('Invalid File format. Please, upload CSV file')
return false;
}
});