jQuery plugin for File Upload with Drag And Drop in Html Css Js Jquery

Here is a good file uploading code that you can use in your site to upload file or to drag and drop a file. This was coded with Html, Css, Js and jQuery.

Coded By: Mohammad Yazdanpanah

CodePen: https://codepen.io/mohammadYazdanpanah/pen/dyopeqj

Html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Document</title>
</head>

<body>
    <div class="maincontent">
        <div class="file-upload-wrapper">
            <div class="file-upload-wrapper-title">
                <h4>File Upload</h4>
                <hr />
                <button class="file-upload-wrapper-title__btn">
                    Upload Now
                </button>
            </div>
            <div class="box-fileupload">
                <input type="file" id="fileId" class="file-upload-input" name="files" multiple>
                <label for="fileId" class="file-upload-btn"></label>
                <p class="box-fileupload__lable">Drop files here to upload</p>
            </div>
            <div class="error-wrapper"></div>
            <div class="image-previwe"></div>
        </div>
    </div>
  <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
 <script src="assets/js/app.js"></script>   
    <script>
        
        $("html").fileUplodPlugins({
           inputFileUpload: "#fileId",
            ValidType: ['image/jpeg', 'image/png',],
            btnUpload: ".file-upload-wrapper-title__btn",
            deleteImageBtn: ".image-previwe__delete-btn",
            boxFileUploadPreviwe: '.image-previwe',
            boxErrorPreviwe: '.error-wrapper',
        })
    </script>
</body>

</html>


Css:

html {
    width: 100%;
    height: 100%;
}
body {
    background: #f3f3f3;
    width: 100%;
    height: 100%;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul{
    list-style: none;
}
.file-upload-wrapper {
    width: 60%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-fileupload {
    background: #d3e7ff;
    width: 80%;
    padding: 50px;
    border: 2px dashed #a9e4f1;
    border-radius: 3px;
}

html {
    width: 100%;
    height: 100%;
}
body {
    background: #f3f3f3;
    width: 100%;
    height: 100%;
}
* {
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
.maincontent {
    max-width: 1080px;
    margin: 0 auto;
    padding: 50px 0;
}
.file-upload-wrapper {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    background: #fff;
    padding: 20px 0;
    border-radius: 4px;
}
.box-fileupload {
    background: #d3e7ff;
    width: 90%;
    padding: 50px;
    border: 3px dashed #8fd9ea;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
}
.file-upload-input {
    display: none;
}
label.file-upload-btn {
    width: 182px;
    height: 120px;
    background-image: url(http://www.pngall.com/wp-content/uploads/2/Upload-PNG-Image-File.png);
    background-size: cover;
    background-position: center center;
    background-origin: border-box;
    background-repeat: no-repeat;
}
.image-previwe {
    width: 90%;
    height: auto;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
}
.image-previwe__image {
    min-width: 129px;
    min-height: 130px;
    border: 2px solid #5c8ac3;
    border-radius: 5px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 10px;
    position: relative;
    -webkit-box-shadow: 0 13px 6px -8px rgba(0, 0, 0, 0.3),
    0 0 4px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 13px 6px -8px rgba(0, 0, 0, 0.3),
    0 0 4px 0 rgba(0, 0, 0, 0.3);
    border-radius: 5px;

}
.image-previwe__delete-btn {
    width: 25px;
    height: 25px;
    background: #000000ab;
    color: #fff;
    border-radius: 28px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 5px;
    left: 5px;
    cursor: pointer;
    z-index: 2;
}
.image-previwe__delete-btn::before,
.image-previwe__delete-btn::after {
    content: "";
    display: block;
    width: 56%;
    height: 2px;
    background: #fff;
    position: absolute;
}
.image-previwe__delete-btn::after {
    transform: rotate(43deg);
}
.image-previwe__delete-btn::before {
    transform: rotate(-40deg);
}
.image-previwe__hover {
    background: #0000008f;
    color: #fff;
    display: inline-flex;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all .4s;
    left: 0;
    right: 0;
    top: 0;
    box-sizing: border-box;
    text-align: center;
}
.image-previwe__hover p{
    font-size: 13px;
    width: 100%;
    padding: 10px;
    word-wrap: break-word;
}
.image-previwe__hover:hover,
.image-previwe__close-btn:hover {
    opacity: 1;
}
.file-upload-wrapper-title {
    width: 92%;
    min-height: 50px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
}
.file-upload-wrapper-title h4 {
    display: inline-block;
    font-size: 20px;
    padding: 10px 0px 6px 0;
    font-weight: 200;
}
.file-upload-wrapper-title hr {
    width: 21%;
    display: inline-block;
    margin: 6px 0;
}
.file-upload-wrapper-title__btn {
    background-color: #4099ff;
    border-color: #4099ff;
    border: none;
    padding: 12px 20px;
    color: #fff;
    cursor: pointer;
    -webkit-transition: all ease-in 0.3s;
    transition: all ease-in 0.3s;
    border-radius: 2px;
}
.box-fileupload__lable {
    font-size: 20px;
    margin: 10px 0;
    color: #1471ad;
}
.error-wrapper {
    margin: 10px;
    width: 90%;
}

.error-format {
    background: #ff00003b;
    padding: 15px 10px;
    border-radius: 5px;
    border: 2px solid #f6343b;
    color: #b00707;
    margin: 10px;
}


JS:



(function ($) {
    $.fn.fileUplodPlugins = function (option) {
        let allData = []
        let settings = $.extend({
            inputFileUpload: "#fileId",
            ValidType: ['image/jpeg', 'image/png', ],
            btnUpload: ".file-upload-wrapper-title__btn",
            deleteImageBtn: ".image-previwe__delete-btn",
            boxFileUploadPreviwe: '.image-previwe',
            boxErrorPreviwe: '.error-wrapper',
        }, option)
        

        function removeElement(id) {

            allData = allData.filter(itme => {
                return itme.id != id
            })
        }
        $(document).ready(function () {
            const removeBtn = (id) => {
                let span = document.createElement('span');
                span.setAttribute('class', 'image-previwe__delete-btn');
                span.setAttribute('data-id', id);
                return span;
            }
            const previweNameImage = (name) => {
                let div = document.createElement('div');
                div.setAttribute('class', "image-previwe__hover");
                let p = document.createElement('p');
                p.innerHTML = name;
                div.appendChild(p)
                return div;
            }
            const CreatImagePreview = (image, id, noImage = null) => {
                let div = document.createElement('div');
                div.setAttribute("class", "image-previwe__image");
                if (noImage != null) {
                    div.setAttribute("style", `background-image:url(${noImage})`);
                } else {
                    div.setAttribute("style", `background-image:url(${image})`);
                }
                div.appendChild(removeBtn(id));
                div.appendChild(previweNameImage(id));
                return div;
            }
            const createError = () => {
                let div = document.createElement('div');
                div.setAttribute("class", 'error-format');
                div.innerHTML = "File Format Is Not Valid";
                return div;
            }
            let checkTypeFiles = (file) => {
                let validation = {
                    isValid: false,
                    preViwe: null,
                }

                settings.ValidType.forEach((data, index) => {

                    if (file.type == data) {
                        file.previewimg = null;
                        validation.isValid = true;
                        validation.preViwe = file;
                        switch (true) {
                            case file.type == 'application/pdf':
                                file.previewimg = 'assets/img/pdf-icon.png'
                                validation.preViwe = file;
                                break;
                            case file.type == 'text/plain':
                                file.previewimg = 'assets/img/txt-icon.png';
                                validation.preViwe = file;
                                break;
                        }
                    }
                })

                return validation;
            }

            function uploadClick(input) {
                let inputValue = Object.values(input.files)
                if (input.files.length) {
                    inputValue.forEach(element => {
                        let isElementVaild = checkTypeFiles(element)

                        if (isElementVaild.isValid) {
                            allData.push({
                                id: element.lastModified,
                                file: element
                            });
                            renderImageData(isElementVaild.preViwe);
                        } else {
                            $(settings.boxErrorPreviwe).append(createError());
                            setTimeout(() => {
                                $('.error-format').fadeOut("slow")
                            }, 2500);
                        }
                    });
                }
            }

            function DragAndDropUpload(input) {
                let inputValue = Object.values(input)
                if (input.length) {
                    inputValue.forEach((element) => {
                        let isElementVaild = checkTypeFiles(element)

                        if (isElementVaild.isValid) {
                            allData.push({
                                id: element.lastModified,
                                file: element
                            });
                            renderImageData(isElementVaild.preViwe);
                        } else {
                            settings.boxErrorPreviwe.appendChild(createError());
                        }
                    });
                }
            }

            function renderImageData(arrayItme) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    let previweTag = CreatImagePreview(e.target.result, arrayItme.lastModified, arrayItme.previewimg);
                    $(settings.boxFileUploadPreviwe).append(previweTag);
                }

                reader.readAsDataURL(arrayItme);
            };
            $(settings.inputFileUpload).change(function () {
                uploadClick(this);
            });

            $("html").on("dragover", function (e) {
                e.preventDefault();
                e.stopPropagation();
            });
            $('.box-fileupload').on('dragenter', function (e) {
                e.stopPropagation();
                e.preventDefault();
                $(".box-fileupload__lable").text("Drop");
            });
            $('.box-fileupload').on('drop', function (e) {
                e.stopPropagation();
                e.preventDefault();

                $(".box-fileupload__lable").text("Upload");

                var file = e.originalEvent.dataTransfer.files;

                DragAndDropUpload(file)
            });
        })
        $(settings.btnUpload).click(function () {

        })
        $(document).on('click', settings.deleteImageBtn, function () {
            let dataId = $(this).attr("data-id")
            removeElement(dataId);
            $(this).parent().remove()
        });
        return this;

    }
}(jQuery))


Post a Comment

Previous Post Next Post