कोणीय 2 में इनपुट टैग फ़ाइल प्रकार के साथ चयनित फ़ाइल को रीसेट कैसे करें?

Question

यह मेरा इनपुट टैग कैसा है:

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

मैं कोणीय 2 में चयनित फ़ाइल को रीसेट करना चाहता हूं। मदद की बहुत सराहना की जाएगी। यदि आपको अधिक विवरण की आवश्यकता है, तो मुझे बताएं।

पी.एस.

मैं $eventमापदंडों से फ़ाइल विवरण प्राप्त कर सकता हूं और इसे टाइपस्क्रिप्ट चर में सहेज सकता हूं , लेकिन यह चर इनपुट टैग के लिए बाध्य नहीं है।

Comments

जब आप रीसेट कहते हैं, तो वास्तव में आपका क्या मतलब है। क्या आप एक plnkr.co बना सकते हैं और पोस्ट कर सकते हैं कि आपको किस समस्या का सामना करना पड़ रहा है

— अभिनव

Answer 1

आप 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विशेषता है केवल पढ़ने के लिए , तो यह असंभव है सिर्फ सरणी से आइटम हटाने के लिए। यहां प्लंकर काम कर रहा है ।

Comments

क्या यह पर्याप्त मूल्य है this.myInputVariable.nativeElement.value = "";? /

— परदीप जैन

@PardeepJain हाँ, यह फ़ाइल इनपुट से चयनित फ़ाइल को साफ़ करता है, यदि आप वही खोज रहे हैं जो आप देख रहे हैं।

— स्टीफन स्वकोटा

myInputVariableवास्तव में प्रकार का हैElementRef

— phil294

क्या होगा यदि मेरे पास "इनपुट प्रकार = फ़ाइल" की एक चर संख्या है, ताकि आईडी गतिशील रूप से उत्पन्न हो?

— अल्बर्ट हेंड्रिक्स

कोणीय 8 में @ दृश्य ('delDocModal', {static: false}) delDocModal: ElementRef;

Answer 2

कोणीय ५

एचटीएमएल

<input type="file" #inputFile>

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

टेम्पलेट

@ViewChild('inputFile') myInputVariable: ElementRef;

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

बटन की आवश्यकता नहीं है। आप परिवर्तन की घटना के बाद इसे रीसेट कर सकते हैं, यह सिर्फ प्रदर्शन के लिए है

Comments

मैंने इस संस्करण का उपयोग किया और यह मेरे लिए अच्छा काम करता है - धन्यवाद @Admir

— user1288395

Answer 3

इसे प्राप्त करने का एक तरीका यह है कि आप अपने इनपुट को <form>टैग में लपेटें और उसे रीसेट करें।

मैं थ्रू फॉर्म को 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=preview

Comments

क्या हम .reset()viewChild पर विधि का उपयोग कर सकते हैं ??

— परदीप जैन

हेलो एडमर ... क्या आप इस लिंक पर सवाल के साथ मेरी मदद कर सकते हैं ... stackoverflow.com/questions/48769015/…

— Heena

Answer 4

मैं आमतौर पर चयनित फ़ाइलों को कैप्चर करने के बाद अपना फ़ाइल इनपुट रीसेट करता हूं। एक बटन को पुश करने की आवश्यकता नहीं है, आपके पास उस $eventवस्तु में आवश्यक सब कुछ है जो आप पास कर रहे हैं onChange:

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

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

विभिन्न वर्कफ़्लो, लेकिन ओ.पी. एक बटन धक्का का उल्लेख नहीं है एक आवश्यकता है ...

Comments

बहुत साफ! मुझे व्यक्तिगत रूप से लगता है कि यह स्वीकृत उत्तर होना चाहिए।

— माज़ेन एल्कशेफ़

Answer 5

लघु संस्करण प्लंकर :

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 {


}

और मुझे लगता है कि अधिक सामान्य मामला बटन का उपयोग नहीं करना है, लेकिन स्वचालित रूप से रीसेट करना है। कोणीय टेम्पलेट स्टेटमेंट जंजीरों की अभिव्यक्ति का समर्थन करते हैं इसलिए प्लंकर :

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 );
  }

}

और दिलचस्प लिंक क्यों मूल्य परिवर्तन पर कोई पुनरावृत्ति नहीं है।

Answer 6

मुझे लगता है कि यह सरल है, # उपयोग करने योग्य है

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

"variable.value = null" विकल्प भी उपलब्ध है

Answer 7

मेरे मामले में मैंने इसे नीचे दिया है:

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

मैं इसे घटक में एक ViewChild बनाने के बजाय HTML में #fileInput का उपयोग करके रीसेट कर रहा हूं। जब भी "अपलोड फ़ाइल" बटन पर क्लिक किया जा रहा है, पहले यह #fileInput को रीसेट करता है और फिर #fileInput.click()फ़ंक्शन को ट्रिगर करता है। यदि रीसेट करने के लिए किसी भी अलग बटन की जरूरत है तो क्लिक पर #fileInput.value=''निष्पादित किया जा सकता है।

Answer 8

टेम्पलेट:

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

घटक:

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

Answer 9

यदि आप ng2-file-upload के साथ समस्या का सामना कर रहे हैं,

HTML:

<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 = '';
   };

Answer 10

मैंने इस इनपुट टैग को फॉर्म टैग में जोड़ा है।

 <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'] = "";
              }
      }
    }

दस्तावेज़ को प्रिंट करें। कंसोल में सुधार करें और आप विचार प्राप्त कर सकते हैं।

Answer 11

आप टेम्पलेट संदर्भ चर का उपयोग कर सकते हैं और एक विधि को भेज सकते हैं

एचटीएमएल

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

अंग

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

Answer 12

मैं बहुत सरल aproach का उपयोग कर रहा हूँ। फ़ाइल अपलोड होने के बाद, मैं शीघ्र ही इनपुट इनपुट को हटा देता हूं, * ngIf का उपयोग करके। यह इनपुट फ़ील्ड को डोम से हटा दिया जाएगा और फिर से जोड़ा जाएगा, फलस्वरूप यह एक नया नियंत्रण है, और इसलिए यह सशक्त है:

showUploader: boolean = true;

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

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

Answer 13

<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;
    }
  }

Comments

क्या आप अपने कोड पर एक छोटा विवरण प्रदान कर सकते हैं, यह बताता है कि यह कैसे काम करता है?

— जैकब नेल्सन

एमडीएन के अनुसार इसका खराब समर्थन है। संदर्भ के लिए इस URL developer.mozilla.org/en-US/docs/Web/API/Event/srcElement @JacobNelson

— मोहम्मद गाडी