Angular2 Form works in Index.html but does not work in component.html

Question

Why is this Upload File form example working in Index.html and does not work in any component.html file?

If i move it to any component.html clicking Add File does not even open the browse dialog.

  <form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
        <div id="drop">
                <a>Add File</a> Drag and Drop
                <input type="file" name="upl" />
        </div>

        <ul id="uploadList"></ul>
  </form>

Edit: I must mention that i import the js files only in Index.html, and i'm not importing also in System.js or angular-cli.build.js

In Index.html one of the references is:

<script src="assets/js/uploadScript.js"></script>

And this is the code from uploadScript.js that should open the browser dialog:

$('#drop a').click(function(){
    $(this).parent().find('input').click();
});

I'm more surprised, that the link Add File works for you opens the dialog..are you sure? For me it works in component and in index.html, but I have to click to the input..tested in Chrome and IE — Petr Adam, Jul 11 '16 at 12:41
Yes it is working in Index.html. I imported the files from an old project and trying to implement to angular2 component. Look at my Edit. Maybe that is the cause? — Cristian Muscalu, Jul 11 '16 at 12:57
well, then in your javascript files, there must be somewhere place, which handles the "Add File" link and makes it working..something like here in first answer http://stackoverflow.com/questions/10216331/open-file-dialog-box-on-a-tag try to find that code and post it here — Petr Adam, Jul 11 '16 at 12:59
Edited again. I posted the code that i think opens the dialog. But if it's imported in Index.html doesn't that get used in all Angular2 components automatically without having to import them in system.js? — Cristian Muscalu, Jul 11 '16 at 13:11

Petr Adam · Accepted Answer · 2016-07-11T14:08:12.827

1

Your code in uploadScript.js is (I guess) initialized when the DOM is ready, thats basic how JQuery initialization works. But since your component is not yet in the DOM, nothing is found.

You need to put the initialization code directly into your component, so its called at the correct time, when the form is actually rendered in DOM.

Try to change your to component something like this:

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

// reference to jQuery
declare var $: any;

@Component({
    selector: 'my-component',
    template: `

<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
    <div id="drop">
        <a (click)="addFile()">Add File</a> Drag and Drop
        <input type="file" name="upl" />
    </div>

    <ul id="uploadList"></ul>
</form>

`
})
export class JQueryComponent
{
    // get the ElementRef
    constructor(private _elRef: ElementRef)
    {
    }

    public addFile(): void
    {
        $(this._elRef.nativeElement).find('#drop a').parent().find('input').click();
    }
}

The important part is to use Angular 2 (click) bound directly to the Add File anchor. ElementRef provides a reference to your html DOM element, which can be used to simulate actual click event on the input type="file"

edited Jul 11 '16 at 14:08

answered Jul 11 '16 at 13:39

Petr Adam

1,425
11
23

Or here is another solution without jQuery using @ViewChild, you can check it too http://stackoverflow.com/questions/36639486/angular2-manually-firing-click-event-on-particular-element – Petr Adam Jul 11 '16 at 14:08
Thanks. This triggers the browse event, but i'm afraid that is just the tip of the iceberg! For the whole upload thing to work, it uses more libraries like : `jquery.knob.js, jquery.ui.widget.js, jquery.iframe-transport.js, query.fileupload.js, initializer.js and a upload.php` and my gut tells me i should just forget the whole thing and look for a angular2 upload button (which i did but could not make any work).... , unless u think there is a simple way to have them work somehow? – Cristian Muscalu Jul 11 '16 at 18:05
1

If you forget the whole thing and do it in angular 2, it will definitely help you in the future to understand how angular2 works etc..but as I said, if you dont want to rewrite the whole logic, just make sure, that at the moment, you initialize your jQuery code, you already have your DOM for directive ready...that could do the whole magic. Look for ngAfterViewInit() of your Component - thats the place to copy & paste the whole jquery upload file logic – Petr Adam Jul 11 '16 at 18:28
Thanks, but i will drop the jquery for now. I accepted your answer because it's pointless to go on this road any further. – Cristian Muscalu Jul 11 '16 at 18:32

Angular2 Form works in Index.html but does not work in component.html

1 Answers1