Есть следующий код:
const fileComponent = document.querySelector('.file-upload')
const fileControl = document.querySelector('.file-upload__control')
const content = document.querySelector('.content')
const files = document.querySelector(".files")
fileComponent.addEventListener('click', function(event) {
console.log(event);
fileControl.dispatchEvent(new MouseEvent('click'))
})
let array = []
const input = document.querySelector(".input")
const button = document.querySelector(".button")
fileControl.addEventListener('change', async function(event){
const target = event.target
const uploadFile = target.files[0];
console.log(uploadFile)
const formData = new FormData()
formData.append('upload', uploadFile)
const response = await fetch('upload', {
method: 'POST',
body: formData
})
const data = await response.json();
console.log(data)
console.log(data.id);
array.push(data.id)
const newDiv = document.createElement("div")
newDiv.className = "newDiv"
newDiv.id = data.id
const link = document.createElement('a');
link.href = '/file/' + data.id;
link.textContent = uploadFile.name
link.id = "link"
console.log(link.id)
const qr = document.createElement("button")
qr.textContent = "+"
qr.className = data.id
qr.id = "qrPicture"
const deleteFile = document.createElement("button")
deleteFile.textContent = "Удалить"
deleteFile.className = "delete"
const massiv = []
qr.onclick = () => {
let counter = 0
for (let i = 0; i < massiv.length; i++) {
if (massiv[i]._htOption.text == ("http://localhost:3000/" + qr.id)) counter++
}
if (!counter) {
let qrcode = new QRCode(document.querySelector(".qrcode"), {
text: "http://localhost:3000/" + qr.id,
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
})
massiv.push(qrcode)
}
}
deleteFile.onclick = () => {
document.getElementById(data.id).remove()
}
newDiv.appendChild(link)
newDiv.appendChild(qr)
newDiv.appendChild(deleteFile)
files.appendChild(newDiv)
})
А также на сервере:
const express = require('express')
const nanoId = require('nano-id')
const multer = require('multer')
const fs = require ('fs')
const path = require("path")
const app = express()
const port = 3000
app.use(express.static('public'))
const storage = multer.diskStorage({
destination: function (req, file, cb) {
const id = nanoId(13)
const folder = `./uploads/${id}`
fs.mkdirSync(folder, {recursive: true})
fs.writeFileSync(folder + '/index.json', JSON.stringify({
file:file.originalname
}))
req.fileUploadId = id;
cb(null,folder)
},
filename: function (req, file, cb) {
console.log(file)
req.fileUploadName = file.originalname;
cb(null, file.originalname)
}
});
const upload = multer({ storage: storage });
app.get('/file/:id', (req, res) => {
const id = req.params.id
const json = fs.readFileSync('./uploads/' + id + '/index.json')
const fileName = JSON.parse(json).file
res.sendFile('./uploads/' + id + '/' + fileName, { root: __dirname })
})
app.post('/upload', upload.single('upload'), (req, res) => {
console.log('upload');
res.setHeader("Access-Control-Allow-Origin", "*")
res.send(JSON.stringify({id: req.fileUploadId,name: req.fileUploadName }));//getting file name in context
})
app.get("/settings", (req, res) => {
res.sendFile(path.join(__dirname, "public", "settings.html"))
})
app.get("/aboutUs", (req, res) => {
res.sendFile(path.join(__dirname, "public", "aboutUs.html"))
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
Это отвечает за загрузку файлов на страницу, появляются плитки, на которые можно нажать и посмотреть файл, а также удалить или создать QR-код. Но если обновить страницу, то плитки исчезнут, и нужно загружать заново. Как можно это исправить?
Простой
