File uploading feature in Bootstrap (without the need for Javascript)

While I've seen this question posted in a similar style before, one critical point (in my opinion) hasn't been addressed - is there a way to achieve this without using JavaScript? On mobile devices, overscripted sites can sometimes have non-working buttons or other issues until the page is refreshed due to JavaScript breaking. This could happen if the internet connection is slow or if there's a break in the connection. Therefore, I'm looking for a solution that doesn't rely on JavaScript but still allows file name display.

In short (TL;DR version)

  • Style file input like bootstrap
  • No JavaScript
  • Display filename

Is there a method to achieve this?

htmlcsstwitter-bootstrap

Answer №1

  1. Completed

document.querySelector('#file').addEventListener('change', function() {
  var val = this.value.split(/\\/g);
  document.querySelector('#filename').innerHTML = val[val.length - 1];
});
.wrapper {
  position:relative;  
  cursor:pointer;
  display:inline-block;
}

input {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity:0;
  cursor:pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<div class="wrapper">
  <input id="file" type="file" />  
  <span class="btn btn-primary btn-file">
    <i class="glyphicon glyphicon-folder-open"></i>
    <span id="filename">Select File</span>
  </span>
</div>

  1. Task Finished.
  2. This is not achievable.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The link button became unresponsive as soon as I implemented CSS changes

I customized one of my buttons with special styling, and now I'm facing an issue where the button is clickable but it fails to direct me to the intended link (which should open a YouTube video in a new tab). #help { background-color: cornflowerbl ...

htmlcssbuttonhyperlinkyoutube

When hovering on the list items, the text-decoration with a border-bottom and vertically centered unordered list "jumps"

I'm specifically looking for a solution using CSS only. I have a navigation bar with an unordered list containing list items. My question is how to underline these list items with a border-bottom. The additional requirement is that the navigation bar ...

htmlcss

Create a dynamic HTML page using JavaScript

When I click on the following links: How can I create a new page using JavaScript? Create and dynamically append elements I'm looking to dynamically add HTML elements with JavaScript within a div, but I don't want my code to become overly comp ...

javascripthtmlcss

Align the items at the center of a Vue Router Link

I am looking to design a navigation bar that includes router-link items, with each item displaying an icon on the left side and text on the right side. An example of this design can be seen in the Firebase navigation bar. https://i.sstatic.net/eg328.png ...

cssvue.js

Creating the perfect layout with CSS: A step-by-step guide

As I work on refining my layout to achieve the desired look, let me share my initial idea before delving into the issue at hand. Currently, I am attempting to create something similar to this: https://i.stack.imgur.com/rtXwm.png This is how it appears a ...

htmlcss

Having trouble adding your own styling to bootstrap-4 using a custom CSS file?

Here is the code I used to connect my two stylesheets, with the custom css file being linked second as per what I believe is the correct way to do it. <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href=" ...

htmlcssflaskbootstrap-4styling

When adding classes using Angular's ng-class, CSS3 transitions are not activated

After creating a custom modal directive in Angular, I am encountering an issue with the transition animation not working as expected. Within my directive's isolated scope, there is a method called toggleModal() that toggles the modalState between true ...

angularjscss

Tips for adding CSS attributes to a <style> tag in Internet Explorer

My current issue involves an ajax web application that loads all parts on a single page, specifically index.html. The inner parts being loaded in index.html have exceeded 32 pages (html, js, css). Now I am facing difficulties with the CSS files that need ...

javascriptjqueryhtmlcssinternet-explorer

Reposition DIV elements using only CSS styling

I'm attempting to switch the positions of two divs for responsive design (the website appearance changes based on browser width, ideal for mobile). Currently, my setup looks like this: <div id="first_div"></div> <div id="second_div"&g ...

cssresponsive-design

Retrieving data from a database using twig

In my PHP code, I currently have the following: $vals['followers'][] = R::find('follow', 'following_id=?', array($_GET['id'])); This code returns all followers in the "follow" table with a following_id that matche ...

phphtmlarraystwig

How can I retrieve the reference number of an item by clicking a button within a list item in an unordered

Presented here is a collection of data points and a button nested within an ul <ul> <li class="mix" category-1="" data-value="600.35" style="display:block;"> <figure> <figcaption> <h3> ...

javascriptjqueryhtmlcss

Mozilla Firefox does not have the capability to support preloading

I am having an issue with preloading CSS sheets. I attempted to preload the CSS sheet using the preload attribute in HTML. It works fine on Google Chrome, but unfortunately, it does not work on Firefox. <head> <link href=assets/css/master.c ...

htmlcssfirefoxoptimizationpreload

jQuery Ajax allows scripts to be contained within a page, even if the page itself is empty

Utilizing jQuery ajax to display an HTML page that includes javascript functions, here is my code: function ChartBook() { $.ajax({ url: '/Charts/ChartBook', dataType: 'html', id: 1, ...

javascriptjqueryhtmlajax

Ensure that buttons are cropped when extending beyond the border of another DIV

My issue involves a main DIV with buttons contained within it. I am seeking a solution to ensure that the buttons are cut off at the edge of the DIV, similar to the concept illustrated in this image. In the image, the blue represents the body, the light gr ...

htmlcssz-indexbehind

Please provide either your username or email in the login field

After successfully implementing a register and login system on my website, I am faced with a new challenge that has me stumped. The registration page currently has three input fields: Username Email Password Now, I want to simplify the login process by ...

phphtmlsqlauthentication

Issues with uploading files

I am trying to implement a functionality where users can upload video, audio, images, PDFs, PowerPoint presentations, and Word files, and then have them saved into a directory. However, when I try to upload the files using my code, there are no errors but ...

phphtml

Scraping HTML data without <div> tags with Scrapy - how to do it?

After spending hours attempting to extract a specific data set for use with Scrapy in a web scraping project, here is the current python code: bedrooms_info = house_listing.css( '.search-results-listings-list__item-description__charact ...

pythonhtmlweb-scrapingscrapy

"Interaction with jQuery causes button element to shift position upon resizing of browser

I am encountering an issue with a div element that has jQuery appended to it for a bounce effect. The element is absolutely positioned within its relative parent. However, when the browser is resized, the child element does not remain centrally aligned dur ...

jqueryhtmlcss

Issue with JAWS screen reader failing to announce aria-expanded status

My aim is to ensure that the collapsed state is accessible in both NVDA and JAWS, but I am encountering issues with it displaying properly in JAWS. Does anyone have any suggestions on how to rectify this? I have included images of the code and link list b ...

htmlaccessibilitywai-ariajaws-screen-readernvda

Webster Barron code script

I'm attempting to replicate the concept of this video https://www.superhi.com/video/barron-webster using text, but I am encountering difficulties in achieving the desired effect. The design text is currently overlapping my name and displaying in rev ...

javascripthtmlcss