How to rename input file button in Angular 7?

Asked

Viewed 343 times

-2

Watch the image;

inserir a descrição da imagem aqui

Now look at the code;

  <div class="form-control pl-0" style="border: 0px solid">
            <input type="file"  name="arquivoMov" id="arquivoMov" accept=".pdf"
              (change)="selecionarArquivoMovManual($event)">
    </div>

Hey, guys, good afternoon. Guys, how do I rename the html input file button in Angular? Because this button behaves in every browser (IE, Mozile, Chrome and Safari) with the different name.

I would put it as fixed so there is no change when going to different browser.

I found this link, to see if facilitate help me, please.

Change input text type=file with filename

This is the current behavior of figure 1

inserir a descrição da imagem aqui

I made some changes to mask the component, but it was not the same with the original nor figure 1

  <button>
                  <label for="arquivoMov">
                    Escolher ficheiro
                      <input type="file"  name="arquivoMov" id="arquivoMov" accept=".pdf"
                        (change)="selecionarArquivoMovManual($event)" hidden>
                  </label>
              </button>

She got this behavior from figure 2

inserir a descrição da imagem aqui

The problem now is to try to fix the button, that by selecting the button it manages to catch the file name.

angular

  • Other: https://answall.com/questions/119760/stilizar-input-type-file

  • @Leandrade I thank you for your two suggestions, it is not a duplicate because I want to rename the input file using typescript, your second suggestion will not help much because my problem is not to style input but put the name of the input as fixed;

  • If what you want is to rename the button that is clicked to open the window, there is no way, because who renders the button is the browser, and each browser renders a way, the only thing you can do is to style the input as the examples of links.

  • This question is not duplicate, I just edit and make my question more clear!!!!!

  • @Maniero I don’t know if you’re a moderator, but I’d like someone to remove from my top post of her by claiming that she’s a dub, because she’s not.

  • 4

    Note that even if the code changes slightly to your specific case, what characterizes the duplicate is the answer of the original being the solution to the problem, which is the case here. Anyway, duplicates are useful as indexers.

  • All right, I didn’t know that, thank you very much for the information.

Show 2 more comments

1 answer

0

In the component class;

nomeArquivoSelecionado: string = "";

  selecionarArquivoMovManual(event) {
    //console.log(event.target.files[0].name);
    this.arquivoMovManual = event.target.files[0];
    this.nomeArquivoSelecionado = this.arquivoMovManual.name;
  }

On the website;

<button>
              <label for="arquivoMov">
                Escolher ficheiro
                  <input type="file"  name="arquivoMov" id="arquivoMov" accept=".pdf"
                    (change)="selecionarArquivoMovManual($event)" hidden>
              </label>


          </button> 
          {{ nomeArquivoSelecionado }}

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.