@atumbochka

Что делать, если при обновлении страницы пропадают загруженные файлы?

Есть следующий код:
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-код. Но если обновить страницу, то плитки исчезнут, и нужно загружать заново. Как можно это исправить?
  • Вопрос задан
  • 106 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы