javascript - कोणीय सामग्री के साथ फ़ाइल अपलोड करें




html angularjs (6)

jameswyse से https://github.com/angular/material/issues/3310

एचटीएमएल

<input id="fileInput" name="file" type="file" class="ng-hide" multiple>
<md-button id="uploadButton" class="md-raised md-primary"> Choose Files </md-button>

नियंत्रक

    var link = function (scope, element, attrs) {
    const input = element.find('#fileInput');
    const button = element.find('#uploadButton');

    if (input.length && button.length) {
        button.click((e) => input.click());
    }
}

मेरे लिए काम किया

मैं AngularJS और कोणीय-सामग्री के साथ एक वेब ऐप लिख रहा हूं। समस्या यह है कि कोणीय-सामग्री में फ़ाइल इनपुट के लिए कोई अंतर्निहित घटक नहीं है। (मुझे लगता है कि फाइल अपलोडिंग सामग्री डिजाइन में फिट नहीं है, लेकिन मुझे इसे अपने ऐप में चाहिए)

क्या आपके पास इस समस्या का अच्छा समाधान है?


आप इनपुट को लेबल के अंदर लपेटकर शैली बदल सकते हैं और इनपुट डिस्प्ले को किसी भी में बदल सकते हैं। फिर, आप उस पाठ को निर्दिष्ट कर सकते हैं जिसे आप एक स्पैन तत्व के अंदर प्रदर्शित करना चाहते हैं। नोट: यहां मैंने बूटस्ट्रैप 4 बटन शैली (बीटीएन बीटीएन-रूपरेखा-प्राथमिक) का उपयोग किया था। आप अपनी इच्छित शैली का उपयोग कर सकते हैं।

<label class="btn btn-outline-primary">
      <span>Select File</span>
      <input type="file">
</label>

input {
  display: none;
}

एक और हैक समाधान, हालांकि प्रॉक्सी बटन को लागू करके थोड़ा क्लीनर हो सकता है:

HTML:

<input id="fileInput" type="file">
<md-button class="md-raised" ng-click="upload()">
  <label>AwesomeButtonName</label>
</md-button>

जे एस:

app.controller('NiceCtrl', function ( $scope) {
  $scope.upload = function () {
    angular.element(document.querySelector('#fileInput')).click();
  };
};

मुझे अपना खुद का चयन फ़ाइल बटन स्टाइल करने से बचने का एक तरीका मिलता है।

चूंकि मैं पुन: अपलोड करने योग्य अपलोड के लिए फ़्लोज का उपयोग कर रहा हूं, मैं एनजी-फ्लो से " फ्लो-बीटीएन " निर्देश का उपयोग करने में सक्षम हूं, जो भौतिक डिजाइन शैली के साथ एक फ़ाइल फ़ाइल का चयन करता है।

ध्यान दें कि एक एमडी-बटन के अंदर इनपुट तत्व लपेटना काम नहीं करेगा।


समाधान का एक और उदाहरण। निम्नलिखित की तरह दिखेगा

कोडपेन लिंक there

  <choose-file layout="row">
    <input id="fileInput" type="file" class="ng-hide">
    <md-input-container flex class="md-block">
      <input type="text" ng-model="fileName" disabled>
      <div class="hint">Select your file</div>
    </md-input-container>
    <div>
      <md-button id="uploadButton" class="md-fab md-mini">
        <md-icon class="material-icons">attach_file</md-icon>
      </md-button>
    </div>
  </choose-file>   

.directive('chooseFile', function() {
    return {
      link: function (scope, elem, attrs) {
        var button = elem.find('button');
        var input = angular.element(elem[0].querySelector('input#fileInput'));

        button.bind('click', function() {
          input[0].click();
        });

        input.bind('change', function(e) {
          scope.$apply(function() {
            var files = e.target.files;
            if (files[0]) {
              scope.fileName = files[0].name;
            } else {
              scope.fileName = null;
            }
          });
        });
      }
    };
  });

आशा करता हूँ की ये काम करेगा!


leocaseiro द्वारा अच्छा समाधान

<input class="ng-hide" id="input-file-id" multiple type="file" />
<label for="input-file-id" class="md-button md-raised md-primary">Choose Files</label>

codepen में देखें





angular-material