2

So I am making a file upload website that when file is uploaded, it renders an uploading page that says it's uploading the file but when trying to render the success page, it won't do it since a page has already been rendered. How would I make it render the success page?

Deps.: Express, Express-FileUpload, EJS (for view engine)

Code:

const express = require('express')
const upload = require('express-fileupload')
const crypto = require('crypto')

uploadDisabledM = {
    'message': 'Uploading has been disabled for new users.', // This was for testing at the start
    'code': 'UPL_DISABLED'
}
noFilesProvidedM = {
    'message': 'No files were provided.',
    'code': 'NO_FILE_PROV'
}

const app = express()
const http = require('http').Server(app).listen(80)
app.use(express.static('public'))
app.use(upload())
app.set('view engine', 'ejs')

app.get('/', (res, req) => {
    return req.render('index')
})

app.get('/upload', (res, req) => {
    req.redirect('/')
})

app.post('/upload', (res, req) => {
    let file
    let ID
    let uploadPath
  
    if (!res.files || Object.keys(res.files).length === 0) {
      return req.status(400).render('error', {
          error: noFilesProvidedM.message,
          code: noFilesProvidedM.code
        })
    }

    file = res.files.sampleFile
    ID = crypto.randomBytes(5).toString('hex')
    uploadPath = `${__dirname}/uploads/${ID}-${file.name}`
    endingFileName = `${ID}-${file.name}`

    req.render('loading')
    
    file.mv(uploadPath, (err) => {
        if(err){
            res.status(500).render('error', {
                error: err.message,
                code: 500
            })
        }
    })

    return req.render('success', { filename: endingFileName })
})

Error:

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
SirStopIt
  • 102
  • 2
  • 16
  • remove req.render('loading') – arjun kori Mar 31 '21 at 17:54
  • 1
    I don't think you read the full post. I said I wanted it to render a LOADING PAGE which then renders a SUCCESS PAGE, not to remove the loading page, see the user uploads a big file, they see it gets stuck on refreshing and thinks it's not doing anything when in reality, it is uploading their file. Please read the posts fully before answering, even if it's a comment. – SirStopIt Apr 01 '21 at 17:28
  • 1
    You can't send a render to a client, followed by another render. You need to have the client do a `POST /upload` request (probably using fetch()). It then waits for the success response, then it requests the success page. – terrymorse Apr 01 '21 at 17:45
  • Hey @terrymorse how would I do this? – SirStopIt May 07 '21 at 15:16
  • You would likely need to modify your client-side/view to show an uploading message automatically before performing the upload request, instead of having the server return two results. It's hard to make a more specific suggestion without seeing the code to your view; feel free to add it to the question. – Pluto May 24 '21 at 20:39
  • The code is... in the question? Oh wait I might of updated the question. Have a shot at explaining that again because that's sort of confusing. – SirStopIt Jun 08 '21 at 09:01

0 Answers0