Change style of an input type="file"

Question

Change style of an input type="file"

Navigation

#1 by (4 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (1 votes)
#5 by (0 votes)

6

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.

The previous image is a screenshot of my tablet, where I save the path of the image and then show it in the view.

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

Code link: Codepen

Thanks in advance for any help.

css3 angularjs ionic

asked by Pedro Miguel Pimienta Morales 10.05.2016 в 18:55

source

5 answers

1

The simplest way is to place the input file with opacity "0" above a div or span designed as a button or as you want it to be displayed. So that, by clicking on the input file (which can not be seen but is and has the same dimensions as the div with styles), the file selection tab opens. It is something like showing a design that has no functionality, and the functionality (given by the input file) will be "invisible" to the user.

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

answered by 10.05.2016 в 21:04

1

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

Link Codepen - Sample File Css

answered by 10.05.2016 в 22:12

1

At the request of the OP, I have modified the directive created by @devconcept, so that it can be integrated into the code that it already has in a simple way.

Once you select a file, call a driver event where you do the same thing you were doing.

Here is the complete example in 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>

answered by 11.05.2016 в 16:38

0

They have already given you several solutions around here, but ... and using ngCordova with Ionic? There is a file transfer plugin that allows you to transfer all the <input type="file"> logic to a function that you define within your controller, giving you total freedom to create a file upload button.

Check it out link

answered by 11.05.2016 в 12:43

For what is "=" in C # C ++ no match for 'operator + =' (operand types are 'float' and 'std :: chrono :: durationlong int')

score 4 · Accepted Answer

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

link

I have achieved the same without much difficulty hiding the input type file and using a common button that you can style as you like

Here I leave you a directive that you can use in which you only have to change the button element to 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 example possible, since you are using ionic you can use the style classes of this or the your own to design 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>