Backgroud
Currently I am trying to connect my upload document form to my Kaleido document storage. My goal is to be able to send a PDF to my document storage and then return the hash to the front end and display it.
At the moment I have created a very simple front end and I have written some JS to handle the post part of the document upload. When I test uploading a sample PDF to my form, I get the error message “Upload failed: Network response was not ok Internal Server Error”, so I know I am at least trying to contact the API in a way. The problem I seem to be running into is my authorization to get into the Kaleido document storage. When I follow the link to my document storage API endpoint, I am prompted with entering in my username and password but when I correctly put it in and press login it just keeps prompting me to enter my credentials.
Also I have put my credentials into the envvars of the server I am running this on(KALEIDO_USERNAME and KALEIDO_PASSWORD) and just simply put in my email and my password I used to sign up for Kaleido. I’m not too sure if I need to use my personal Admin API key for my Authorization.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="uploadForm" class="upload-form">
<h2>Upload Form</h2>
<input type="text" name="name" placeholder="Name">
<input type="file" name="document">
<button type="submit">Upload</button>
</form>
<script src="script.js"></script>
</body>
</html>
Event Listener Script
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(this);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(data => {
console.log(data);
//Success
alert('File uploaded successfully!');
})
.catch(error => {
console.error('Error:', error);
//Fail
alert('Upload failed: ' + error.message);
});
});
Server Code
const express = require('express');
const multer = require('multer');
const fetch = require('node-fetch');
const fs = require('fs');
require('dotenv').config();
const app = express();
app.use(express.static(__dirname));
const upload = multer({ dest: 'uploads/' }); // Files will be temporarily stored in 'uploads' folder
app.get('/', (req, res) => {
res.sendFile('./main.html', { root: __dirname });
});
app.post('/upload', upload.single('document'), async (req, res) => {
const { originalname, path: tempPath } = req.file;
const { name } = req.body;
const auth = Buffer.from(`${process.env.KALEIDO_USERNAME}:${process.env.KALEIDO_PASSWORD}`).toString('base64');
try {
// Read the file from the temporary path
const fileData = fs.readFileSync(tempPath);
const kaleidoResponse = await fetch('MY_DOCUMENT_API_ENDPOINT_URL', {
method: 'POST',
headers: {
'Authorization': `Basic ${auth}`,
},
body: JSON.stringify({
name: name, // Use the file name input from the form
file: fileData, // Send the file data
}),
});
// Remove the file from the temporary storage
fs.unlinkSync(tempPath);
if (!kaleidoResponse.ok) throw new Error(`Kaleido responded with status: ${kaleidoResponse.status}`);
const kaleidoData = await kaleidoResponse.json();
res.json(kaleidoData);
} catch (error) {
console.error('Upload failed:', error);
res.status(500).json({ error: 'Internal Server Error' });
}
});
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));
Any help would be greatly appreciated or any insight on how to improve or make this type of thing better fell free to recommend anything.
