What am I supposed to send as the request body. I keep getting 400 Bad request. I have tried it on Postman as well as in a html file with javascript code in the script tag.
What does it mean by the file's bytes? A file as a byte array?
I also tried using postman with a key (type: file) and a file. Got BAD_REQUEST
I tried creating Blobs and converted them into byte array, append those arrays into formdata and then provide them as request body using JSON.stringify().
The current code however takes a file input from a form html tag.
Nothing seems to be working.
Also how do I write a curl command for this POST method. And how to get a document's metadata.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" enctype="multipart/form-data" id="FORM">
<div>
<label for="">File Name:</label>
<input type="text" id="FileName">
<label for="">File:</label>
<input type="file" id="File">
<button type="submit" style="" id="submitB">Submit</button>
</div>
</form>
</body>
<script>
const formData = new FormData();
const formDataTwo = new FormData();
const formDataThree = new FormData();
const fileOne = new Blob(["John","117"],{type:'text/html'});
const fileTwo = new Blob(["Commander", "Zavala"], { type: 'text/html' });
const fileThree = new Blob(["Ikora", "Rey"], { type: 'text/html' });
var reader = new FileReader();
reader.readAsArrayBuffer(fileOne);
var byteOne = [];
reader.onloadend = function(e){
if(e.target.readyState == FileReader.DONE){
var arrayBuffer = e.target.result;
array = new Uint8Array(arrayBuffer);
}
for(var i=0; i<array.length;i++){
byteOne.push(array[i]);
}
}
var readerOne = new FileReader();
readerOne.readAsArrayBuffer(fileTwo)
var byteTwo = [];
readerOne.onloadend = function (e) {
if (e.target.readyState == FileReader.DONE) {
var arrayBuffer = e.target.result;
array = new Uint8Array(arrayBuffer);
}
for (var i = 0; i < array.length; i++) {
byteTwo.push(array[i]);
}
}
var form = document.getElementById('FORM')
form.onsubmit = async (e) =>{
e.preventDefault()
const form = e.currentTarget;
var readerTwo = new FileReader();
readerTwo.readAsArrayBuffer(document.getElementById('File').files[0]);
let byteThree = [];
const formDataNew = new FormData();
readerTwo.onloadend = function (e) {
if (e.target.readyState == FileReader.DONE) {
var arrayBuffer = e.target.result;
array = new Uint8Array(arrayBuffer);
}
for (var i = 0; i < array.length; i++) {
byteThree.push(array[i]);
}
formDataNew.append('additionalProp1', byteThree)
}
const obj = {
additionalProp1: formDataNew
}
fetch('http://localhost:8080/o/headless-delivery/v1.0/sites/20121/documents', {
method: "POST",
headers: {
"Content-Type": "multipart/form-data",
"Authorization": `Basic ${btoa('test@oscorp.com:learn')}`
},
body: JSON.stringify(obj)
})
.then(Response => Response.json())
.then(json => console.log(json));
}
// formData.append('fileOne', byteOne);
// formDataTwo.append('fileTwo', byteTwo);
// formDataThree.append('fileThree', byteThree);
</script>
</html>
The Postman api request worked after I modified the key name as instructed. But the html page still won't work. I keep getting Error code 400. My current js code is below. Also find the working Postman request screenshots below.
var form = document.getElementById('FORM')
form.onsubmit = async (e) =>{
e.preventDefault()
const file = document.querySelector("input[type=file]").files[0];
const metadata = {additionalProp1: "string" };
const body = new FormData();
body.append("file", file);
body.append("document", JSON.stringify(metadata));
fetch("http://localhost:8080/o/headless-delivery/v1.0/sites/20121/documents", {
method: "POST",
headers: {
"Content-Type": "multipart/form-data",
"Authorization": `Basic ${btoa('test@oscorp.com:learn')}`
},
body
})
.then(Response => Response.json())
.then(json => console.log(json))
}
