# Invoking file upload event by button

**URL:** <https://forum.inductiveautomation.com/t/invoking-file-upload-event-by-button/83967>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [January 9, 2024, 2:15pm UTC](https://forum.inductiveautomation.com/t/invoking-file-upload-event-by-button/83967 "2024-01-09T14:15:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jiri\_Pise](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@Jiri\_Pise](https://forum.inductiveautomation.com/u/Jiri_Pise)\
**Post date:** [January 9, 2024, 2:15pm UTC](https://forum.inductiveautomation.com/t/invoking-file-upload-event-by-button/83967/1 "2024-01-09T14:15:13Z")

</div>

Hi,

I have a button and a file upload components on a view. I want to press the button and call a script which will invoke the file upload components event (open the choise of the file).

Is there a way to do it like this? Can I somehow inwoke events on other components in script (or something else)? Maybe like pressing one button which will also "press" the other one?

Thank you.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [January 9, 2024, 2:27pm UTC](https://forum.inductiveautomation.com/t/invoking-file-upload-event-by-button/83967/2 "2024-01-09T14:27:43Z")

</div>

See "Classic mistake" in post #2 of [Run component A event from component B event](https://forum.inductiveautomation.com/t/run-component-a-event-from-component-b-event/83925).

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [January 9, 2024, 2:27pm UTC](https://forum.inductiveautomation.com/t/invoking-file-upload-event-by-button/83967/3 "2024-01-09T14:27:59Z")

</div>

That would be a front-end operation (in the browser), and there's no direct support for supplying the javascript you would need. On top of that, browsers tightly control what can be done with file upload components, as they represent a huge security hole that malware would love to exploit.

Why do you need this?

---

<div class="post-metadata">

**Author:** ![Jiri\_Pise](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@Jiri\_Pise](https://forum.inductiveautomation.com/u/Jiri_Pise)\
**Post date:** [January 9, 2024, 2:51pm UTC](https://forum.inductiveautomation.com/t/invoking-file-upload-event-by-button/83967/4 "2024-01-09T14:51:17Z")

</div>

The file upload component doesnt really suport much customization. I want it to look like a button with my custom text on it. I know some css could fix this but its way more work then doing it as I explained. Also I thought it might be helpful to know for some future use..

If you have some other ways to do it let me know.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [January 9, 2024, 2:53pm UTC](https://forum.inductiveautomation.com/t/invoking-file-upload-event-by-button/83967/5 "2024-01-09T14:53:04Z")

</div>

> [@Jiri\_Pise](#):
>
> some css could fix this

Pretty sure this is the reliable/maintainable path forward. Sorry.

Do keep in mind that breaking user's expectations on how browser components look and behave is a recipe for disaster.

---

<div class="post-metadata">

**Author:** ![Jiri\_Pise](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@Jiri\_Pise](https://forum.inductiveautomation.com/u/Jiri_Pise)\
**Post date:** [January 9, 2024, 2:57pm UTC](https://forum.inductiveautomation.com/t/invoking-file-upload-event-by-button/83967/6 "2024-01-09T14:57:50Z")

</div>

I didnt find the answer there.

I dont need to change value or count something.I want to open the actual file upload. I dont know if I can somehow access some function that will do it or something. (The actual openong is the problem)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 9, 2024, 6:26pm UTC](https://forum.inductiveautomation.com/t/invoking-file-upload-event-by-button/83967/7 "2024-01-09T18:26:12Z")

</div>

You can't. The file upload component is the only way to do this in a supported manner.

---

<div class="post-metadata">

**Author:** ![Subin\_Adhikari](https://avatars.discourse-cdn.com/v4/letter/s/898d66/32.png) [@Subin\_Adhikari](https://forum.inductiveautomation.com/u/Subin_Adhikari)\
**Post date:** [October 7, 2026, 2:33pm UTC](https://forum.inductiveautomation.com/t/invoking-file-upload-event-by-button/83967/8 "2026-10-07T14:33:57Z")

</div>

Since I absolutely needed this I had to inject JS. use this post as a reference

> [@Perspective Table Context Menu - activated rowData](https://forum.inductiveautomation.com/t/perspective-table-context-menu-activated-rowdata/96051/13):
>
> Since I absolutely needed this right now, was able to do it via following code. prop\_name = "selected\_row" #this is the page custom property to write value to. code = """\<img style='display:none' src='/favicon.ico' onload=\" const view = [...window.\_\_client.page.views.\_data.values()].find(v =\> v.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; const tableId = '#"""+str(value)+"""'; let highlightedRow = null; function se…

The code to invoke, file upload from a button would be.

```
code = """<img style='display:none' src='/favicon.ico' onload="
    const eventButton = document.getElementById('btn_import');
    if (eventButton) {
        eventButton.addEventListener('click', function() {
            const file_upload_component = document.getElementById('import_file');
            if (file_upload_component) {
                file_upload_component.click();
            }
        });
    }
"></img>""".replace("\\n", "").replace("\\t", "")

return code

```

Make sure to add a domId ( [Please add ids to perspective components for writing tests - #2 by ggross](https://forum.inductiveautomation.com/t/please-add-ids-to-perspective-components-for-writing-tests/46949/2) ) to both the component.

Above function used btn\_import as a button and import\_file as a file upload domId.

![file_import_with_button](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/c/0c615f1d6f6ff70c6f489f87960ca6c80d1311bb.gif)

Better way to do would be [Perspective Table Context Menu - activated rowData - #14 by nminchin](https://forum.inductiveautomation.com/t/perspective-table-context-menu-activated-rowdata/96051/14) after IA Stops the Injecting.