Переход кнопки преобразования ввода файла в кнопку загрузки с именем файла в Angular

Я хочу загрузить файл с помощью кнопки просмотра, и когда файл выбран, кнопка просмотра должна исчезнуть, а вместо этого кнопка загрузки должна быть рядом с выбранным именем файла.

Как мне это сделать в Angular 6?

Вот что я сделал до сих пор. Сделали первый скрин.

HTML

  <div class = "pr-3 pt-2">
    <h4>Choose an excel file to upload</h4>
  </div>
  <div>
    <label for = "upload" class = "file-upload-label">Browse</label>
    <input type = "file" placeholder = "Upload file" accept = ".xlsx" (change) = "incomingfile($event)" class = "file-upload-input" id = "upload">
  </div>

Функция события входящего файла

 incomingfile(event) {
    this.file = event.target.files[0];
    this.filePresent = true;
  }

Переход кнопки преобразования ввода файла в кнопку загрузки с именем файла в Angular

Возможный дубликат Загрузка файла Angular-5

Abhishek Kumar 09.08.2018 11:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
101
1

Ответы 1

Базовая логика -----> ДЕМО

HTML:

<div class = "pr-3 pt-2">
    <h4>Choose an excel file to upload</h4>
</div>
<label *ngIf = "!filePresent">
            <input #fileInput  type = "file" (change) = "incomingfile($event)" />
            <span>Browse File</span>
</label>
<label *ngIf = "filePresent">
            <label >{{fileName}}</label>
<button (click) = "uploadFile()"><span> Upload</span></button>
</label>

TS:

  file: File;
  filePresent: boolean = false;
  fileName: string = ''

  incomingfile(event) {
    this.file = event.target.files[0];

    this.fileName = this.file.name;

    this.filePresent = true;
  }

  uploadFile() {
    if (this.file) {
      console.info(this.file);
    }
  }

Другие вопросы по теме