Blobstore upload with javascript - javascript

This is the minimal declaration for the HTML in order to upload a file in Blobstore in the upload_url. What is required with this solution is required to click the Submit button in order the content to be submitted and get redirected. How can I do the post in the background with javascript or jQuery without losing the enctype?
<form id="upload_file" action="{{upload_url}}" enctype="multipart/form-data" method="post">
<input type="file" name="file">
<input type="submit" name="submit" value="Submit">
</form>

The jQuery Form plugin allows you to submit multipart forms in the background with Ajax.
Example:
$('#upload_file').submit(function() {
var options = {
clearForm: true // clear all form fields after successful submit
};
$(this).ajaxSubmit(options);
return false;
});
$('[name=submit]').click(function(){
$('#upload_file').submit();
});
Making this work silently requires that you replace your 'submit' input with a 'button' input:
<form id="upload_file" action="{{upload_url}}" enctype="multipart/form-data" method="post">
<input type="file" name="file">
<input type="button" name="submit" value="Submit">
</form>

Related

Why does form action call not keep input file when using back button?

function validate_form()
{
//..... validation and other stuff will go here ...
}
<form name="read" id="read" action="test2.php" method="post" enctype="multipart/form-data" onsubmit="return validate_form();">
<input type="file" name="pac" />
<input type="submit" name="submit" value="Submit" />
</form>
In the above example, if you hit the browser back button, the input file remains.
function validate_form()
{
//..... validation and other stuff will go here ...
document.read.action = "test2.php";
}
<form name="read" id="read" action="" method="post" enctype="multipart/form-data" onsubmit="return validate_form(this);">
<input type="file" name="pac" />
<input type="submit" name="submit" value="Submit" />
</form>
In the above example, if you hit the browser back button, the input file is cleared. Why is that? Is the only way to get around this is to save the input into a cookie or session variable? If so, not sure how to save a file.
I have a reason to use the call from JS. I removed most of the code for the above examples. This is happening under Chrome and Firefox. Didn't test others.

Why isn't my JS redirecting the webpage?

I'm trying to make a HTML form that on submit does a google search with JS.
This is the HTML:
<form name="form">
<input type="text" name="search" id="searchBox" onkeyup="changeLogo()" autofocus>
<input type="submit" id="button" value="Submit" onclick="googleSearch()">
</form>
And the JS function:
function googleSearch() {
var searchText = document.getElementById("searchBox").value;
window.location.href = "http://google.com/";
}
The Google URL isn't right but it isn't redirecting at all.. I put alert(searchText) in the function and the alert showed so not really sure what's going on.
If you use button type as 'submit', it will submit your form.
So you can change your button from
<input type="submit" id="button" value="Submit" onclick="googleSearch()">`
to
<input type="button" id="button" value="Submit" onclick="googleSearch()">
It will work.
because the page refreshed when you click submit button before excuting localtion.href line
try change with your code like below
<form name="form" onsubmit="return false">
....
</form>
Your form is submitted which might be the issue. Change the type="submit" to type="button" this will make sure the form is not submitted on click of this button

Jquery submit() doesn't pass file data

I have a very simple form.
<form name="text_hero" id="text_hero" action="<?php echo site_url('templates/saveImage/texthero'); ?>" method="post" enctype="multipart/form-data">
<input type="file" name="uploaded_file">
<input type="submit" value"submit file">
</form>
When pressing the submit button the file is uploaded correctly and saves.
When using Jquery to either "click" the submit button or manually submit the form it fails to send the file.
Jquery:
$('#' + FormName).submit();
Can anyone tell me the reason for this?
EDIT
When outputting the php $_FILES var it just outputs Array() with the jquery method but with the button method it outputs the actual file.
About
When you do some upload of files you need put on form this enctype="multipart/form-data"
Example:
<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="Submit">
</form>
To save the tmp_file to some file
you need put some validation but the basic upload some file is this.
move_uploaded_file($_FILES['file']['tmp_name'], 'path/to/file');
I hope it help you.

How to prevent page redirection/refresh after form submit, while preserving file input? Jquery

I have a file upload form as follows:
<form id="upload" action="someurl" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" />
<input type="submit" value="submit" />
<form>
Problem is that every time I submit the form I will be redirected to the form's action url.
How do I submit this form while still staying on the same page? Using ajax or preventDefault won't work as I will lose the file stream.
Rendy
Provided you have an iframe on your page that's hidden,
<iframe id="hidden-iframe"></iframe>
then add a target to your form:
<form id="upload" action="someurl" method="post" target="hidden-iframe" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" />
<input type="submit" value="submit" />
<form>
you're done !

Creating multi purpose button in html

When on a phone I'm unable to view these two buttons as they are too far apart. I want to make it so after you choose the file, the 'choose file' button would be replaced by the upload button. Is this possible. What would i have to do?
http://goawaymom.com/buttons.png
my html -
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file"class="box"/>
<input type="submit" id="mybut" value="Upload" name="Submit"/>
</form>
-Note I don't care to put them on separate lines or make font smaller- etc
Simplest Way:
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file" onchange="if($(this).val().length){$(this).hide().next().show()}" class="box"/>
<input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
</form>
Without Jquery, Only JavaScript
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file" onchange="this.nextElementSibling.style.display = 'block'; this.style.display = 'none';" class="box"/>
<input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
</form>
<script type="text/javascript">
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
if(fileName){
remove chose file button and show upload button(visible property)
}
});
});
check jQuery - Detecting if a file has been selected in the file input
Yep, it's very easy indeed. You can listen for onchange event of the file input and hide it.
HTML:
<input name="inpt" type="file"/>
<input type="button" value="Upload"/>
Javascript:
//this event is fired when the file is chosen (not when user presses the cancel button)
inpt.onchange = function(e) {
//setting display to "none" hides an element
inpt.style.display="none";
};
JSfiddle
PS. if you want you can use the same trick to show the "Upload" button only when a file is chosen. In that case the button code will be <input id="btn" type="button" value="Upload" style="display:none"/> and in the Javascript code you write btn.style.display="" to show the button.
I can say that there are multiple ways to do it. But in core java script the below is the approach
(1) Initially set the display style of upload button to none in order to hide that
(2) Write Onchange event handler for input file type
(3) In that handler function if the value is not null then hide the input file by applying display style none and then change the style of upload button to empty('').
Hope this approach works

Categories