Skip to content

Instantly share code, notes, and snippets.

@merlox
Created October 23, 2019 12:22
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save merlox/203c477a6e58055c68f83d0ebd06b323 to your computer and use it in GitHub Desktop.
Save merlox/203c477a6e58055c68f83d0ebd06b323 to your computer and use it in GitHub Desktop.
The file upload summary
// Index.html
<div>
<h1>File upload</h1>
<input type="file" multiple onChange={e => uploadFile(e)}/>
</div>
// Index.js
const uploadFile = async e => {
const files = e.target.files
console.log('files', files)
const form = new FormData()
for (let i = 0; i < files.length; i++) {
form.append('files', files[i], files[i].name)
}
try {
let request = await fetch('/upload', {
method: 'post',
body: form,
})
const response = await request.json()
console.log('Response', response)
} catch (err) {
alert('Error uploading the files')
console.log('Error uploading the files', err)
}
}
// Server.js
const Formidable = require('formidable')
const bluebird = require('bluebird')
const fs = bluebird.promisifyAll(require('fs'))
// Server.js
// Returns true if successful or false otherwise
async function checkCreateUploadsFolder (uploadsFolder) {
try {
await fs.statAsync(uploadsFolder)
} catch (e) {
if (e && e.code == 'ENOENT') {
console.log('The uploads folder doesn\'t exist, creating a new one...')
try {
await fs.mkdirAsync(uploadsFolder)
} catch (err) {
console.log('Error creating the uploads folder 1')
return false
}
} else {
console.log('Error creating the uploads folder 2')
return false
}
}
return true
}
// Returns true or false depending on whether the file is an accepted type
function checkAcceptedExtensions (file) {
const type = file.type.split('/').pop()
const accepted = ['jpeg', 'jpg', 'png', 'gif', 'pdf']
if (accepted.indexOf(type) == -1) {
return false
}
return true
}
app.post('/upload', async (req, res) => {
let form = Formidable.IncomingForm()
const uploadsFolder = join(__dirname, 'dist', 'uploads')
form.multiples = true
form.uploadDir = uploadsFolder
form.maxFileSize = 50 * 1024 * 1024 // 50 MB
const folderCreationResult = await checkCreateUploadsFolder(uploadsFolder)
if (!folderCreationResult) {
return res.json({ok: false, msg: "The uploads folder couldn't be created"})
}
form.parse(req, async (err, fields, files) => {
let myUploadedFiles = []
if (err) {
console.log('Error parsing the incoming form')
return res.json({ok: false, msg: 'Error passing the incoming form'})
}
// If we are sending only one file:
if (!files.files.length) {
const file = files.files
if (!checkAcceptedExtensions(file)) {
console.log('The received file is not a valid type')
return res.json({ok: false, msg: 'The sent file is not a valid type'})
}
const fileName = encodeURIComponent(file.name.replace(/&. *;+/g, '-'))
myUploadedFiles.push(fileName)
try {
await fs.renameAsync(file.path, join(uploadsFolder, fileName))
} catch (e) {
console.log('Error uploading the file')
try { await fs.unlinkAsync(file.path) } catch (e) {}
return res.json({ok: false, msg: 'Error uploading the file'})
}
} else {
for(let i = 0; i < files.files.length; i++) {
const file = files.files[i]
if (!checkAcceptedExtensions(file)) {
console.log('The received file is not a valid type')
return res.json({ok: false, msg: 'The sent file is not a valid type'})
}
const fileName = encodeURIComponent(file.name.replace(/&. *;+/g, '-'))
myUploadedFiles.push(fileName)
try {
await fs.renameAsync(file.path, join(uploadsFolder, fileName))
} catch (e) {
console.log('Error uploading the file')
try { await fs.unlinkAsync(file.path) } catch (e) {}
return res.json({ok: false, msg: 'Error uploading the file'})
}
}
}
res.json({ok: true, msg: 'Files uploaded succesfully!', files: myUploadedFiles})
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment