Sidebar

Extracting Form Fields from multipart/form-data requests

0 votes
165 views
asked May 10 by rich-c-2789 (17,490 points)
I want to write an HTML form and submit it to a QIE Channel. Can you show me how to access the fields of a HTML form?

1 Answer

0 votes

If you setup an HTTP Listner source node using localhost and port 8084 as an example, then given this form:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test API Form</title>
</head>
<body>
<h1>Test API Form</h1>
<form action="http://localhost:8084/your-endpoint" method="POST" enctype="multipart/form-data">
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" required>
    <br>
    <label for="name">Quantity:</label>
    <input type="number" id="quantity" name="quantity" min="1" max="100" step="1" required>
    <br>
    <label for="description">Description:</label>
    <textarea name="description" id="description" rows="5" cols="30"></textarea>
    <br>
    <label for="imagefile">File:</label>
    <input type="file" name="imagefile" id="imagefile" required>
    <br>
    <label for="textfile">File:</label>
    <input type="file" name="textfile" id="textfile" required>
    <br>
    <button type="submit">Submit</button>
</form>
</body>
</html>

You can access the name, quntity, and description fields in using the following code:

// Get the value from the name content tag
var name = source.getNode("//Part[content-disposition[contains(., 'name=\"name\"')]]/Content");
qie.info("Name: " + name);

// Get the value from the quantity content tag
var quantity = source.getNode("//Part[content-disposition[contains(., 'name=\"quantity\"')]]/Content");
qie.info("Quantity: " + quantity);

// Get the value from the description content tag
var description = source.getNode("//Part[content-disposition[contains(., 'name=\"description\"')]]/Content");
qie.info("Description: " + description);

We used Xpath to access the parts in the request xml that matches each field by the name attribute. The code above also just logs the values. Change the code to use the values as needed. For submitting files using a file field (type="file") see the additional questions below.

See also:

Extracting Base64 Encoded Text File from File Field in multipart/form-data requests

Extracting Base64 Encoded Binary File from File Field in multipart/form-data requests

Handling HTTP requests and responses

Processing Requests in mapping nodes via HTTP Listener source node

 

answered May 10 by rich-c-2789 (17,490 points)
edited May 16 by rich-c-2789
...