topic Re: File Upload widget custom styling (Thingworx 9.6) in ThingWorx Developers

File Upload widget custom styling (Thingworx 9.6)

JustinOberle1 — Mon, 15 Dec 2025 20:50:49 GMT

When I upload a file, it shows the file below with an "x" to remove the file as well. However, I need to remove this "x" because there is no bindable event to removing an item. Instead, I have a button to clear the items which then triggers some other services.

How do I remove the "x" button from this widget as shown below? Thingworx 9.6

Re: File Upload widget custom styling (Thingworx 9.6)

Rocko — Wed, 17 Dec 2025 08:57:50 GMT

The x removes the file from the list of files to be uploaded, in case you accidentally added something to the list. It does not need to be bound to work.

Re: File Upload widget custom styling (Thingworx 9.6)

PEHOWE — Wed, 17 Dec 2025 13:36:19 GMT

Hello @JustinOberle1 ,

As Rocko, indicated the "X" is used to update the file which is selected for Upload. It is has no other action then to remove the selected file name from the widget.
In your post you indicate that you have a button which does this action. What other operations are required for removing the file selected in the widget.

Regards,

Pehowe

Re: File Upload widget custom styling (Thingworx 9.6)

JustinOberle1 — Thu, 18 Dec 2025 15:27:09 GMT

When a user clicks the "x" it removes the file from the list as stated. I have a webframe directly below this that shows the file that has been selected. The "x" does NOT have a bindable event to clear this webframe when it is clicked. Therefore, I am using a button to clear the file. However, the "x" is still visible which is not desirable since it is not useable. Also, the file upload widget is disabled after a single file is uploaded which gives the "x" button no functionality. This is great, but it is still visible.

Re: File Upload widget custom styling (Thingworx 9.6)

JustinOberle1 — Thu, 18 Dec 2025 15:29:13 GMT

As stated, I have services that need to be triggered once the file is cleared from the widget and there is not bindable event to call these services when the "x" is clicked. I went into more detail below.

Re: File Upload widget custom styling (Thingworx 9.6)

Rocko — Thu, 18 Dec 2025 16:49:11 GMT

add custom css to the mashup:

@supports (ptcs-style-unit: "PTCS-FILE-UPLOAD-LIST-ITEM") {
[part=hit-area] {
display:none;
}
}

you probably need to disable linting which will keep you from saving.

Re: File Upload widget custom styling (Thingworx 9.6)

JustinOberle1 — Thu, 18 Dec 2025 19:46:50 GMT

Thanks! This is what I was looking for.

I find myself needing access to the CSS for the shadow dom every now and then. I have seen this link...

https://support.ptc.com/help/thingworx/platform/r9.6/en/?_gl=1*7xyrcd*_gcl_au*MTQ1Nzk1OTMxMi4xNzQ0MDMxNzk1LjE1Mzg2MjI2OTYuMTc0NTUwOTk1NS4xNzQ1NTA5OTU2*_ga*MTM3NzIxMjUyOC4xNjU1NDAxNzYz*_ga_7NMP2MSYPM*MTc0NTUwOTk0MC4zMzkuMS4xNzQ1NTA5OTcyLjI4LjAuMA..#page/ThingWorx/Help/Mashup_Builder/Theming/ApplyingCustomCSSToWebComponents.html

But, it doesn't show every widget ptcs-style-unit. Is there another source for this information. I originally tried "PTCS-FILE-UPLOAD", and "PTCS-FILEUPLOAD" when I tried styling this example because I was basically guessing as to what it was called.

Re: File Upload widget custom styling (Thingworx 9.6)

Rocko — Fri, 19 Dec 2025 07:53:14 GMT

Yeah, you'll have to transfer the naming logic to other widgets, also you can use F12/dev tools to find out the element and part names.