Solved: I'd like to show <input type="file"> UI

RM_13784781 · ‎Aug 22, 2025

https://community.ptc.com/t5/ThingWorx-Developers/I-d-like-to-edit-default-HTML-when-Mashup-open/m-p/1029955#M70342

I previously asked about this topic in the link above, but let me ask it from a different perspective.

What I want to do is show <input type="file"> UI(I asked how to modify the HTML to achieve this last time.)

Can this be achieved using default ThingWorx functionality with CSS and other tools?

Can't we achieve this without Custom Widget?

Thank you for reading.

Current Screen:

<input type="file"> UI don't show up.

Ideal Screen:

Constantine · ‎Aug 25, 2025

I'll try to save you some time. None of that will work. You have three options:

Upgrade your ThingWorx to the version where this issue is fixed,
Use a legacy FileUpload widget,
Develop your own widget as a ThingWorx extension.

/ Constantine

Vilia (my company) | GitHub | LinkedIn

View solution in original post

MA8731174 · ‎Aug 22, 2025

Hello,

yes, its possible to render your HTML on mashup. You can use value display widget and bind your html ..which would be the output from any service.. as example below

You need to bind the output of the service (HTML) with data property of valuedisplay widget..

then in valuedisplay properties you can choose valueFormat property which will open the below window and there you can choose Renderer as HTML and Format with Formatting,Unsanitized (Not Secure)

With this you would be able to see your html on mashup.

Rocko · ‎Aug 22, 2025

This will get you only so far. It might render the input field, but it will be useless as an <input> needs to be inside of a <form> to launch a POST request to actually do something with the file. Of course you can try and workaround that, but at this point you might as well use the built-in widgets and expressions that support the use case of uploading files.

RM_13784781 · ‎Aug 24, 2025

Thank you for sharing the solution.

Using this solution, I can show <input type=file>UI directly on the Mashup.

And I can confirm the <input type=file>UI can be tapped on IOS device.

However, as you mention above, I can't file upload in this situation because this<input type=file>UI is separated from File Upload widget.

I think if the file that is uploaded by <input type=file>UI can be linked or binded to File Upload widget or using other solution, I might be possible to upload the file from <input type=file>UI.

Do you have any idea to achieve this goal.

MA8731174 · ‎Aug 25, 2025

I would recommend you that try to see in console.log that either a file you are uploading is appearing into browser logs when you upload it.

Example: read file locally

<input type="file" id="file" />

<script>
document.addEventListener("DOMContentLoaded", () => {
  const input = document.getElementById("file");

  input.addEventListener("change", async (e) => {
    const f = e.target.files?.[0];
    if (!f) return;

    // Option 1: read as text
    const text = await f.text();
    console.log("File content (text):", text);

    // Option 2: read as ArrayBuffer (binary)
    const buffer = await f.arrayBuffer();
    console.log("File content (bytes):", new Uint8Array(buffer));

    // Option 3: read with FileReader (older way)
    const reader = new FileReader();
    reader.onload = () => console.log("FileReader result:", reader.result);
    reader.readAsText(f);
  });
});
</script>

If that works then may be you can try also this modern usage to send the file as below:

<input type="file" id="fileInput" />

<script>
document.getElementById('fileInput').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const formData = new FormData();
  formData.append("myFile", file);

  await fetch("/upload", {
    method: "POST",
    body: formData
  });
});
</script>

This task can also be done with custom widget strategy and that would be best practices in thingworx instead of hacking html on the page.

regards

Jamal

MA8731174 · ‎Aug 25, 2025

as i have given you two examples below. I would recommend you that you can try like that first , as its a minimal version for testing. now just return this from your thingworx service on mashup.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tiny File Reader</title>
</head>
<body>
  <input type="file" id="f">
  <script>
    f.onchange = async e => {
      let file = e.target.files[0];
      console.log(await file.text());
    };
  </script>
</body>
</html>

Constantine · ‎Aug 25, 2025

I'll try to save you some time. None of that will work. You have three options:

Upgrade your ThingWorx to the version where this issue is fixed,
Use a legacy FileUpload widget,
Develop your own widget as a ThingWorx extension.

/ Constantine

Vilia (my company) | GitHub | LinkedIn

RM_13784781 · ‎Aug 27, 2025

Thank you for trying the test for me.
I also tried, but I didn’t do well.

I would like to confirm something. Do you mean that I can resolve this problem by applying a different version of Thingworx?
If so, I would like to know which version can solve this problem and any supporting evidence.
(Just in case, I will share the original issue and my Thingworx version:
Original issue: When I tap the File Upload button on an iOS device, the File Selection or Taking Picture dialog does not show up (this may be due to iOS security). I can use the File Upload button on an iOS device using a mouse, but it's quite annoying. When I tap the <input type="file"> tag directly, it works well.
My Thingworx version: 9.3.6)

In my situation, I don’t have the authority to update Thingworx or use custom widgets (extensions).
If I want to pursue a solution, I need to ask for help from a representative. Therefore, I would like to understand which solution works best.

MA8731174 · ‎Aug 27, 2025

The issue is resolved on Thingworx 9.4 version and all version coming afterwards. Many users have this issue on this thingworx 9.3 version. I have no idea how your circumstance are at the moment and if you are unable to update your thingworx version then may be try it out with custom widget. Its not difficult to create a custom widget. I have already last time mentioned the simple custom widget to start with.

thanks