Kyle Underhill
Kyle Underhill

Reputation: 109

Javascript - Multiple File Uploader with Limit

This Javascript function allows for multiple file uploads and includes a file size limit, however it is missing a maximum number of files allowed to be uploaded.

The function handleFile(e) has the file type and size arguments passed through it but do not know where to introduce a limit on the allowable number of files to be uploaded.

const fInputs = document.querySelectorAll('.btcd-f-input>div>input')

function getFileSize(size) {
    let _size = size
    let unt = ['Bytes', 'KB', 'MB', 'GB'],
        i = 0; while (_size > 900) { _size /= 1024; i++; }
    return (Math.round(_size * 100) / 100) + ' ' + unt[i];
}

function delItem(el) {
    fileList = { files: [] }
    let fInp = el.parentNode.parentNode.parentNode.querySelector('input[type="file"]')
    for (let i = 0; i < fInp.files.length; i++) {
        fileList.files.push(fInp.files[i])
    }
    fileList.files.splice(el.getAttribute('data-index'), 1)

    fInp.files = createFileList(...fileList.files)
    if (fInp.files.length > 0) {
        el.parentNode.parentNode.parentNode.querySelector('.btcd-f-title').innerHTML = `${fInp.files.length} File Selected`
    } else {
        el.parentNode.parentNode.parentNode.querySelector('.btcd-f-title').innerHTML = 'No File Chosen'
    }
    el.parentNode.remove()
}

function fade(element) {
    let op = 1;  // initial opacity
    let timer = setInterval(function () {
        if (op <= 0.1) {
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}

function unfade(element) {
    let op = 0.01;  // initial opacity
    element.style.opacity = op;
    element.style.display = 'flex';
    let timer = setInterval(function () {
        if (op >= 1) {
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
    }, 13);
}

function get_browser() {
    let ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if (/trident/i.test(M[1])) {
        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
        return { name: 'IE', version: (tem[1] || '') };
    }
    if (M[1] === 'Chrome') {
        tem = ua.match(/\bOPR|Edge\/(\d+)/)
        if (tem != null) { return { name: 'Opera', version: tem[1] }; }
    }
    M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
    if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); }
    return {
        name: M[0],
        version: M[1]
    };
}

for (let inp of fInputs) {
    inp.parentNode.querySelector('.btcd-inpBtn>img').src = ''
    inp.addEventListener('mousedown', function (e) { setPrevData(e) })
    inp.addEventListener('change', function (e) { handleFile(e) })
}

let fileList = { files: [] }
let fName = null
let mxSiz = null

function setPrevData(e) {
    if (e.target.hasAttribute('multiple') && fName !== e.target.name) {
        console.log('multiple')
        fName = e.target.name
        fileList = fileList = { files: [] }
        if (e.target.files.length > 0) {
            for (let i = 0; i < e.target.files.length; i += 1) {
                console.log(e.target.files[i])
                fileList.files.push(e.target.files[i])
            }
        }
    }
}

function handleFile(e) {
    let err = []
    const fLen = e.target.files.length;
    mxSiz = e.target.parentNode.querySelector('.f-max')
    mxSiz = mxSiz != null && (Number(mxSiz.innerHTML.replace(/\D/g, '')) * Math.pow(1024, 2))

    if (e.target.hasAttribute('multiple')) {
        for (let i = 0; i < fLen; i += 1) {
            fileList.files.push(e.target.files[i])
        }
    } else {
        fileList.files.push(e.target.files[0])
    }

    //type validate
    if (e.target.hasAttribute('accept')) {
        let tmpf = []
        let type = new RegExp(e.target.getAttribute('accept').split(",").join("$|") + '$', 'gi')
        for (let i = 0; i < fileList.files.length; i += 1) {
            if (fileList.files[i].name.match(type)) {
                tmpf.push(fileList.files[i])
            } else {
                err.push('Wrong File Type Selected')
            }
        }
        fileList.files = tmpf
    }

    // size validate
    if (mxSiz > 0) {
        let tmpf = []
        for (let i = 0; i < fileList.files.length; i += 1) {
            if (fileList.files[i].size < mxSiz) {
                tmpf.push(fileList.files[i])
                mxSiz -= fileList.files[i].size
            } else {
                console.log('rejected', i, fileList.files[i].size)
                err.push('Max Upload Size Exceeded')
            }
        }
        fileList.files = tmpf
    }

    if (e.target.hasAttribute('multiple')) {
        e.target.files = createFileList(...fileList.files)
    } else {
        e.target.files = createFileList(fileList.files[fileList.files.length - 1])
        fileList = { files: [] }
    }

    // set File list view
    if (e.target.files.length > 0) {
        e.target.parentNode.querySelector('.btcd-f-title').innerHTML = e.target.files.length + ' File Selected'
        e.target.parentNode.parentNode.querySelector('.btcd-files').innerHTML = ''
        for (let i = 0; i < e.target.files.length; i += 1) {
            let img = null
            if (e.target.files[i].type.match(/image-*/)) {
                img = window.URL.createObjectURL(e.target.files[i])
            }
            else {
                img = ''
            }
            e.target.parentNode.parentNode.querySelector('.btcd-files').insertAdjacentHTML('beforeend', `<div>
                    <img src="${img}" alt="img"  title="${e.target.files[i].name}">
                    <div>
                        <span title="${e.target.files[i].name}">${e.target.files[i].name}</span>
                        <br/>
                        <small>${getFileSize(e.target.files[i].size)}</small>
                    </div>
                    <button type="button" onclick="delItem(this)" data-index="${i}" title="Remove This File"><span>&times;</span></button>
                </div>`)

        }
    }

    // set eror
    if (err.length > 0) {
        for (let i = 0; i < err.length; i += 1) {
            e.target.parentNode.parentNode.querySelector('.btcd-files').insertAdjacentHTML('afterbegin', `
            <div style="background: #fff2f2;color: darkred;display:none" class="btcd-f-err">
                <img src="" alt="img">
                <span>${err[i]}</span>
            </div>`)
        }
        const errNods = e.target.parentNode.parentNode.querySelectorAll('.btcd-files>.btcd-f-err')
        for (let i = 0; i < errNods.length; i += 1) {
            unfade(errNods[i])
            setTimeout(() => { fade(errNods[i]) }, 3000);
            setTimeout(() => { errNods[i].remove() }, 4000);
        }
        err = []
    }

}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
}

.btcd-f-input {
  display: inline-block;
  width: 340px;
  position: relative;
  overflow: hidden;
}

.btcd-f-input>div>input::-webkit-file-upload-button {
  cursor: pointer;
}

.btcd-f-wrp {
  cursor: pointer;
}

.btcd-f-wrp>small {
  color: gray;
}

.btcd-f-wrp>button {
  cursor: pointer;
  background: #f3f3f3;
  padding: 5px;
  display: inline-block;
  border-radius: 9px;
  border: none;
  margin-right: 8px;
  height: 35px;
}

.btcd-f-wrp>button>img {
  width: 24px;
}

.btcd-f-wrp>button>span,
.btcd-f-wrp>span,
.btcd-f-wrp>small {
  vertical-align: super;
}

.btcd-f-input>.btcd-f-wrp>input {
  z-index: 100;
  width: 100%;
  position: absolute;
  opacity: 0;
  left: 0;
  height: 37px;
  cursor: pointer;
}

.btcd-f-wrp:hover {
  background: #fafafa;
  border-radius: 10px;
}

.btcd-files>div {
  display: flex;
  align-items: center;
  background: #f8f8f8;
  border-radius: 10px;
  margin-left: 30px;
  width: 91%;
  margin-top: 10px;
  height: 40px;
}

.btcd-files>div>div {
  display: inline-block;
  width: 73%;
}

.btcd-files>div>div>small {
  color: gray;
}

.btcd-files>div>img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 10px;
}

.btcd-files>div>div>span {
  display: inline-block;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.btcd-files>div>button {
  background: #e8e8e8;
  border: none;
  border-radius: 50px;
  width: 25px;
  height: 25px;
  font-size: 20px;
  margin-right: 6px;
  padding: 0;
}

.btcd-files>div>button:hover {
  background: #bbbbbb;
}
<div class="btcd-f-input">
  <small>Multiple Upload</small>
  <div class="btcd-f-wrp">
    <button class="btcd-inpBtn" type="button"> <img src="" alt=""> <span> Attach File</span></button>
    <span class="btcd-f-title">No File Chosen</span>
    <small class="f-max">(Max 1 MB)</small>
    <input multiple type="file" name="snd_multiple" id="">
  </div>
  <div class="btcd-files">

  </div>
</div>

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/create-file-list.min.js"></script>

Upvotes: 0

Views: 254

Answers (1)

gold-dan
gold-dan

Reputation: 44

In the function handleFile before type validate:

let maxFileNum = 10; // Maximum number of files
if (fileList.files.length > maxFileNum){
    err.push("Too many files selected");
}

Upvotes: 1

Related Questions