g <ইনপুট টাইপ = "ফাইল" /> for এর জন্য এনজি-মডেল (নির্দেশিকা ডেমো সহ)

Question

আমি টাইপ ফাইল সহ ইনপুট ট্যাগে এনজি-মডেল ব্যবহার করার চেষ্টা করেছি:

<input type="file" ng-model="vm.uploadme" />

তবে একটি ফাইল নির্বাচন করার পরে, নিয়ামক হিসাবে, $ સ્કોপ.ভিএম.আপলোডটি এখনও অপরিজ্ঞাত।

আমি আমার নিয়ামকটিতে নির্বাচিত ফাইলটি কীভাবে পাব?

Comments

দেখুন stackoverflow.com/a/17923521/135114 , বিশেষ করে উদাহৃত উদাহরণ অনলাইনে jsfiddle.net/danielzen/utp7j

— Daryn

আমি বিশ্বাস করি এনজিএমডেল ব্যবহার করার সময় আপনার সবসময় এইচটিএমএল এলিমেন্টে নাম সম্পত্তিটি নির্দিষ্ট করা দরকার।

— স্যাম

Answer 1

আমি নির্দেশ দিয়ে একটি কার্যনির্বাহ তৈরি করেছি:

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);

এবং ইনপুট ট্যাগ হয়ে যায়:

<input type="file" fileread="vm.uploadme" />

অথবা যদি কেবল ফাইল সংজ্ঞা প্রয়োজন হয়:

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                scope.$apply(function () {
                    scope.fileread = changeEvent.target.files[0];
                    // or all selected files:
                    // scope.fileread = changeEvent.target.files;
                });
            });
        }
    }
}]);

Comments

আমি img ট্যাগে src হিসাবে আপলোডমে ব্যবহার করি, তাই আমি দেখতে পাচ্ছি যে এটি নির্দেশ দ্বারা সেট হয়ে যাচ্ছে set তবে, যদি আমি $ স্কোপ.আপলোডমে ব্যবহার করে এটি নিয়ামক থেকে ধরার চেষ্টা করি তবে এটি "অপরিজ্ঞাত"। যদিও আমি নিয়ামক থেকে আপলোড সেট করতে পারি। উদাহরণস্বরূপ, $ স্কোপ.আপলোডমে = "*" চিত্রটি অদৃশ্য করে।

— পের কুইস্টেড আরনসন

সমস্যাটি হ'ল নির্দেশটি একটি চাইল্ডস্কোপ তৈরি করে এবং সেই সুযোগে আপলোড সেট করে। মূল (পিতামাতার) স্কোপটিতে একটি আপলোডও রয়েছে, যা চাইল্ডস্কোপ দ্বারা প্রভাবিত নয়। আমি উভয় সুযোগ থেকে এইচটিএমএলে আপলোডটি আপডেট করতে পারি। আদৌ চাইল্ডস্কোপ তৈরি এড়াতে কি উপায় আছে?

— পের ক্রেস্টেড আরনসন

@ অ্যালেক্সের প্রশ্নটি ছিল এনজি-মডেলটি কাজ করছে না, ফাইল আপলোড করার বিষয়ে নয় :) তখন আমার ফাইলটি আপলোড করার দরকার ছিল না। তবে সম্প্রতি আমি শিখেছি কীভাবে এই ডিম্বাণু। টিউটোরিয়াল থেকে ফাইল আপলোড করতে হয় ।

— এন্ডি তেজহোনো

— ভুলেও

আমার একটি প্রশ্ন আছে .... প্লেইন জাভাস্ক্রিপ্ট এবং এইচটিএমএল এর তুলনায় এই পদ্ধতিটি কি খুব জটিল নয়? গুরুতরভাবে, এই সমাধানে পৌঁছানোর জন্য আপনাকে সত্যই অ্যাঙ্গুলারজেএস বুঝতে হবে ... এবং মনে হচ্ছে জাভাস্ক্রিপ্ট ইভেন্টের সাথে আমিও একই কাজ করতে পারি। কেন এটি কৌণিক উপায়ে করছেন এবং সরল জেএস উপায় নয়?

— এএফপি_ 555

Answer 2

আমি এই নির্দেশটি ব্যবহার করি:

angular.module('appFilereader', []).directive('appFilereader', function($q) {
    var slice = Array.prototype.slice;

    return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, element, attrs, ngModel) {
                if (!ngModel) return;

                ngModel.$render = function() {};

                element.bind('change', function(e) {
                    var element = e.target;

                    $q.all(slice.call(element.files, 0).map(readFile))
                        .then(function(values) {
                            if (element.multiple) ngModel.$setViewValue(values);
                            else ngModel.$setViewValue(values.length ? values[0] : null);
                        });

                    function readFile(file) {
                        var deferred = $q.defer();

                        var reader = new FileReader();
                        reader.onload = function(e) {
                            deferred.resolve(e.target.result);
                        };
                        reader.onerror = function(e) {
                            deferred.reject(e);
                        };
                        reader.readAsDataURL(file);

                        return deferred.promise;
                    }

                }); //change

            } //link
    }; //return
});

এবং এটি অনুরোধ:

<input type="file" ng-model="editItem._attachments_uri.image" accept="image/*" app-filereader />

সম্পত্তি (editItem.editItem._attachments_uri.image) আপনি যে ফাইলটি ডেটা-ইউরি (!) হিসাবে নির্বাচন করেছেন তার সামগ্রীতে পপুলেট হবে।

এই স্ক্রিপ্ট কিছু আপলোড করবে না দয়া করে নোট করুন। এটি কেবলমাত্র আপনার ফাইলকে এনকোড করা ডেটা-ইউরি (বেস 64) এর সামগ্রীর সাহায্যে আপনার মডেলকে পপুলেশন করবে।

একটি কার্যকারী ডেমো এখানে দেখুন: http://plnkr.co/CMiHKv2BEidM9SShm9Vv

Comments

প্রতিশ্রুতিবদ্ধ চেহারা, আপনি দয়া করে কোড পিছনে যুক্তি ব্যাখ্যা করতে পারেন, এবং ব্রাউজার সামঞ্জস্যতা সম্পর্কে মন্তব্য (IE এবং নন - ফাইলএপিআই ব্রাউজার বেশিরভাগ)?

— ওলেগ বেলোসভ

এছাড়াও, আমার বোধগম্যতার জন্য, আমি যদি এজেএক্স অনুরোধের সামগ্রী-প্রকারের শিরোলেখটিকে অপরিজ্ঞাত করার জন্য সেট করে রাখি এবং সার্ভারে এই জাতীয় ক্ষেত্র প্রেরণের চেষ্টা করব, কৌণিক এটি আপলোড করবে, ধরে নিই যে ব্রাউজারটি ফাইলএপিআই সমর্থন করে, আমি ঠিক?

— ওলেগ বেলোসভ

@ ওলেগটিখোনভ আপনি সঠিক নন! এই স্ক্রিপ্ট কিছু প্রেরণ করবে না। এটি আপনার বেস 64 স্ট্রিং হিসাবে নির্বাচিত ফাইলটি পড়বে এবং সেই স্ট্রিং সহ আপনার মডেলটি আপডেট করবে।

— এলমার

@ ইলমার হ্যাঁ, আমি বুঝতে পেরেছি, আমার অর্থ হ'ল এমন একটি ফর্ম পাঠিয়ে যা একটি ফাইল ক্ষেত্র (কোনও ফাইলপিআই অবজেক্টে ব্যবহারকারীর মেশিনে ফাইলের জন্য একটি আপেক্ষিক পথ) রয়েছে, আপনি XHR অনুরোধের মাধ্যমে কৌনিকটি ফাইলটি আপলোড করতে পারবেন কনটেন্ট টাইপের

— শিরোনামটি অপরিজ্ঞায়িত

Overwritting উদ্দেশ্য কি ngModel'র $renderফাংশন আছে?

— sp00m

Answer 3

কিভাবে <input type="file">কাজ করতে সক্ষমng-model

নির্দেশিকাটির কার্যকারী ডেমো যা কাজ করে ng-model

মূল ng-modelনির্দেশটি <input type="file">বাক্সের বাইরে চলে না।

এই কাস্টম নির্দেশ দেয় ng-modelএবং সক্ষম করার যোগ সুবিধা রয়েছে ng-change, ng-requiredএবং ng-formএর সাথে কাজ করা নির্দেশনা <input type="file">।

angular.module("app",[]);

angular.module("app").directive("selectNgFiles", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" select-ng-files ng-model="fileArray" multiple>

    <code><table ng-show="fileArray.length">
    <tr><td>Name</td><td>Date</td><td>Size</td><td>Type</td><tr>
    <tr ng-repeat="file in fileArray">
      <td>{{file.name}}</td>
      <td>{{file.lastModified | date  : 'MMMdd,yyyy'}}</td>
      <td>{{file.size}}</td>
      <td>{{file.type}}</td>
    </tr>
    </table></code>
    
  </body>

Comments

নির্বাচিত ফাইল নেই কিনা তা পরীক্ষা করার জন্য আপনি শর্তটি ব্যবহার করতে পারেন, এনজি-মডেলটিকে অপরিজ্ঞাত করা হবে **** যদি (ফাইলসাইলেন্ট> 0) {ngModel $ সেটভিউভ্যালু (ফাইল); } অন্য {ng মডেল $ সেটভিউভ্যালু (অপরিবর্তিত); }

— ফারশাদ কাজেমী

কিভাবে ফাইলের ডেটা পাবেন? এবং অন্যান্য বৈশিষ্ট্যগুলি কী কী আমরা use {file.name utes like এর মতো ব্যবহার করতে পারি

— আদর্শ সিং

@ আদর্শসিংহ এমডিএন ওয়েব এপিআই রেফারেন্স দেখুন - ফাইল এবং এমডিএন রেফারেন্স - ওয়েব অ্যাপ্লিকেশন থেকে ফাইল ব্যবহার করা

— জর্জিওগ

Answer 4

এটি @ এন্ডি-তজাহজনো সমাধানে সংযোজন।

আমি সুযোগ থেকে আপলোডের মান পেতে সক্ষম না হয়ে শেষ করেছি । যদিও এইচটিএমএলে আপলোডটি দৃশ্যমানভাবে নির্দেশ দ্বারা আপডেট করা হয়েছিল, তবুও আমি value স্কোপ.আপলোড দ্বারা এর মানটি অ্যাক্সেস করতে পারিনি। যদিও সুযোগ থেকে আমি এর মান সেট করতে সক্ষম হয়েছি। রহস্যময়, ঠিক ..?

দেখা যাচ্ছে যে নির্দেশের দ্বারা একটি শিশু সুযোগ তৈরি হয়েছিল এবং সন্তানের সুযোগটির নিজস্ব আপলোড রয়েছে ।

সমাধানটি হ'ল আপলোডটির মান ধরে রাখতে কোনও আদিমের পরিবর্তে কোনও অবজেক্ট ব্যবহার করা ।

নিয়ামকটিতে আমার রয়েছে:

$scope.uploadme = {};
$scope.uploadme.src = "";

এবং এইচটিএমএলে:

 <input type="file" fileread="uploadme.src"/>
 <input type="text" ng-model="uploadme.src"/>

নির্দেশিকায় কোনও পরিবর্তন নেই।

এখন, এটি সমস্ত প্রত্যাশার মতো কাজ করে। আমি আমার কন্ট্রোলার থেকে $ স্কোপ.আপলোডমে ব্যবহার করে আপলোডমেসএসসিআর এর মান ধরতে পারি

Comments

হ্যাঁ, এটা ঠিক।

— পের ক্রেস্টেড আরনসন

আমি একই অভিজ্ঞতা নিশ্চিত করি; খুব সুন্দর ডিবাগ এবং ব্যাখ্যা। আমি নিশ্চিত নই কেন নির্দেশিকা তার নিজস্ব সুযোগ তৈরি করছে।

— অ্যাডাম কেসি

বিকল্পভাবে, একটি ইনলাইন ঘোষণা:$scope.uploadme = { src: '' }

— ম্যাক্সথ হাজার হাজার

Answer 5

হাই ছেলেরা আমি একটি নির্দেশিকা তৈরি করি এবং বোভারে নিবন্ধভুক্ত।

এই লিবিব আপনাকে ইনপুট ফাইলকে মডেলিং করতে সহায়তা করবে, কেবল ফাইলের ডেটা ফেরত দেয় না তবে ডেটাআরএল বা বেস 64 ফাইল করে।

{
    "lastModified": 1438583972000,
    "lastModifiedDate": "2015-08-03T06:39:32.000Z",
    "name": "gitignore_global.txt",
    "size": 236,
    "type": "text/plain",
    "data": "data:text/plain;base64,DQojaWdub3JlIHRodW1ibmFpbHMgY3JlYXRlZCBieSB3aW5kb3dz…xoDQoqLmJhaw0KKi5jYWNoZQ0KKi5pbGsNCioubG9nDQoqLmRsbA0KKi5saWINCiouc2JyDQo="
}

https://github.com/mistralworks/ng-file-model/

আশা করি আপনাকে সাহায্য করবে

Comments

$ সুযোগ ব্যবহার করে এটি কীভাবে ব্যবহার করবেন? আমি এটি ব্যবহার করার চেষ্টা করেছি কিন্তু ডিবাগ করার সময় অপরিজ্ঞাত হয়ে পড়েছি।

— গুজরাট সান্টানা

জোজভিরতমে চমৎকার কাজ! এটি ভাল কাজ করে। এবং @ গুজরাটসন্তানায়, যদি <ইনপুট টাইপ = "ফাইল" এনজি-ফাইল-মডেল = "মাই ডকুমেন্ট" /> তবে কেবল $ স্কোপ.মাই ডকুমেন্ট.নাম বা সাধারণভাবে স্কোপ.মি ডকুমেন্ট ব্যবহার করুন any যে কোনও সম্পত্তি> যেখানে সম্পত্তি একের মধ্যে রয়েছে ["সর্বশেষমোডিফায়েড", "সর্বশেষমোডিফায়েড তারিখ", "নাম", "আকার", "প্রকার", "ডেটা"]

— জয় ধর্মেন্দ্র সোলঙ্কি

— ধনুকের

একাধিক ফাইল আপলোডের জন্য ব্যবহারকারী কীভাবে?

— aldrien.h

reader.readAsDataURLপদ্ধতি অপ্রচলিত। আধুনিক কোডে URL.create অবজেক্ট URL () ব্যবহার করা হয় ।

— জর্জিওগ

Answer 6

এটি একটি সামান্য পরিবর্তিত সংস্করণ যা আপনাকে এনজি-মডেল, ব্যবহারের সাথে যেমন করণীয় হয় তেমন সুযোগের মধ্যে বিশিষ্টতার নাম উল্লেখ করতে দেয়:

    <myUpload key="file"></myUpload>

নির্দেশিকা:

.directive('myUpload', function() {
    return {
        link: function postLink(scope, element, attrs) {
            element.find("input").bind("change", function(changeEvent) {                        
                var reader = new FileReader();
                reader.onload = function(loadEvent) {
                    scope.$apply(function() {
                        scope[attrs.key] = loadEvent.target.result;                                
                    });
                }
                if (typeof(changeEvent.target.files[0]) === 'object') {
                    reader.readAsDataURL(changeEvent.target.files[0]);
                };
            });

        },
        controller: 'FileUploadCtrl',
        template:
                '<span class="btn btn-success fileinput-button">' +
                '<i class="glyphicon glyphicon-plus"></i>' +
                '<span>Replace Image</span>' +
                '<input type="file" accept="image/*" name="files[]" multiple="">' +
                '</span>',
        restrict: 'E'

    };
});

Answer 7

লড্যাশ বা আন্ডারস্কোর ব্যবহার করে একাধিক ফাইলের ইনপুটটির জন্য:

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                return _.map(changeEvent.target.files, function(file){
                  scope.fileread = [];
                  var reader = new FileReader();
                  reader.onload = function (loadEvent) {
                      scope.$apply(function () {
                          scope.fileread.push(loadEvent.target.result);
                      });
                  }
                  reader.readAsDataURL(file);
                });
            });
        }
    }
}]);

Answer 8

function filesModelDirective(){
  return {
    controller: function($parse, $element, $attrs, $scope){
      var exp = $parse($attrs.filesModel);
      $element.on('change', function(){
        exp.assign($scope, this.files[0]);
        $scope.$apply();
      });
    }
  };
}
app.directive('filesModel', filesModelDirective);

Comments

ফাইল অবজেক্ট ফিরিয়ে দেওয়ার জন্য কুডোস । অন্যান্য নির্দেশাবলী যা এটিকে একটি ডেটাআরএলে রূপান্তরিত করে এমন ফাইলগুলি আপলোড করতে চান এমন নিয়ন্ত্রকদের পক্ষে এটি কঠিন করে তোলে।

— জর্জিউগ

Answer 9

আমাকে একাধিক ইনপুটতেও একই কাজ করতে হয়েছিল, তাই আমি @ ইন্ডি তাজাহোনো পদ্ধতি আপডেট করেছি। এটি সমস্ত পঠিত ফাইল সমন্বিত একটি অ্যারে প্রদান করে।

  .directive("fileread", function () {
    return {
      scope: {
        fileread: "="
      },
      link: function (scope, element, attributes) {
        element.bind("change", function (changeEvent) {
          var readers = [] ,
              files = changeEvent.target.files ,
              datas = [] ;
          for ( var i = 0 ; i < files.length ; i++ ) {
            readers[ i ] = new FileReader();
            readers[ i ].onload = function (loadEvent) {
              datas.push( loadEvent.target.result );
              if ( datas.length === files.length ){
                scope.$apply(function () {
                  scope.fileread = datas;
                });
              }
            }
            readers[ i ].readAsDataURL( files[i] );
          }
        });

      }
    }
  });

Answer 10

আমাকে এন্ডির নির্দেশনাটি সংশোধন করতে হয়েছিল যাতে আমি সর্বশেষ সংশোধিত, সর্বশেষপরিবর্তিত তারিখ, নাম, আকার, প্রকার এবং ডেটা পেতে পারি পাশাপাশি ফাইলগুলির একটি অ্যারে পেতে সক্ষম হতে পারি। আপনার অতিরিক্ত এই বৈশিষ্ট্যগুলির জন্য যাদের প্রয়োজন তাদের জন্য আপনি এখানে যান।

আপডেট: আমি একটি বাগ খুঁজে পেয়েছি যেখানে আপনি ফাইল (গুলি) নির্বাচন করেন এবং তারপরে আবার নির্বাচন করতে যান তবে পরিবর্তে বাতিল করুন, ফাইলগুলি প্রদর্শিত হওয়ার মতো কখনও কখনও অনির্বাচিত হয় না। তাই আমি এটি ঠিক করতে আমার কোড আপডেট করেছি।

 .directive("fileread", function () {
        return {
            scope: {
                fileread: "="
            },
            link: function (scope, element, attributes) {
                element.bind("change", function (changeEvent) {
                    var readers = [] ,
                        files = changeEvent.target.files ,
                        datas = [] ;
                    if(!files.length){
                        scope.$apply(function () {
                            scope.fileread = [];
                        });
                        return;
                    }
                    for ( var i = 0 ; i < files.length ; i++ ) {
                        readers[ i ] = new FileReader();
                        readers[ i ].index = i;
                        readers[ i ].onload = function (loadEvent) {
                            var index = loadEvent.target.index;
                            datas.push({
                                lastModified: files[index].lastModified,
                                lastModifiedDate: files[index].lastModifiedDate,
                                name: files[index].name,
                                size: files[index].size,
                                type: files[index].type,
                                data: loadEvent.target.result
                            });
                            if ( datas.length === files.length ){
                                scope.$apply(function () {
                                    scope.fileread = datas;
                                });
                            }
                        };
                        readers[ i ].readAsDataURL( files[i] );
                    }
                });

            }
        }
    });

Answer 11

আপনি কিছু একটু বেশি মার্জিত / ইন্টিগ্রেটেড চান, আপনি একটি ব্যবহার করতে পারেন প্রসাধক প্রসারিত করতে inputসমর্থন সহ নির্দেশ type=file। মনে রাখার মূল সতর্কতা হ'ল এই পদ্ধতি আইআই 9 তে কাজ করবে না যেহেতু আই 99 ফাইল এপিআই প্রয়োগ করে নি । এক্সএইচআর এর মাধ্যমে নির্বিশেষে বাইনারি ডেটা আপলোড করতে জাভাস্ক্রিপ্ট ব্যবহার করা স্থানীয়ভাবে আই 99 বা তার আগের ক্ষেত্রে সম্ভব নয় ( ActiveXObjectঅ্যাক্টিভএক্স ব্যবহার করা কেবল সুরক্ষা সমস্যার জন্য জিজ্ঞাসা করছে বলে স্থানীয় ফাইল সিস্টেমে অ্যাক্সেসের ব্যবহার গণনা করা হয় না)।

এই সঠিক পদ্ধতিতে অ্যাংুলার জেএস 1.4.x বা তার পরেও প্রয়োজন হয় তবে আপনি এটির $provide.decoratorপরিবর্তে এটি ব্যবহার করতে সক্ষম হতে পারেন - জন পপির অ্যাঙ্গুলারজেএস স্টাইল গাইডের সাথে সামঞ্জস্য রেখে কীভাবে এটি করা যায় তা প্রদর্শন করার জন্য angular.Module.decoratorআমি এই সূচকটি লিখেছিলাম :

(function() {
    'use strict';

    /**
    * @ngdoc input
    * @name input[file]
    *
    * @description
    * Adds very basic support for ngModel to `input[type=file]` fields.
    *
    * Requires AngularJS 1.4.x or later. Does not support Internet Explorer 9 - the browser's
    * implementation of `HTMLInputElement` must have a `files` property for file inputs.
    *
    * @param {string} ngModel
    *  Assignable AngularJS expression to data-bind to. The data-bound object will be an instance
    *  of {@link https://developer.mozilla.org/en-US/docs/Web/API/FileList `FileList`}.
    * @param {string=} name Property name of the form under which the control is published.
    * @param {string=} ngChange
    *  AngularJS expression to be executed when input changes due to user interaction with the
    *  input element.
    */
    angular
        .module('yourModuleNameHere')
        .decorator('inputDirective', myInputFileDecorator);

    myInputFileDecorator.$inject = ['$delegate', '$browser', '$sniffer', '$filter', '$parse'];
    function myInputFileDecorator($delegate, $browser, $sniffer, $filter, $parse) {
        var inputDirective = $delegate[0],
            preLink = inputDirective.link.pre;

        inputDirective.link.pre = function (scope, element, attr, ctrl) {
            if (ctrl[0]) {
                if (angular.lowercase(attr.type) === 'file') {
                    fileInputType(
                        scope, element, attr, ctrl[0], $sniffer, $browser, $filter, $parse);
                } else {
                    preLink.apply(this, arguments);
                }
            }
        };

        return $delegate;
    }

    function fileInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter, $parse) {
        element.on('change', function (ev) {
            if (angular.isDefined(element[0].files)) {
                ctrl.$setViewValue(element[0].files, ev && ev.type);
            }
        })

        ctrl.$isEmpty = function (value) {
            return !value || value.length === 0;
        };
    }
})();

কেন এটি প্রথম স্থানে করা হয়নি? AngularJS সমর্থনটি কেবল IE9 এর মতো পিছনে পৌঁছানোর উদ্দেশ্যে। যদি আপনি এই সিদ্ধান্তের সাথে একমত নন এবং মনে করেন যে এগুলি যেভাবেই করা উচিত ছিল, তবে ওয়েগনটি অ্যাংুলার 2+ এ ঝাঁপুন কারণ আরও ভাল আধুনিক সমর্থন আক্ষরিক অর্থে কেন কৌনিক 2 বিদ্যমান exists

বিষয়টি হ'ল (যেমনটি আগেই উল্লেখ করা হয়েছিল) যে ফাইল এপিআই সমর্থন না করে সঠিকভাবে এটি করা আমাদের বেসলাইন আইই 9 হ'ল এবং এই উপাদানটিকে পলিফিলিং দেওয়া কোরটির পক্ষে প্রশ্নের বাইরে নয় given

অতিরিক্তভাবে এই ইনপুটটিকে এমনভাবে পরিচালনা করার চেষ্টা করা হয়েছে যা ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ নয় কেবল তৃতীয় পক্ষের সমাধানের জন্য এটি আরও শক্ত করে তোলে, এখন মূল সমাধানটি লড়াই / অক্ষম / কার্যক্ষম করতে হবে।

...

আমরা # 1236 বন্ধ করার সাথে সাথে এটি বন্ধ করতে যাচ্ছি। কৌনিক 2 আধুনিক ব্রাউজারগুলিকে সমর্থন করার জন্য তৈরি হচ্ছে এবং সেই ফাইলটির সাহায্যে সহজেই উপলব্ধ হবে।

Answer 12

এটি ব্যবহার করে দেখুন, এটি আমার জন্য কৌনিক জেএসে কাজ করছে

    let fileToUpload = `${documentLocation}/${documentType}.pdf`;
    let absoluteFilePath = path.resolve(__dirname, fileToUpload);
    console.log(`Uploading document ${absoluteFilePath}`);
    element.all(by.css("input[type='file']")).sendKeys(absoluteFilePath);