We've used for some years a home-grown file uploader for our classic ASP website. It works like this:
ASP page sets some specific constants and #includes an ASP library called Browse-Files.asp.
Browse-Files.asp displays, inside the #including page, a file explorer-like view of the directories and files in a directory. It also shows various HTML links to allow file modification functions - create a directory, upload a file, move, rename and delete existing files.
Each of these links calls a Javascript function that generates a simple HTML page in a popup window. These popups contain the required HTML form for the requested file modification activity. The HTML source for the popup pages is generated on the fly by Javascipt, rather than loading a static .htm or .asp file (this is purely so that all of the functionality of Browse-Files.asp is located in 1 file).
The user fills in the popup form and submits. The form submits back to the parent page (form target attribute) and closes itself (Javascript timer, window.close).
The parent page refreshes due to the form submit, showing the change the user requested.
Issue is: this has worked fine for some years on various browsers, IE 6 to 8, Firefox and Opera. However, in IE9, the file upload does not work. The other popup-based tasks such as file renaming and directory creation continue to work.
Code - the file rename popup (works in IE9 and all before):
<html>
<head>
<title>Rename</title>
<link rel="stylesheet" href="/Common/CSS/screen.css" type="text/css" media="screen" />
</head>
<body>
<h1>Rename</h1>
<p>Enter the new name for "Config Mgmt Text.txt" in the folder "General/Share-Files/":</p>
<form name="form" method="post" action="/General/Share-Files.asp" encType="multipart/form-data" target="Browse-Files" onSubmit="self.setTimeout('window.close()', 500)">
<input name="task" type="hidden" value="T03" />
<input name="path" type="hidden" value="General/Share-Files/" />
<input name="target" type="hidden" value="Config Mgmt Text.txt" />
<input name="name" type="text" tabindex="1" size="40" value="Config Mgmt Text.txt"></input>
<input name="submit" type="submit" value="Rename" tabindex="2" />
</form>
</body>
</html>
Code - the file upload popup (broken in IE9, works in all before):
<html>
<head>
<title>Add Files</title>
<link rel="stylesheet" href="/Common/CSS/screen.css" type="text/css" media="screen" />
</head>
<body>
<h1>Add Files</h1>
<p>Browse for files to add to the folder "General/Share-Files/":</p>
<form name="form" method="post" action="/General/Share-Files.asp" encType="multipart/form-data" target="Browse-Files" onSubmit="self.setTimeout('window.close()', 500)">
<input name="task" type="hidden" value="T01" />
<input name="path" type="hidden" value="General/Share-Files/" />
<input name="file1" type="file" tabindex="1" size="40"></input><br />
<input name="file2" type="file" tabindex="2" size="40"></input><br />
<input name="file3" type="file" tabindex="3" size="40"></input><br />
<input name="file4" type="file" tabindex="4" size="40"></input><br />
<input name="file5" type="file" tabindex="5" size="40"></input><br />
<input name="submit" type="submit" value="Upload Files" tabindex="6" />
</form>
<p>Note that upload speed depends on your internet connection speed.</p>
</body>
</html>
All the forms are encType="multipart/form-data" to accomodate the file upload, and the ASP on the main page does a Request.BinaryRead(Request.TotalBytes) first thing with the form data. It then parses the data by delimiter, splitting it out into binary data (uploaded files) and text data (regular form fields). One of these regular form fields, <input name="task" type="hidden" value="T01" />, is how it knows what to do with the submitted data (rename a file, upload a file, etc).
So, why does uploading, and only uploading, not work in IE9?
As above, the form submit method is the same for uploading and other (working) form actions, as is the server-side parsing of HTTP POST.
Debugging has shown that the file upload popup never even submits data back to the parent page (or to itself), i.e.the form data is never submitted to the server in the first place. But, all the other forms work the same way and do submit.....
Could this be something completely unrelated to code, like an IE9 security setting?
Have even tried forcing IE8 compatability mode on IE9 (<meta http-equiv="X-UA-Compatible" content="IE=8" >), no change.
Any assistance greatly appreciated.
Thanks
Lukas
Update:
1) "Doesn't work" means that the upload popup dissapears on submit (as it should), but nothing is ever submitted to the parent page. If I disable the auto-close on the popup: after clicking submit the text fields containing the path(s) to the file(s) to be uploaded are cleared, but nothing else happens. This suggests that it is submitting to the popup page rather than the parent page, but that doesn't really make sense, as the other (working under IE9) popup pages still correctly submit to the parent page. I'll try replacing the JS-generated popup page with a conventional ASP page that can show any HTTP POST data, and go from there.
2) If I force compatability mode on the client side (IE9 compatability view button), it does work exactly as it should. This is more workaround than fix though. I suppose it does rule out browser settings though, as compatability mode would only affect page rendering?
I was able to solve this issue in Windows7 & IE9 (worked in all other browsers and versions I could test) by making sure the first attribute of the initiating window.open() call had a viable url in it.
I was actually write()'ing to the opened window to stick the code in it that I wanted, which included the file upload form. So I didn't have a url I needed to declare on the opened window. It said "about:blank" in the address bar. Further, by hitting F12 in the window, I could see I was getting a "SCRIPT5: Access is denied" error when I tried to submit the form.
I was calling the popup window like this:
var popup_window = window.open("","upload_popup_window_name","menubar=1,resizable=1,scrollbars=1,width=630,height=400");
By changing the above to:
var popup_window = window.open("/blank.html","upload_popup_window_name","menubar=1,resizable=1,scrollbars=1,width=630,height=400");
Where /blank.html was an actual file that the web server returned a 200 code upon the request(although it could actually be the source of the url you wanted to call, I'm assuming if you had already done it this way, it would work).
I still overwrote the contents of the window by by document.write()'ing all my own code into the window they way I was previously doing anyways.
By making this small modification, IE9 then allowed file uploads to be INITIATED by the popup window and I no longer received the "SCRIPT5: Access is denied" error. And files began to be successfully uploaded again.
Hope that helps
Is ie 9 case sensitive to your form attributes?
try changing:
encType="multipart/form-data"
to:
enctype="multipart/form-data"
and clear your cache.
Related
Camel 2.24.0
I am struggling to load a simple csv file that is not in a Latin charset, from a web form with file field:
<form action="/register/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="inputfile"/>
<input type="submit"/>
Here's my current endpoint URL:
jetty:http://0.0.0.0:{{web.port}}/register/upload?httpMethodRestrict=POST
What happens is that the contents of the file is converted into String with multiple black question marks in place of non-Latin characters.
When I try to load a binary file like jpeg, it still puts the file contents as an ugly String into headers of the HttpMessage.
I can't see where I am asking to convert my file into String, but for a text (csv) file that would be okay if only it was able to use some charset other than the Latin-1.
I have read a lot of articles everywhere and have tried different magic to no avail. What I remember is a url query parameter to switch on/off the Multipart Filter, and in the web form to add a hidden _charset_ field.
The Apache Jetty Component says that the Multi-part should work out of the box and even mentions some example, but unfortunately there is no hyperlink. Anyway, the HttpMessage attachments are empty, so it doesn't actually work as advertized.
So the question in simple terms is "how do I specify my endpoint URL so that I am able to get non-corrupt file contents that was uploaded through a web form, and how do I get the file contents". Or maybe, "do I have to add some attribute to the web form"
You have a few things to consider.
Are all POST requests via that form going to be Windows-1251?
Does the HTML charset that the form was presented on matter to you?
Do you want the user to pick the charset?
You mentioned the "hidden charset field". It's actually called _charset_ (with the start and end underscores present), and it's important to understand how it works with HTML forms.
That works by creating a hidden field in your form like this ...
<html>
<body>
<form method="POST"
enctype="multipart/form-data"
action="/formsubmit">
<input type="hidden" name="_charset_"/>
<p>Japanese</p>
<input type="text" name="japanese" value="健治"/>
<p>Hello</p>
<input type="text" name="hello" value="ャユ戆タ"/>
<p></p>
<input type="Submit" value="Capture">
</form>
</body>
</html>
However, that's an incomplete example.
Why? Well, that will submit via the _charset_ form entry whatever the browser's HTML document charset is. Which in the above example could be darn near anything and is unpredictable.
You could specify the Document charset as a meta entry, like this ...
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form ...>
That will present the HTML in utf-8 and submit the form where the _charset_ entry is value utf-8. (It also makes anything hand-typed into text fields on your form be UTF-8)
But wait, what if you wanted to have the form be a different charset?
You could do the following ...
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form accept-charset="windows-1251"
method="POST"
enctype="multipart/form-data"
action="/formsubmit">
<input type="hidden" name="_charset_"/>
...
That will declare that all form submissions are windows-1251, and this is done by also submitting the _charset_ entry with the value windows-1251.
But this means your form submissions will be windows-1251, which might not be feasible for some submissions.
You also mentioned that you are doing CSV form uploads.
You might want to consider doing a form file upload instead (as that will not interpret via the _charset_ or encoding types).
<form method="POST"
enctype="multipart/form-data"
action="/formupload">
<p>File</p>
<input type="file" name="file"/>
<input type="Submit" value="Capture">
</form>
This all assumes that Apache Camel uses the HttpServletRequest.getParts()
(and equivalent) APIs, and not something custom. (like the ancient Apache FileUpload lib).
The way the API works is that all parts of a multipart are binary and have no encoding or charset associated with them UNTIL you attempt to access it.
For <input> entries, no charset is applied via the Servlet Part API.
However, if Apache Camel uses HttpServletRequest.getParameter() style APIs, then the _charset_ is applied to the binary data held by the multipart section when returning the String.
Equivalent to ...
String charset = getPart("_charset_");
if(charset == null)
charset = "utf-8"
try(InputStream in = getPart(keyname).getInputStream();
InputStreamReader reader = new InputStreamReader(in, Charset.forName(charset));
StringWriter writer = new StringWriter()) {
IO.copy(reader, writer);
return writer.toString();
}
How to upload(attach image) the image on react pages using (capybara webkit+ cucumber) for integration UI testing.
I am able to attach an image to rails page but react pages i am unable to upload?
I tried some solutions, still unable to find solution.
1) attach_file('.pb-text-field__browse_file_label', image_file_name)
2) find('.pb-text-field__browse_file_label').set('/scratch/data/1.png')
Actual HTML:
<form>
<div class="file text-field">
<div class="text-field__input-wrapper">
<div class="text-field__box"></div>
<div class="text-field__upload_file">
<input class="text-field__file-input" placeholder="Upload only jpeg or png images" disabled="">
<div class="text-field__browse_file">
<label class="text-field__browse_file_label" for="image-file">Browse</label>
<input id="image-file" class="text-field__browse" type="file">{this is invisible}
</div>
</div>
attach_file takes the file inputs name, id, or associated label text - https://www.rubydoc.info/gems/capybara/Capybara/Node/Actions#attach_file-instance_method - so passing it a CSS class selector is never going to work. You don't show what your actual HTML is, but assuming you had a file input like
<input id="my_file_input" name="some_name" type="file"/>
then you could do either of
attach_file('my_file_input', path_to_file)
attach_file('some_name', path_to_file)
The other issue you may be running into is that the file input is often hidden to allow for consistent styling across browsers. If that is the case for your app then you can use the make_visible option to tell Capybara to make the file input visible, attach the file, and then rehide the input.
attach_file('my_file_input', path_to_file, make_visible: true)
UPDATE: now that actual HTML has been provided and confirmed that the file input is actually input any of the following should work
attach_file('image-file', path_to_file, make_visible: true)
attach_file('Browser', path_to_file, make_visible: true)
find('.text-field__browse_file').attach_file(path_to_file, make_visible: true)
I am using HTML input type = "file" in an IONIC/Cordova Project.
It works fine in some devices , but in some devices ,it presents me with this issue :
The file picker is opened and I am able to browse files,
but their selection is disabled.
Searched for a solution but couldn't find any.
Any help is really appreciated.
Here is the code snippet:
input type="file" accept=".pdf,image/*" ng-file-select="onFileSelect($files)" id="file"
I have the following code giving a manual browse file dialogue:
input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()"
Is there a way to call this (perhaps using javascript?) automatically on page enter so that the user is given the browse file dialogue upon entering the webpage?
Thanks!
<input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" style="visibility:hidden" />
and the jquery code:
<script>
$(document).ready(function(){
$("input[type='file']").trigger('click');
});
</script>
This requires permissions from user to allow pop ups for security reasons...
Jquery trigger file input
http://www.acunetix.com/websitesecurity/upload-forms-threat/
I have a little problem and I wonder is it possible to resolve it in JSF 2.2.3
I use relatively new inputFile tag and it works ok:
<h:form enctype="multipart/form-data">
<h:inputFile id="auctionImage" value="#{auctionBean.image}"/>
<h:commandButton value="Add">
<f:ajax execute="auctionImage" render="images"/>
</h:commandButton>
<h:panelGroup id="images">
<ui:repeat value="#{auctionBean.productImages}" var="oneImage">
<h:graphicImage value="/image/#{oneImage.url}" width="200" height="171" />
</ui:repeat>
</h:panelGroup>
</h:form>
I want to show every submitted img on the website and have one main sumbit button to submit them all at once. It works ok.
The problem is I have three buttons to browse for image, to submit image and to submit all images. Is it possible to submit it after clicking OK in explorator window?
Ok after day of trying with javascript i realized that it's very simple to achieve by just an ajax tag.
<h:form class="imageForm" enctype="multipart/form-data">
<div class="browseButton"><span class="browseString">BROWSE...</span>
<h:inputFile id="auctionImage" value="#{auctionBean.image}">
<f:ajax execute="auctionImage" render=":mainForm:repeatImages"/>
</h:inputFile>
</div>
</h:form>
Yes, that's it.
PS I used wrapper div and opacity trick for button to change standard html 5 appearance.