safari and fileupload form doesnt work - javascript

I'm trying to add attachment upload for my typo3 extension, and since the normal file-input
doesn't work with the design. I decided to add a text-input, to display the value, and a
button-input, to fire up the file-inputs click event. This works FF and IE without any Problems,
but when I try this on Safari the file-inputs click event doesn't work (others do!!!).
<form action=""
name="attachmentPostForm"
method="post"
onSubmit="createAttachmentPostAction(${uid});"
enctype="multipart/form-data"
target="attachementupload_target">
<input type=file
name="leadimagefile"
accept="image/gif,image/jpeg"
onChange="document.getElementById('ImageFakeFile').value = this.value"
id=imageTrueFile style="display:none">
<input type=text id=ImageFakeFile readonly>
<input type = button value="browse" onClick="document.getElementById('imageTrueFile').click()">
<input type="submit" value="upload" />
</form>
Is there another way to achieve the effect, or do i have to use the "normal" file-input on this case?

It's doesn't work because your input has style="display:none", change it to visibility: hidden and it will work. I also recommend to check https://stackoverflow.com/a/3030174/967358

Related

How to give the same behavior of an input hidden and of a custom label

How to give the same behavior of a file type input button with style = "display: none;" To a custom label? That is, the label and the input can have the same actions even though the input is hidden.
Below my html code:
<label for="model1" class="uploadFile">File...</label>
<input id="model1" type="file" name="model1" class="model1" style="display:none;" required="true" />
it is quite easy with jQuery:
$('#model1Label').on('click', function(){
$('#model1').triggerHandler('click');
//seems not to work consistently on chrome (only for file inputs?)
//$('#model1').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="model1Label" for="model1" class="uploadFile">File...</label>
<input id="model1" type="file" name="model1" class="model1" style="display:none;" required="true" />
EDIT: as suggested by SKSpall, modified the trigger function for a weird behaviour on at least chrome

Search button on ios keyboard does not submit the form

I coded a simple search form for my website using just a text input for the search term. Also i used the typeahead.js plugin which allows autocomplete while typing.
Everything seems to work fine except when i'm trying to submit the form using the Search button of the ios keyboard. When i tap it nothing happens.
Any ideas about why this is happening?
Here is the form's code:
<form action="[config.site_url]/search/find" method="post" id="main-search-form">
<div class="form-group" id="main-search">
<input id="topnav_search" name="search_text" class="form-control typeahead" placeholder="" type="text" value="">
</div>
<input type="submit" name="submit" style="display: none;" />
</form>
And this is the search ios button that i mean:
Finally, i just changed the css styling of the submit button to this:
style="position: fixed; top: -1000px;"
Solution found here: Getting iPhone GO button to submit form

Restore Default Form Submit thru Button/type='submit' behaviour

I have a button in the jquery mobile form, which defines the post action attributes.
<form id="form1" enctype="multipart/form-data" data-ajax="false" method="POST" target="uploadTarget" action="https://graph.facebook.com/me/photos?access_token="...">
<input id="source" name="source" type="file">
<input id="message" name="message" type="text">
<button id="upload" type="submit" name="upload">Upload Photo</button>
</form>
The post method on the form is not called when I click on the styled button.
The method 'post' is called on the form if I use data-role="none"
<button data-role="none" id="upload" type="submit" name="upload">Upload Photo</button>
But the button obviously loses the mobile styles.
I have data-ajax="false" at the form level as shown (thanks to CBroe!) , but that does not help.
Is there any option to get the jquery mobile styles on buttons, but leave the default Form events and submit/post behavior.
I have already tried to data-ajax="false", but that does not help.
Where did you put that – on the button element, or on the form element? (It’s supposed to be set on the form.)
The problem was the mobile css file. I was using an older version. after including the latest version :
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.min.css" />
It seems to work.

HTML upload file small manipulation

When I use this code on IE8, the file is sent through the HTTP request fine:
<form action="http:localhost:8080/myApp"
enctype="multipart/form-data" method="post">
<p>
Type some text (if you like):<br>
<input type="text" name="textline" size="30">
</p>
<p>
Please specify a file<br>
<input type="file" name="datafile" size="40">
</p>
<div>
<input type="submit" value="Send">
</div>
</form>
but when I add another intermediate button, 'Add file', as you can see below instead of pressing the 'browse' button itself, the file isn't sent to the server side, why??
<form action="http:localhost:8080/myApp"
enctype="multipart/form-data" method="post">
<p>
Type some text (if you like):<br>
<input type="text" name="textline" size="30">
</p>
<p>
Please specify a file<br>
<input id="fileChooser" type="file" name="datafile" size="40">
</p>
<button onclick="document.getElementById('fileChooser').click()">Add File</button>
<div>
<input type="submit" value="Send">
</div>
</form>
Change the event handler:
<button onclick="document.getElementById('fileChooser').click(); return false">Add File</button>
Your button was acting as a "select" element. You could also make it work by explicitly setting the button type, I think:
<button onclick="document.getElementById('fileChooser').click()" type='button'>Add File</button>
Now, this works in Chrome, maybe Safari, and you say now that it works in IE8 as far as getting the file chooser up. It won't work in Firefox, however, because Firefox appears to be more strict about what you can do to file inputs.
Have the real input of type file hidden by setting its opacity to 0 then put the fake button on top of it, with smaller z-index value. This way when clicking the fake button, user will actually click the real button underneath and you will achieve the visual effect you desire.
OK read some articles. Apparently that's just impossible.
I hope that HTML5 and IE9 will improve the customization of the annoying upload button, in many aspects.

Submit a Form to a new Tab more than once

I am trying to build a simple form for sending a newsletter:
<form method="post" id="newsletter_form" action="">
<label for="subject">Newsletter Subject:</label><br/>
<input type="text" name="subject" class="textField large" id="subject" /><br/><br/>
<label for="contents">Newsletter Contents:</label><br/>
<textarea class="textField" rows="6" cols="40" name="contents" id="contents"></textarea>
</form>
And then two buttons, one of them sets the action to a preview page, and target to _blank, to open in a new tab, and then the other button sets another action, and removes the target, so that it submits normally and sends out the newsletter. However, hitting the preview button only works once in Chrome/Safari.
I have searched, and found out that this is a bug in Chrome and Safari. However, I am trying to bypass this by creating another form using jQuery, with a different ID, removing the first form, and making the preview submit that second form. This still doesn't work. It works for IE and Firefox, just not in Webkit based browsers.
Is there any way to get around this?
This seems to work for webkit. Not sure how it will work for IE.
$("#newsletter_form").submit(function(){
$("#newsletter_form").submit();
});

Categories