how do I make a field that the client can send images to the database as if it were text?
<label for="email"><b>name</b></label>
<input type="text" placeholder="Enter Name" name="email" id="name" requir#the code to input text
but there is a similar way to input images?
A file input element will allow a file (including an image file) to be submitted in an HTTP request.
The form element will need to be configured to encode data in the multipart/form-data format.
<form action="example" method="POST" enctype="multipart/form-data">
<label for="file">Select image</label>
<input type="file" id="file" name="file">
<button>Submit</button>
</form>
How you handle this on the server will depend on the server-side language you are using.
As a rule of thumb, binary data like images are generally best stored on a file system or on a service like Amazon S3 and not placed directly in the database.
Related
I'm trying to achieve below result using simple HTML form:
{"name": "Abc","email": "abc#abc.org", "message":"msg"}
HTML code:
<form name = "myform" action="URL" method="POST" enctype="application/json">
<input type="hidden" name="name" value="Abc">
<input type="hidden" name="email" value="Abc#abc.org">
<input type="hidden" name="message" value="msg">
<input type ="submit" value="Submit">
</form>
But this doesn't work. Someone suggested to use below and it worked but not sure how it is encoding data into JSON format.
<form name = "myform" action="URL" method="POST" enctype="text/plain">
<input type="hidden" name='{"name":"Abc","email":"abc#abc.org","message":"'value='msg"}'>
<input type="submit" value="Submit">
</form>
Can someone please explain how the above works? Thanks in Advance.
The enctype attribute simply has no option to encode as JSON.
There was a proposal to add support, but it was abandoned.
text/plain encodes the data in a plain text format which is not reliably machine parsable (e.g. you can't distinguish between a new line as data and a new line as a record separator). You should never use it in production. It was designed as a debugging tool but, frankly, having software that can display parsed application/x-www-form-urlencoded data is more useful for that.
The code you have "works" because the plain text format just concatenates the names and values, one per line, and you have half a JSON text in the name and the other half in the value.
It's very fragile, and would be more so if the user was inputting any data themselves.
So I have a form in HTML which submits the content of 2 inputs to an external website. What I am trying to achieve is get the value of the input from a text file. Is that possible? If so, how can I do it?
<form action="http://blockbench.net/web/index.php" method="POST">
<input type="text" name="model" value="I want this value to be gotten from a text file I have in the directory of my website">
<input type="text" name="textures" value="">
<button type="submit">Submit</button>
</form>
You have two possibilities to do this: server side (which I'd recommend) or client side.
Server side:
Depending on what language you have available on your server, you can have the file content served as part of the HTML. For PHP for instance:
<form action="http://blockbench.net/web/index.php" method="POST">
<input type="text" name="model" value="<?php echo file_get_contents('some_file_on_server.txt'); ?>">
<input type="text" name="textures" value="">
<button type="submit">Submit</button>
</form>
Client side:
Alternatively, if the file you want to read is publicly available on the same web server, you can have the browser request it via JavaScript and fill in the data.
<form action="http://blockbench.net/web/index.php" method="POST">
<input type="text" name="model" value="">
<input type="text" name="textures" value="">
<button type="submit">Submit</button>
</form>
<script>
fetch('http://your-server/some_file.txt')
.then(response => response.text())
.then(text => document.querySelector('[name="model"]').value = text)
</script>
I recommend going for the server side way, because the text from the file will be immediately available as the HTML arrives in the browser while the client side solution will take some time (or may even fail) to download the text from the server and fill it into the input element.
Input type file doesn't work with android 4.4 (kitkat).
Is there a way to use form submit with input type="file" with phonegap in android 4.4. My form looks like:
<form id="testFrm" method="POST" enctype="multipart/form-data" >
<input type="text" id="sub" name="subject" placeholder="Subject" />
<input type="text" id="desc" name="desc" placeholder="Description" />
<input type="file" name="file" id="file" />
<input type="submit" />
</form>
I'm on cordova 2.8
Seems you want to use the PhoneGap FileTransfer method which according to the docs "The FileTransfer object allows you to upload or download files to and from a server." which is exactly what you need. There is a code example there that should get you started.
UPDATE (by request from your comment):
One form is not really designed to "include" another form however any of the fields that are included inside the "form" tag will be transmitted with the submit to the server (in the form of "Name1=value1&Name2=value2&",etc) so instead of having two forms you can just have multiple fields under one form tag.
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>
I'm playing with a new service's very simple API and I'm just curious if its possible to send an xml-rpc request directly from an html form. The api request example is this:
<?xml version="1.0"?>
<methodCall>
<methodName>send</methodName>
<params>
<param><value><string>YOUR_API_KEY</string></value></param>
<param><value><string>msg#mycompany.com</string></value></param>
<param><value><string>5551231234</string></value></param>
<param><value><string>Test Message from PENNY SMS</string></value></param>
</params>
</methodCall>
And my current form iteration is this:
<form method="POST" enctype="text/xml" action="http://api.pennysms.com/xmlrpc">
<input type="hidden" name="api_key" value="MYAPIKEY"/>
<label for="from">From</label>
<input type="input" name="from" value=""/>
<label for="phone">Phone</label>
<input type="input" name="phone" value=""/>
<label for="text">Text message</label>
<input type="input" name="text" value="">
<input type="submit" value="Send"/>
</form>
Not without involving either Javascript or server code. The "enc-type" attribute specifies the format that the form data is sent to the server in, and unfortunately "xml-rpc" isn't in the list of accepted formats :)
No, this is not possible from plain HTML. The only standard encodings for submitting form data are application/x-www-form-urlencoded and multipart/form-data.
You can do this from JavaScript using an XMLHTTPRequest, though only to APIs on the same domain that the HTML came from. After a quick Google search, I found this AJAX XML-RPC client, though I've never used it so I can't vouch for it.
That might depend if the server is actually enforcing the enctype
For example using the technique shown here http://pentestmonkey.net/blog/csrf-xml-post-request you can do cross-site posts of XML POST data.