Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Back to Forms
Preview Source Code
Download
HTML
CSS
/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*{ box-sizing: border-box; font-size: 16px; padding:0px; list-style:none; text-decoration:none; margin:0px; font-family:"Poppins"}
.upload-box {
    max-width: 500px;
    width: 100%;
    height: 280px;
    border: #ccc 1px solid;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    background-color: #ededed;
    margin: auto;
    margin-top: 5%;
}
.upload-group {
  padding: 20px;
}
/**Typeo CSS Start**/
/**Custom file upload**/
.fileupload {
    width: 100%;
    background-color: #e7e6e6;
    padding: 10px;
    border: #ccc 1px solid;
    color: #000;
    position: relative;
}
.file-text {
    position: absolute;
    left: 0px;
    padding: 0px 40px 0px 10px;
    font-size: 14px;
    cursor: pointer;
    height: 100%;
    width: 100%;
    top: 0px;
    line-height: 44px;
    pointer-events: none;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1; /* number of lines to show */
   line-clamp: 1; 
   -webkit-box-orient: vertical;
}
.fileupload .fileupload-icon{
  position: absolute;
  right: 10px;
  top: 9px;
  bottom: 0px;
  margin: auto;
  pointer-events: none;

}
/**File size**/
.fileupload {
    width: 100%;
    background-color: #d7d7d7;
    padding: 10px;
}
.fileupload input[type="file"] {
    opacity: 0;
}

#uploadsize{
  display: block; 
  font-size: 14px; 
  color: red;
}
JS
$(document).ready(function(e) {
  /**File limit changes start**/
  var uploadField = document.getElementById("file");
  uploadField.onchange = function() {
    var inputfile = $(this).val().replace(/C:\\fakepath\\/i, '');
    $('.file-text').text(inputfile)
    console.log(inputfile); 
  var size = 0;
  Array.from(this.files).forEach(function(file) {
    size += file.size;
    });
  $('#uploadsize').text("");
  if(size > 2000000){
    $('#uploadsize').text("File size is 2MB More");
    this.value = "";
  };
};
/**File limit changes end**/
});
JS File

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *