Home / Questions / 9539
Accepted
Pedro Miguel Pimienta Morales
Asked: 2020-05-11 08:55:13 +0800 CST 2020-05-11 08:55:13 +0800 CST

Change style of an input type="file"

  • 772

I want to know if it is possible to change the default style that appears when placing a <input type="file" />on our page. Here I leave a screenshot.

Save image to localstorage

The image above is a screenshot of my tablet, where I save the image path to later display it in the view.

I would like to remove the input in the default way it appears, and place it in the upper right corner and only the ionic clear button style button appears, as I edited the image.

Code link: Codepen

Thanks in advance for any assistance.

angularjs

5 Answers

  1. Best Answer

    What you want is quite difficult to achieve and you can see an example of how to do it in the following link

    http://www.quirksmode.org/dom/inputfile.html

    I have achieved the same without much difficulty by hiding the input of type file and using an ordinary button that you can style however you like

    Here is a directive you can use where you just have to change the element buttonto what you want to use instead.

    angular.module('myApp', [])
  .directive('pickFile', function() {
    return {
      restrict: 'EA',
      template: 
        '<button class="button">Pick</button>' +
        '<input type="file" style="display: none !important">',
      link: function($scope, $element) {
        var input = $element.find('input');
        var button = $element.find('button');

        var evtHandler = function() {
          input[0].click();
        };

        button.on('click', evtHandler)
      }
    };
  });
    .button {
  padding: 10px 20px;
  background-color: red;
  color: white;
  border-radius: 6px;
  font-weight: bolder;
}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <pick-file></pick-file>
</div>

    This is the simplest possible example, since you are using ionic you can use its style classes or your own to style the buttons.

    Something like

    <button class="button button-icon icon ion-plus-round"></button>

    I leave you a complete example

    angular.module('myApp', ['ionic'])
  .directive('pickFile', function() {
    return {
      restrict: 'EA',
      template: '<button class="button button-icon icon ion-plus-round pull-right">' +
        '<input type="file" style="display: none !important">' +
        '</button>',
      link: function($scope, $element) {
        var input = $element.find('input');
        var button = $element.find('button');

        var evtHandler = function() {
          input[0].click();
        };

        button.on('click', evtHandler)
      }
    };
  });
    <link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet" />
<script src="http://code.ionicframework.com/1.3.0/js/ionic.bundle.min.js"></script>
<div ng-app="myApp">
  <div class="bar bar-header bar-balanced">
    <pick-file></pick-file>
    <h1 class="title">Perfil estudiante</h1>
  </div>
</div>

    • 5

  2. The easiest way is to place the input file with opacity "0" above a div or span designed as a button or however you want it to be displayed. So that when clicking on the input file (which is not visible but is there and has the same dimensions as the div with styles), the file selection tab opens. It's something like displaying a layout that has no functionality, and the functionality (provided by the input file) will be "invisible" to the user.

    Note: You could also use visibility hidden to hide the input

    • 1

  3. Dude, create a super simple example on Codepen. Only with Css styles you can do what you propose, I hope it works for you.

    Link Codepen - Example File Css

    • 1

  4. At the request of the OP, I have modified the directive created by @devconcept, so that it can be easily integrated into the code you already have.

    Once you select a file it calls a controller event where you do the same thing you were doing.

    Here is the full example on CodePen .

    angular.module('myApp', ['ionic'])
  .controller('ctrl', function($scope) {
  
    $scope.recibido = function(file) {
       console.log(file); // aqui tienes el file
    }
    
  })
  .directive('pickFile', function() {
    return {
      restrict: 'EA',
      scope: {
         onselected: "&"
      },
      template: '<button class="button button-icon icon ion-plus-round pull-right">' +
        '<input type="file" style="display: none !important">' +
        '</button>',
      link: function($scope, $element) {
        var input = $element.find('input');
        var button = $element.find('button');

        var evtHandler = function() {
          input[0].click();
        };

        button.on('click', evtHandler)
        input.on('change', function () {
          var file = input[0].files[0];
          $scope.onselected({ file: file });
        });
      }
    };
  });
    <link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet" />
<script src="http://code.ionicframework.com/1.3.0/js/ionic.bundle.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
  <div class="bar bar-header bar-balanced">
    <pick-file onselected="recibido(file)"></pick-file>
    <h1 class="title">Perfil estudiante</h1>
  </div>
</div>

    • 1

  5. You've already been given several solutions here, but... what about using ngCordova with Ionic? There is a file transfer plugin that allows you to translate all the logic <input type="file">into a function that you define yourself within your controller, thus giving you complete freedom to create a file upload button.

    Check it out http://ngcordova.com/docs/plugins/fileTransfer/

    • 0