Welcome to the Simple File Upload Node Uploader documentation. This documentation provides guidance on how to add the Simple File Upload Node Uploader to your projects. Let's get started!
First, ensure your system’s Node and NPM installations are up-to-date.
Then, in your terminal, create a new directory for your Simple File Upload integration.
mkdir simple-file-upload
cd simple-file-upload
Initialize a new Node.js project:
npm init -y
Create a new file named `upload.html` in the project directory:
<!DOCTYPE html>
<html>
<head>
<title>Simple File Upload</title>
<script src="https://simplefileupload.com/js/file-upload.js"></script>
</head>
<body>
<h1>Upload a File</h1>
<div
class="simple-file-upload"
data-api-key="YOUR_API_KEY">
</div>
<script>
// Listen for file upload completion
document.addEventListener("fileUploaded", function (e) {
const uploadedFileUrl = e.detail.fileUrl;
console.log('Uploaded file URL:', uploadedFileUrl);
// Send the URL to your backend
fetch('/save-file-url', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ url: uploadedFileUrl }),
})
.then(response => response.json())
.then(data => console.log('File URL saved:', data));
});
</script>
</body>
</html>
Replace `YOUR_API_KEY` with your API key from Simple File Upload.
Create a new file named `server.js` in the project directory:
const express = require('express');
const path = require('path');
const app = express();
// Middleware to parse JSON
app.use(express.json());
// Serve the uploader HTML file
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'upload.html'));
});
// Handle the file URL received from the widget
app.post('/save-file-url', (req, res) => {
const fileUrl = req.body.url;
console.log('Received file URL:', fileUrl);
// Process or save the file URL as needed
res.send({ success: true, message: 'File URL saved!' });
});
// Start the Express server
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}`);
});
Start the server:
node server.js
Open your browser and go to http://localhost:3000.
Use the uploader to upload a file.
Confirm the file URL is logged into your terminal from `console.log in server.js`.
Optionally, save the URL to a database or display it on a page.