The client part of our server can be implemented in different languages and with different technologies that support the HTTP protocol. The most straightforward implementation of the client application can be written with HTML and Javascript. We can use such a client with any modern browser.
There will be two files in our client application. The first one will be the index.html file, which should contain the definition of a simple web page with a form for uploading files. The following code shows how we can write this file:
<html lang="en">
<head>
<title>Upload Files</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<input type="file" name="files[]" multiple>
<input type="submit" value="Upload File" name="submit">
</form>
<script src="upload.js"></script>
</body>
</html>
The form is a standard HTML element with two fields inside it. The first field is a standard input element for file selection, while the second is a standard input element for form data submission.
The second file is a JavaScript implementation of the HTML form event handler. The following snippet represents the upload.js file's implementation:
const url = 'http://localhost:8080/imgclassify';
const form = document.querySelector('form');
form.addEventListener('submit', e => {
e.preventDefault();
const files = document.querySelector('[type=file]').files;
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
let file = files[i];
formData.append('files[]', file);
}
fetch(url, {
method: 'POST',
body: formData
}).then(response => {
console.log(response);
if (response.ok) {
let text = response.text();
text.then(data=>{
alert(data)});
} else {
alert("Error :" + response.status);
}
});
});
In this implementation, we got the form element object from the HTML document with the document.querySelector('form').files call. Then, we added an event listener for the submit event using the addEventListener() method. The submit event occurs when a user presses the submit button. Regarding the event listener's implementation, we did the following:
- First, we got the list of files our user selected for submission with the following code:
document.querySelector('[type=file]').files
- Then, we created the FormData object.
- Next, we populated the form data object with files data by sequentially calling the append() method by passing the file object to it.
- Finally, we used the formData object to send a request to the server using the fetch() method.
The fetch() method returned the promise object, which belongs to the asynchronous API, so we used the then() method to define the code that will run after the client receives a response. In the response handler, we checked the error status with the ok field of the response object. In the case of an error, we show the alert message with an error status code. In the case of a successful response, we gather the text data from the response object. Note that this operation is performed asynchronously. When the text data is ready, our handler will show it in the alert window.
Now that we have the server and client parts of our service, we recommend that you test them in your local development environment. After doing this, we can compile the server part and start it locally. Here, the path to the folder that contains the client source code should be passed as a command-line parameter. Then, we can test our service by opening the http://localhost:8080 URL in a browser.
Now, we'll learn how to deploy this service to the server.