Why I cannot open file dialog with typescript faking <a> link for <input type=file>

Question

Here's my situation, code and reference from Stackoverflow.

I want to trigger open dialog and I found references but they don't seem to work;

First my code snippet:

                <i class="fas fa-upload uploadicon"></i><br>
                Drop document here or 
                <a href="javascript:;" class="dropimgmessage" id="uploadLink" name="uploadLink" ngbTooltip="Click to upload a document or drag here!" placement="top">browse</a>
                <input type="file" class="form-control fileuploader" #fileInput  id="api-file-container" formControlName="docUpload" name="api-file-container" (change)="handleFileInput($event.target.files)">
                <span class="dropimagetypemsg">Supports PDF, JPG, PNG, GIF</span>

Now my typescript:

declaration of variables:

public uploadlink: HTMLElement;
public fileinput: HTMLElement;

------

ngAfterViewInit() {

    this.uploadlink = document.querySelector('#uploadLink') as HTMLElement;
    this.fileinput = document.querySelector('#api-file-container') as HTMLElement;

    this.uploadlink.addEventListener('click', (e: Event) => {
      e.preventDefault();
      this.fileinput.click();
    });

}

What happens is that the code fires, but never goes into the fragment:

this.uploadlink.addEventListener('click', (e: Event) => {

it stops at the .addEventListener.

So I tried to call a function onClick from the HTML like so.

public fakeFileInput(e: Event): void {

    console.log('Fake Input to File Upload: ', e);
     if(this.uploadlink.getAttribute('text') === 'browse') {
       console.log('EVENT browse upload was click: ');
       this.uploadlink.setAttribute('defaultPrevented', 'false');
       this.fileinput.click();
     }

}

by adding that call to the function like so:

<a href="javascript:;" (click)="fakeFileInput($event)" class="dropimgmessage" id="uploadLink" name="uploadLink" ngbTooltip="Click to upload a document or drag here!" placement="top">browse</a>

Now that works, but, I get an error here: File chooser dialog can only be shown with a user activation.

My References:

Calling a typescript method from your html button onclick event

How to open a file / browse dialog using javascript?

How to make a link act as a file input

And on JSFiddle - http://jsfiddle.net/7aGEv/3/

So, where am I going wrong?

Thank you.

hiddenuser.2524 · Accepted Answer · 2020-09-26 06:21:10Z

5

You don't need any JS to trigger a file upload without a button, you can simply use a label for that:

<label for="uploadInput">browse</label>
<input id="uploadInput" type="file" style="display:none" />

answered Sep 26, 2020 at 6:21

hiddenuser.2524

5,0081 gold badge19 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter The Angular Dude Over a year ago

Tudor, NO WAY! OMG! Thank you for such a simple answer. You got my vote, sir!

xdumaine · Accepted Answer · 2020-09-25 22:42:40Z

0

You can't programmatically trigger a file upload to open without a user interaction in the stack (which is controlled by the browser). This is a security feature of browsers to prevent malicious websites from tricking users into uploading files.

answered Sep 25, 2020 at 22:42

xdumaine

10.4k7 gold badges65 silver badges107 bronze badges

3 Comments

Peter The Angular Dude Over a year ago

OK, then, the design I have is this... that "browse" needs to be a word (hyperlink) as PMG does "NOT" want a button. Thoughts? They are staunch on this and will not budge. That's my problem

Peter The Angular Dude Over a year ago

Xdumaine, then why does the JS Fiddle work? Link above.

xdumaine Over a year ago

Because it's got user context in the stack.

Collectives™ on Stack Overflow

Why I cannot open file dialog with typescript faking <a> link for <input type=file>

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related