So I was having issues with the form / hidden iframe file upload technique and spent several days trying to figure out why files wouldn't upload until finally figuring out what the issue was.
When I am building the form dynamically, I insert the file input element as a child of the form:
<input type="file" id="file-select-input" />
... and I had something like this:
<form enctype="multipart/form-data" id="file-select-form" target="select-file-iframe" method="POST" action="/upload/">
<div id="file-select-button" class="">
<input type="file" id="file-select-input" />
</div>
</form>
<iframe style="display: none" id="select-file-iframe" src="javascript:false;" name="select-file-iframe"></iframe>
It turns out that when I submit the above form, the input file information was not being sent. The reason for this, is that I didn't have the name attribute specified on the file input element. So when I changed it to this:
<input type="file" id="file-select-input" name="file" />
... things worked.
So why does the name attribute of an file input element need to be set for a file to be uploaded? According to the W3C specs, the name attribute assigns the control name, but what is the control name? Why is it important?
According to the W3C specs, the name attribute assigns the control name, but what is the control name? Why is it important?
The name of the form control controls the key in the key/value pairs that make up the POSTed data or the query string.
Without knowing the name of the control, there's no way to transform it into the data to be sent to the server.
Related
I am trying send the value of a textarea using a Post method when a button is clicked.
Code is very simple:
<html>
<head>
</head>
<body>
<form action="/editFile" name="confirmationForm" method="post">
<textarea id="confirmationText" class="text" cols="86" rows ="20" name="confirmationText" form="confirmationForm">
<out value="#{user.getFileContent}"/>
</textarea>
<input type="submit" value="Email" class="submitButton" id=""/>
</form>
</body>
</html>
To get this data when this request is done I am using CWF web framework and the methode is very simple:
void editFileController::doPost(CWF::Request &request, CWF::Response &response) const
{
QString out = request.getParameter("confirmationText");//this will give me the value of the widget "confirmationText" from HTML
QString out1 = request.getParameter("confirmationForm");
}
In order to get value of a filed this is done in this way:
<input type="file" name="test"/>
request.getPatameter("test"); //all works ok
But for the first example (the one with textarea) I can't set it to send the value of textarea when button is pushed.
Can anyone give me some ides about how I can fix this? This frameworks know only to give me the value for a specific name. So, somehow I should set the value of the button with the value of the textarea when this is pushed.
Thank you.
The textarea needs to belong to the form you are submitting.
Since you have form="confirmationForm", it belongs to the form with id="confirmationForm" which doesn't exist.
Remove the form attribute from the <textarea> start tag.
Your form has name="confirmationForm". The name attribute served a similar purpose to the id attribute before HTML standardized on id for client-side references to elements when HTML 4 came out in the late 1990s.
Two decades later, there is no reason to give elements name attributes for client-side purposes.
(Giving form controls like <textarea> name attributes for the purposes of submitting data for server-side use is still correct).
I was always confused about what the 'name' attribute did in html forms. From the textbook I read (html and css, design and build webpages by John Duckett), this is what it said about the 'name' attribute.
When users enter information
into a form, the server needs to
know which form control each
piece of data was entered into.
(For example, in a login form, the
server needs to know what has
been entered as the username
and what has been given as the
password.) Therefore, each form
control requires a name attribute.
The value of this attribute
identifies the form control and is
sent along with the information
they enter to the server.
From reading this, I always thought that, say in the database there is a field called "theUsersPasswordField" and a field called "theUsersUsernameField". I thought that, suppose there is a registration form, then the form would be like:
<form action="aURL" method="post">
<p>Please enter what you want your Username to be:</p>
<input type="submit" name="theUsersUsernameField" />
<p>Please enter what you want your Password to be:</p>
<input type="password" name="theUsersPasswordField" />
</form>
and then this way, when the information is sent to the database, it will know which information to put in the 'theUsersPasswordField" and which information to put in the "theUsersUesrnameField". Am I wrong?
What does name="next" mean? I see it often when I look at html forms, for example, here in this Django tutorial I am doing:
<form method="post" action=".">
<p><label for="id_username">Username:</label></p>
<p><label for="id_password">Password:</label></p>
<input type="hidden" name="next" value="/" />
<input type="submit" value="login" />
</form>
In the tutorial I am doing, it says that
The html form contains a submit button and a hidden
field called next. This hidden variable contains a URL that tells the view where to
redirect the user after they have successfully logged in
now, how is 'next' a url? When I run the code, the form does in fact successfully redirect to the main page, but how does it know to redirect to the main page? Why does name='next'?
And how does the server know which information to treat as the username and which information to treat as the password? I though that that is what the 'name' attribute is used for?
The name attribute in a control element like input assigns a name to the control. It has two basic effects: 1) a control needs a name in order to be “successful”, which means that a name=value pair from it will be included into the form data when the form is submitted; and 2) the attribute specifies what will be included as the first part of the name=value pair.
It is entirely up to the server-side form handler what (if anything) it will do with the name=value pairs in the form data. They might have a simple correspondence in some database, but that’s just one possibility. And form handling need not be database-based at all.
The name attribute values have no predefined meaning in HTML. They are just strings selected for use in this context, and they may be descriptive or mnemonic, or they may not.
However, the choice of name attribute values may have side effects. Browsers may give the user a menu of previously entered data so that if you fill e.g. several forms (possibly in different sites) that have a control named email, you might be able to enter your email address just once and then accept whatever the browser suggests as input. This may be seen as a convenience or as a threat to data security. There is proposed set of “standard” names for many purposes in HTML5 CR.
For completeness, it needs to be added that in browser practice and according to HTML5 CR description of name, two names have a special meaning: _charset_ and isindex.
The name next is in no way special, but in this context, it appears to specify the next page to move to. It is defined for a hidden field, so it takes effect independently of user input.
and then this way, when the information is sent to the database, it will know which information to put in the 'theUsersPasswordField" and which information to put in the "theUsersUesrnameField". Am I wrong?
You have to write a script (for example in php) that will put the right values from your form (they are in the $_POST array) into the databse.
in your example $_POST['theUsersUsernameField'] will hold the username
<form method="post" action=".">
<p><label for="id_username">Username:</label></p>
<p><label for="id_password">Password:</label></p>
<input type="hidden" name="next" value="/" />
<input type="submit" value="login" />
</form>
how is 'next' a url?
next is not the url.
the action="." is the url to wich the form redirects.
/ is the value that the script will evaluate to see what it has to do. (Normally you will have to change this into something else like 'check password')
In the $_POST[] array there will be a key $_POST['next'] and the value will be /
I am not familiar with Django but I hope this helps
I have a HTML form as follows:
<form action="/AddFile" method="post">
<input type="file" name="filedata"/>
<input type="submit" value="Add File"/>
</form>
When I use it and submit a file called foo with content bar the POST request contains filedata=foo not filedata=bar as expected.
What am I doing wrong? How do I get the content of the file?
One you need to add enctype="multipart/form-data" to the form.
Two you need to get the files from $_FILES instead.
Three I think it's file_get_contents($_FILES['filedata']['tmp_name']); to get the file's contents.
Your markup lacks the attribute enctype="multipart/form-data", which is needed when a file field is present. See HTML 4.01 spec on form element.
Using multipart/form-data, the file contents get sent. The rest depends on your server-side handler.
I am wanting to create a page that can load a property file into a text box, edit the properties, and then save the new properties to the file.
Would this be possible by simply using HTML markup? How do I get the push buttons to correlate with my Grails application?
The HTML seems simple enough:
<p>
Select property file:
<input type="file" name"propertyList" size="50"/>
</p>
<p>
<input type="submit" value="Open File"/>
<input type="submit" value="Save File"/>
</p>
<p>
<input type="text" name="properties" size="300"/>
</p>
I'm not quite sure about the submit button as I don't know a whole lot of HTML.
My goal is to simply locate the property file, use groovy to open it and read it line by line and display it in the text box, then be able to edit the properties and save it.
My biggest question deals with the buttons. How do I have the Open File use the button event (onclick) to activate a function I have written in groovy? Or instead of a submit button, what type of input should I use?
Any information leading me in the right direction would be appreciated
EDIT
Is it correct to do something like the following:
<input type="button" onclick="<g:link action="readFile" controller="propertyRead">Open File</g:link>"/>
If not, what would be the proper way to go about it?
EDIT 2
I looked into actionSubmit and also looked a bit more into g:link and was wondering which way (if either) is the better way to go:
actionSubmit (unsure if it allows one to specify the controller as it wasn't stated in the attributes):
<g:actionSubmit value="Open File" action="readFile" controller="propertyRead"</g:actionSubmit>
Or using a menuButton and g:link
g:link:
<span class="menuButton"><g:link action="readFile" controller="propertyRead">Open File</g:link>
Also forgot to ask, is there a way to get the file path from the input type="file" ?
In order to make full use of Grails functionality, you'll probably want to use the associated HTML tags - form (or uploadForm for a form that's uploading the file) and actionSubmit. Grails doesn't offer a custom file input for reasons which I don't remember, so you'll need to use the <input type="file" ...> as shown in your example.
Ok I really didn't know how else to sum it up for the title. I need to create a form where a user can specify an existing file, but I don't need to upload it (it's on a shared server already accessible) -- I just need to grab the filename and save it in the database so it's linked to other data.
I thought about the input tag as it provides a convenient already done interface to the user's filesystem, but I don't know if it's possible to use it without the acutal upload (leaving out enctype="multipart/form-data" doesn't seem to work). Can I tweak this to make it work, or is there any way to do it other than writing a custom mini file browser?
EDIT: I need the full path name of the file, asking the users to enter it is out of the question...
You could place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>