Custom File Input

Developer
Alex Sperellis
Size
3,593 Kb
Views
36,432
  1. Custom File Input Previews
  2. Custom File Input HTML Codes
  3. Custom File Input CSS Codes
  4. Custom File Input JS Codes

How do I make an custom file input?

Control for custom file input field with styles and js for handling file name. What is a custom file input? How do you make a custom file input? This script and codes were developed by Alex Sperellis on 16 September 2022, Friday.

Custom File Input Previews
IQ Test

Custom File Input - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom File Input</title> <link rel='stylesheet prefetch' href='https://www.simon.com/rewardcard/dist/styles/rewardcard.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="form"> <form action="#"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="form-group"> <p>Custom File Input - Label or instructions can go here</p> <label class="file"> <input type="file" id="file" class="file-input"> <span class="file-control" data-filename="Choose File..."></span> </label> </div> </div> </div> </div> </form>
</section> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Custom File Input - Script Codes CSS Codes

@use postcss-nested;
@use cssnext;
@use postcss-simple-vars;
/* CSS for styling file input included as external resource */
.form { margin: 40px 0;
}
.file-input { min-width: 400px;
}
.file-control { overflow: hidden;
}
.file-control:after { content: attr(data-filename);
}

Custom File Input - Script Codes JS Codes

"use strict";
/*
Custom File Input
By: Alex Sperellis
Inspired and Uses Bootstrap 4 Custom File:
https://v4-alpha.getbootstrap.com/components/forms/#file-browser
Description:
Custom Styled File Input for HTML Forms. JS used to update content property when file selection is made by the user.
*/
var customFileInput = function customFileInput(inputID) { //set id of input based on params passed in. default is file var id = inputID || "file"; var fileInput = $("#" + id); //on change of file input fileInput.change(function () { //full file path var fullPath = document.getElementById(id).value; if (fullPath) { //index last index location of file path slashes var startIndex = fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'); //remove the excess of path var filename = fullPath.substring(startIndex); //clear out the final \ or / if exists if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) { filename = filename.substring(1); } //change data attr of html element to update the file name $('.file-control').attr('data-filename', filename); } });
};
//optional param: input id as string - no hash(#) needed
customFileInput();
Custom File Input - Script Codes
Custom File Input - Script Codes
Home Page Home
Developer Alex Sperellis
Username asperellis
Uploaded September 16, 2022
Rating 3
Size 3,593 Kb
Views 36,432
Do you need developer help for Custom File Input?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Sperellis (asperellis) Script Codes
Name
Tribute page
Twitch API
Quote generator
Landing Page Html
Window.print test
Floating Form Labels and Parsley Validation Tests
Mobile Nav and Dropdown Animations
Mobile Navigation
Simon logo animation
Wiki viewer
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!