@atumbochka

Почему не работает multiple у input?

<div class="main">
            <article class="content">
                <div class="file-upload">
                    <input class="file-upload__control" type="file" multiple>
                    <div class="file-upload__overlay">Download</div>
                    </div>
                </div>
                <div class="files" id="#files"></div>
            </article>
            <div class="qrcode"></div>
        </div>
        <div class="footer"></div>

Здесь у input-а не работает multiple, также пробовал multiple="multiple", но ничего не происходит. Проект работает так, что при загрузке файла, он отображается в виде плитки. При попытке выбора хотя бы двух файлов загружается только последний выбранный, это даже отображается в консоли, если запросить вывод файла после загрузки: появляется только один.
Возможно, с сервером что-то не так, он работает следующим образом:
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 bodyParser = require("body-parser")

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

app.use(express.static('public'))

const storage = multer.diskStorage({
  destination(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(req, file, cb) {
    req.fileUploadName = file.originalname
    cb(null, file.originalname)
  }
});

const upload = multer({storage: storage});

app.post("/test", (req, res) => {
  res.setHeader("Content-Type", "application/json")

  const files = fs.readdirSync(path.join(__dirname, "uploads", req.body.id))
  files.forEach(file => {
    fs.unlinkSync(path.join(__dirname, "uploads", req.body.id, file))
  })

  fs.rmdirSync(path.join(__dirname, "uploads", req.body.id))
})

app.get("/data", (req, res) => {
  const files = fs.readdirSync(path.join(__dirname, "uploads"))
  const array = []

  files.forEach(file => {
    const eachElement = fs.readdirSync(path.join(__dirname, "uploads", file))
    array.push({folder: file, nameOfFile: eachElement[1]})
  })

  res.send(JSON.stringify({"obj": array}))
})

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 }));
})

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(3000, () => console.log("port: 3000"))

С версией HTML всё в порядке. Если уж не получится исправить, то как можно другим способом сделать выбор двух и более файлов?
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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