অ্যাঙ্গুলার 2 এ ইনপুট ট্যাগ ফাইল টাইপ সহ নির্বাচিত ফাইলটি কীভাবে পুনরায় সেট করবেন?

Question 1

আমার ইনপুট ট্যাগটি এমনভাবে দেখায়:

<input type="file" placeholder="File Name" name="filename" (change)="onChange($event)">
<button>Reset</button>

আমি নির্বাচিত ফাইলটি কৌণিক ২ এ পুনরায় সেট করতে চাই Help সাহায্যের প্রশংসা করা হবে। আপনার আরও বিশদ প্রয়োজন হলে আমাকে জানান Let

পুনশ্চ

আমি $eventপ্যারামিটারগুলি থেকে ফাইলের বিশদ পেতে পারি এবং এটি কোনও টাইপ স্ক্রিপ্ট ভেরিয়েবলে সংরক্ষণ করতে পারি, তবে এই পরিবর্তনশীলটি ইনপুট ট্যাগের সাথে আবদ্ধ নয়।

Question 2

আপনি ViewChildআপনার উপাদান ইনপুট অ্যাক্সেস ব্যবহার করতে পারেন । প্রথমত, আপনাকে #someValueআপনার ইনপুটটিতে যুক্ত করতে হবে যাতে আপনি এটি উপাদানটিতে পড়তে পারেন:

<input #myInput type="file" placeholder="File Name" name="filename" (change)="onChange($event)">

তারপর আপনার উপাদানের আপনি আমদানি প্রয়োজন ViewChildথেকে @angular/core:

import { ViewChild } from '@angular/core';

তারপরে আপনি ViewChildটেমপ্লেট থেকে ইনপুটটি অ্যাক্সেস করতে ব্যবহার করুন:

@ViewChild('myInput')
myInputVariable: ElementRef;

আপনি এখন myInputVariableনির্বাচিত ফাইলটি পুনরায় সেট করতে ব্যবহার করতে পারেন কারণ এটি ইনপুট সম্পর্কিত একটি রেফারেন্স #myInput, উদাহরণস্বরূপ এমন পদ্ধতি তৈরি reset()করুন clickযা আপনার বোতামের ইভেন্টে ডাকা হবে :

reset() {
    console.log(this.myInputVariable.nativeElement.files);
    this.myInputVariable.nativeElement.value = "";
    console.log(this.myInputVariable.nativeElement.files);
}

প্রথমে console.logআপনি নির্বাচিত ফাইলটি মুদ্রণ করবেন, দ্বিতীয়টি console.logখালি অ্যারে মুদ্রণ করবে কারণ this.myInputVariable.nativeElement.value = "";ইনপুট থেকে নির্বাচিত ফাইল (গুলি) মুছে দেয়। আমাদের this.myInputVariable.nativeElement.value = "";ইনপুটটির মানটি পুনরায় সেট করতে ব্যবহার করতে হবে কারণ ইনপুটটিরFileList বৈশিষ্ট্যটি কেবল পঠনযোগ্য , তাই অ্যারে থেকে কেবল আইটেমটি সরিয়ে ফেলা অসম্ভব। এখানে কাজ করছেন প্লাঙ্কার ।

Question 3

কৌণিক 5

এইচটিএমএল

<input type="file" #inputFile>

<button (click)="reset()">Reset</button>

টেমপ্লেট

@ViewChild('inputFile') myInputVariable: ElementRef;

reset() {
    this.myInputVariable.nativeElement.value = '';
}

বোতামের দরকার নেই। পরিবর্তন ইভেন্টের পরে আপনি এটি পুনরায় সেট করতে পারেন, এটি কেবল প্রদর্শনের জন্য

Question 4

এটি অর্জনের একটি উপায় হ'ল আপনার ইনপুটটিকে <form>ট্যাগে মোড়ানো এবং এটি পুনরায় সেট করা।

আমি THR ফর্ম সংযোজনের বিবেচনায় করছি না NgFormবা FormControlপারেন।

@Component({
  selector: 'form-component',
  template: `
    <form #form>
      <input type="file" placeholder="File Name" name="filename">
    </form>
    <button (click)="reset()">Reset</button>
`
})
class FormComponent {



  @ViewChild('form') form;


  reset() {
    this.form.nativeElement.reset()
  }
}

https://plnkr.co/edit/Ulqh2l093LV6GlQWKkUA?p= পূর্বরূপ

Question 5

আমি সাধারণত নির্বাচিত ফাইলগুলি ক্যাপচারের পরে আমার ফাইল ইনপুট পুনরায় সেট করি। বোতামটি চাপ দেওয়ার দরকার নেই, আপনি $eventযে জিনিসটিতে যাচ্ছেন তাতে আপনার প্রয়োজনীয় সমস্ত কিছু রয়েছে onChange:

onChange(event) {
  // Get your files
  const files: FileList = event.target.files;

  // Clear the input
  event.srcElement.value = null;
}

বিভিন্ন কর্মপ্রবাহ, তবে ওপিতে একটি বোতাম চাপানো একটি প্রয়োজনীয়তা উল্লেখ করে না ...

Question 6

সংক্ষিপ্ত সংস্করণ প্লঙ্কার :

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
      <input #myInput type="file" placeholder="File Name" name="filename">
      <button (click)="myInput.value = ''">Reset</button>
  `
})
export class AppComponent {


}

এবং আমি মনে করি আরও সাধারণ ক্ষেত্রে হ'ল বোতামটি ব্যবহার না করে স্বয়ংক্রিয়ভাবে পুনরায় সেট করা। কৌণিক টেমপ্লেট বিবৃতি শৃঙ্খলাকৃতি এক্সপ্রেশন সমর্থন করে তাই Plunker :

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
      <input #myInput type="file" (change)="onChange(myInput.value, $event); myInput.value = ''" placeholder="File Name" name="filename">
  `
})
export class AppComponent {

  onChange(files, event) {
    alert( files );
    alert( event.target.files[0].name );
  }

}

এবং কেন মান পরিবর্তনে কোনও পুনরাবৃত্তি নেই তা সম্পর্কে আকর্ষণীয় লিঙ্ক ।

Question 7

আমি মনে করি এটির সহজ, ব্যবহারযোগ্য # পরিবর্তনশীল

<input #variable type="file" placeholder="File Name" name="filename" (change)="onChange($event); variable.value='' ">
<button>Reset</button>

"পরিবর্তনশীল.মূল্য = নাল" বিকল্পটি উপলব্ধ

Question 8

আমার ক্ষেত্রে আমি এটি নীচের মতো করেছিলাম:

 <input #fileInput hidden (change)="uploadFile($event.target.files)" type="file" />
 <button mat-button color="warn" (click)="fileInput.value=''; fileInput.click()"> Upload File</button>

আমি উপাদানগুলিতে একটি ভিউচিল্ড তৈরির পরিবর্তে এইচটিএমএলে # ফাইল-ইনপুট ব্যবহার করে এটি পুনরায় সেট করছি। যখনই "আপলোড ফাইল" বোতামটি ক্লিক করা হচ্ছে, প্রথমে এটি # ফাইল-ইনপুট পুনরায় সেট করে এবং তারপরে #fileInput.click()ক্রিয়াকলাপটি ট্রিগার করে। রিসেট করার জন্য যদি কোনও পৃথক বাটন প্রয়োজন হয় তবে ক্লিকের উপর #fileInput.value=''চাপানো কার্যকর করা যেতে পারে।

Question 9

টেমপ্লেট:

<input [(ngModel)]="componentField" type="file" (change)="fileChange($event)" placeholder="Upload file">

উপাদান:

fileChange(event) {
        alert(this.torrentFileValue);
        this.torrentFileValue = '';
    }
}

Question 10

আপনি যদি এনজি 2-ফাইল-আপলোড নিয়ে সমস্যার মুখোমুখি হন,

এইচটিএমএল:

<input type="file" name="myfile" ` **#activeFrameinputFile** `ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />

উপাদান

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@ViewChild('`**activeFrameinputFile**`') `**InputFrameVariable**`: ElementRef;

this.frameUploader.onSuccessItem = (item, response, status, headers) => {
    this.`**InputFrameVariable**`.nativeElement.value = '';
   };

Question 11

আমি এই ইনপুট ট্যাগটি ফর্ম ট্যাগে যুক্ত করেছি ..

 <form id="form_data">
  <input  type="file" id="file_data"  name="browse"
  (change)="handleFileInput($event, dataFile, f)"  />
</form>

আমি কৌনিক টাইপস্ক্রিপ্ট, আমি রেখার নীচে যুক্ত করেছি, নথির ফর্মগুলিতে আপনার ফর্ম আইডি পেয়েছি এবং মানটি শূন্য হিসাবে তৈরি করি।

    for(let i=0; i<document.forms.length;i++){
      if(document.forms[i].length > 0){
             if(document.forms[i][0]['value']){ //document.forms[i][0] = "file_data"
                 document.forms[i][0]['value'] = "";
              }
      }
    }

কনসোলে ডকুমেন্ট.ফর্মগুলি মুদ্রণ করুন এবং আপনি ধারণা পেতে পারেন ..

Question 12

আপনি টেম্পলেট রেফারেন্স ভেরিয়েবল ব্যবহার করতে পারেন এবং কোনও পদ্ধতিতে প্রেরণ করতে পারেন

এইচটিএমএল

<input #variable type="file" placeholder="File Name" name="filename" (change)="onChange($event, variable);">

উপাদান

onChange(event: any, element): void {
    // codes
    element.value = '';
  }

Question 13

আমি এএ খুব সাধারণ অ্যাপ্রোচ ব্যবহার করছি। কোনও ফাইল আপলোড হওয়ার পরে, আমি খুব শীঘ্রই * এনজিআইএফ ব্যবহার করে ইনপুট নিয়ন্ত্রণটি সরিয়ে ফেলি। এর ফলে ইনপুট ক্ষেত্রটি ডোম থেকে সরানো হবে এবং পুনরায় যুক্ত হবে, ফলস্বরূপ এটি একটি নতুন নিয়ন্ত্রণ, এবং তাই এটি নিখরচায়:

showUploader: boolean = true;

async upload($event) {
  await dosomethingwiththefile();
  this.showUploader = false;
  setTimeout(() =>{ this.showUploader = true }, 100);
}

<input type="file" (change)="upload($event)" *ngIf="showUploader">

স্নিপেট প্রসারিত করুন

Question 14

<input type="file" id="image_control" (change)="validateFile($event)" accept="image/gif, image/jpeg, image/png" />

validateFile(event: any): void {
    const self = this;
    if (event.target.files.length === 1) {
      event.srcElement.value = null;
    }
  }