HTML form - multipart/form-data - html

I'm trying to create a HTML form to upload an image with encoding type - multipart/form-data.
I've been instruted to use an 'Origin' header with the value
'https://some-url.com' and a 'Host' header with the value 'image-upload.amazonaws.com'
But I can figure out where to specify the'Origin' header.
My HTML looks this this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>upload image file</title>
</head>
<body>
<form action="image-upload.amazonaws.com" method="post" enctype="multipart/form-data">
<p><input type="text" name="key" value="async_uploads/123456789-987654321">
<p><input type="text" name="success_action_status" value="201">
<p><input type="text" name="policy" value="sdfghjsdfg8sdfgshdfgjksg=">
<p><input type="text" name="x-amz-credential" value="DSFGHJSDFGH?878dfg78">
<p><input type="text" name="x-amz-algorithm" value="AWS4-HMAC-SHA256">
<p><input type="text" name="x-amz-date" value="20180620T022620Z">
<p><input type="text" name="x-amz-signature" value="sdg678sdfg7h34">
<p><input type="file" name="myimage.png">
<p><button type="submit">Submit</button>
</form>
</body>
</html>
Can anyone help me?
Thanks in advance...

Host - the domain name where the request is being sent to.
Origin - shows the domain/Url from where the request was initiated(or originated)
https://www.codeproject.com/Articles/185506/AJAX-Cross-Origin-HTTP-request.
This Wiki page shows the list of all header fields
So, you need to include the Origin in the request header. See this example, https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin.
Hope this helps,

Related

Extract form value from HTML and send it with HTML form POST

First, I am trying to extract the username that is stored in the page source when the different user loads the page that contains the below book now button. So username changes for each user. Second, when the book now is pressed I want to send that username as the corresponding value to name="user[name]".
I can successfully extract the username that is loaded in the page source but having trouble to send it as a variable username value through the html post method.
I know I am doing something or everything wrong :) so any help is much appreciated.
Best.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Input Text value Property
</title>
</head>
<body style="text-align:center;">
<h2>Extracted User</h2>
<input type="text" name="Username" id="Username" autocomplete="off" value="yardicafe+emaartest#gmail.com" style="display:none;">
<p id="username"></p>
<!-- Script to return the Input Text value Property-->
<script>
let txt = document.getElementById("Username").value;
document.getElementById("username").innerHTML = txt;
</script>
<form method="post" action="https://www.supersaas.com/api/users">
<input type="hidden" name="account" value="vavevu"/>
<input type="hidden" name="id" value="1234fk"/> <!-- The user has ID 1234 on your server's database -->
<input type="text" name="user[name]" value="??????"/>
<input type="hidden" name="user[full_name]" value=""/>
<input type="hidden" name="user[email]" value="yardicafe+emaartest#gmail.com"/>
<input type="hidden" name="user[phone]" value=""/>
<input type="hidden" name="user[address]" value=""/>
<!-- you can add and remove fields on the "Access Control" screen -->
<input type="hidden" name="checksum" value="d14c0e6398ef11a9a34cf513060e45a8"/>
<input type="hidden" name="after" value="Scuba_Dalis"/>
<input type="submit" value="Book now"/>
</form>
</body>
</html>

Thymeleaf path variable is not working. What am I doing wrong?

Something is keeping me from setting a path variable with Thymeleaf and HTML in an HTML Form.
I want to simply enter 33 into a form and get localhost:8080/blog/33 for a url, but I can only get a query string or malformed brackets and etc.
some example attempts and results:
th:action="#{/blog/{id}(id = ${id})}"
localhost:8080/blog/?id=33
th:action="#{/blog/+ ${id}}"
localhost:8080/blog/+%20$%7Bid%7D?id=33
what I want is:
localhost:8080/blog/33
the whole code for this form is below:
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Form Submission</title>
<style>
button{
margin-top:20px;
width: 250px;
}
</style>
</head>
<body>
<h2>Delete Entry</h2>
<form action="#" th:action="#{/blog/{id}(id = ${id})}" th:object="${blog}" method="get" >
<fieldset>
<p>Delete ID: <input type="text" th:field="*{id}" required /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</fieldset>
</form>
<button onclick="window.location.href = '/'">Menu</button>
</body>
</html>
This syntax is correct: #{/blog/{id}(id = ${id})}.
The reason you are getting localhost:8080/blog/?id=33 is probably because ${id} is empty when the form is created, and when you click the submit button, it is adding ?id=33 to the url (because the method is get and you have an input with the same name="id": <input type="text" th:field="*{id}" required />.
There is no html/thymeleaf way (without javascript) to get a form field into the path part of a URL (if that is what you're expecting). You'll have to use a javascript library if you want that to happen.

HTML Get Input Value

I am trying to make a link, and place a variable in the URL like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Main Page
<input type="color" id="colorPicker" value="#808080">
</body>
<html>
I am trying to send the user to index.html?color=VALUE GOES HERE. Instead of VALUE GOES HERE, I would like the current color input value.
You may use forms ,
The method attribute specifies how to send form-data (the form-data is
sent to the page specified in the action attribute).
The form-data can be sent as URL variables (with method="get")
<form action="index.html" method="get">
<input type="color" name="color" value="#808080">
<input type="submit" value="Submit">
</form>
The only way that I can think to do this is with JavaScript, so sorry if this is not what you are looking for:
function urlUpdate(hex) {
document.getElementById("link").href = "index.html?color=" + hex;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a id='link' href="index.html?color=">Main Page</a>
<input type="color" id="colorPicker" value="#808080" onchange="urlUpdate(value)">
</body>
<html>

formnovalidate doesn't work with IE10 and type=image

i'm trying to avoid the validation in a input of type image but with IE10 seems that doesn't work if the input is a image type.
Someone know a solution to avoid the validation or similar? Thanks in advance.
Here the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="demo.asp" method="post">
E-mail: <input type="email" name="userid" required>
<input type="submit">
<input type="submit" formnovalidate value="submit as admin">
<input type="image" formnovalidate value="no validation">
</form>
</body>
</html>
I know it is an older question but you could add the following function:
handleSubmit(element) {
var form = document.forms[0] ;
form.noValidate = !!element.formnovalidate ;
return true;
}
then attach the function to the submit buttons with handleSubmit(this)

Why is my HTML 5 localstorage not working?

I have created a simple html page to test the localstorage and for the life of me i cant get it to work, even though my firebug shows that the localstorage stored value as the one that i am storing here is my code for the first html page called Testhtml.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEsthtml.html</title>
</head>
<script >
function save()
{
var passvalue = document.getElementById('entry_1').value;
localStorage.setItem('passingvalue', passvalue);
}
</script>
<body>
<form action="simple.html" method="POST">
<label for="entry_0">Type ur name</label>
<input type="text" name="entry.0.single" value="" id="entry_0">
<br>
<label for="entry_1">ur pets name
</label>
<label for="entry_1">type something</label>
<input type="text" name="entry.1.single" value="" id="entry_1">
<br>
<input type="submit" name="submit" id="submit" onClick="save()" value="Submit">
</form>
</body>
</html>
Second form called the simple.html code is as follows
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple HTML</title>
<script >
function load()
{
var storedvalue = localstorage.getItem('passingvalue');
if(storedvalue)
{
document.getElementById('tb1').value=storedValue;
}
}
</script>
</head>
<body onload="load()" >
<input id="tb1" name="tb1" type="text"/>
<input type="submit" name="submit" id="submit" onClick="load()" value="Submit">
</body>
</html>
I try to run this code the simple.html which is the second form in the only textbox that is there it is not displaying anything..tried so many different things!!
It's just typographical errors in Simple.html on lines 8 and 9; 'localstorage' should be 'localStorage' and 'storedvalue' should be 'storedValue'.
You should look into your browsers error reporting and developer tools, they would have helped you solve this problem on your own. I personally prefer to develop on Google Chrome because of the fast, simple, and easy-to-use debug tools (if you use chrome, just press Ctrl+Shift+J).
simple.html's code is the same as testhtml.html . Did you post wrong code?
a simple tutorial for localStorage:
http://www.w3schools.com/html5/html5_webstorage.asp