Created
October 23, 2019 12:22
-
-
Save merlox/203c477a6e58055c68f83d0ebd06b323 to your computer and use it in GitHub Desktop.
The file upload summary
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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