Add frontend browse excel file

This commit is contained in:
Hou Samnang 2021-03-27 12:20:52 +07:00
parent 74a5e57f15
commit 36979b0ae1
3 changed files with 69 additions and 5 deletions

View File

@ -5,7 +5,7 @@
"main": "index.js",
"scripts": {
"test": "jest",
"start": "node src/index.js"
"start": "nodemon src/index.js"
},
"repository": {
"type": "git",
@ -25,7 +25,10 @@
},
"homepage": "https://github.com/CUBETIQ/data-migration-nodejs#readme",
"dependencies": {
"express": "^4.17.1",
"jest": "^26.6.3",
"multer": "^1.4.2",
"nodemon": "^2.0.7",
"read-excel-file": "^5.0.0",
"xlsx": "^0.16.9"
}

View File

@ -1,3 +1,4 @@
const express = require('express')
// const file = require('fs')
// file.readFile('./data/people.csv', 'utf-8', (err, data) => {
@ -14,8 +15,34 @@
// });
// var XLSX = require('xlsx')
// var workbook = XLSX.readFile('./data/Sanagro Product and Catagory list.xlsx');
// var xlData = XLSX.utils.sheet_to_json(workbook.Sheets['Sheet1']);
// var data = xlData.map((row) => ({ id: row.No, name: row['Product name'] }))
var app = express();
app.get('/', function (req, res) {
res.sendFile('/upload.html', { root: __dirname })
});
let port = 4000
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
var multer = require('multer');
var upload = multer();
var XLSX = require('xlsx')
var workbook = XLSX.readFile('./data/Sanagro Product and Catagory list.xlsx');
var xlData = XLSX.utils.sheet_to_json(workbook.Sheets['Sheet1']);
var data = xlData.map((row) => ({ id: row.No, name: row['Product name'] }))
console.log(data);
app.use(upload.none());
app.post('/upload', async function (req, res) {
let input = req.body.myFile;
let wb = XLSX.read(input, {type : 'binary'});
let xlData = XLSX.utils.sheet_to_json(wb.Sheets['Sheet1']);
let data = xlData.map((row) => ({ id: row.No, name: row['Product name'] }))
res.send(data)
console.log('dawdaw', data)
})

34
src/upload.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<body>
<p>Click on the "Choose File" button to upload a file:</p>
<form onsubmit="event.preventDefault();upload(event);">
<input type="file" id="myFile" name="myFile" />
<input type="submit" />
<br /><br /><br /><br />
<textarea id="result"l style="width:100%" rows="5"></textarea>
</form>
<script>
function upload(event) {
let file = document.getElementById("myFile").files[0];
let formData= new FormData()
const reader = new FileReader()
reader.onload = async (e)=>{
console.log(e.target.result)
formData.append("myFile", e.target.result)
const res = await fetch("/upload", {
method: "POST",
body: formData,
});
const json = await res.json()
document.getElementById('result').value = JSON.stringify(json)
}
reader.readAsBinaryString(file)
}
</script>
</body>
</html>