[BUG] fileUpload component React error #185

Im sometimes getting some weird errors in the client (googleChrome) for the fileUpload component in icon form (small).
Sometimes its working sometimes not while i do the exact same thing. I ran it on two tabs at once and one works, the other not xD

Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Ja (react-dom.production.min-16.11.0.js:226)
    at Object.enqueueSetState (react-dom.production.min-16.11.0.js:216)
    at d.m.setState (react.production.min-16.11.0.js:21)
    at d.componentDidUpdate (PerspectiveClient.24beb846c03388fc121a.js:68)
    at Pj (react-dom.production.min-16.11.0.js:158)
    at unstable_runWithPriority (react.production.min-16.11.0.js:25)
    at pb (react-dom.production.min-16.11.0.js:59)
    at Ma (react-dom.production.min-16.11.0.js:151)
    at We (react-dom.production.min-16.11.0.js:132)
    at react-dom.production.min-16.11.0.js:60
Re @ react-dom.production.min-16.11.0.js:112
Ph.f.componentDidCatch.c.callback @ react-dom.production.min-16.11.0.js:124
bh @ react-dom.production.min-16.11.0.js:68
ah @ react-dom.production.min-16.11.0.js:67
Pj @ react-dom.production.min-16.11.0.js:158
unstable_runWithPriority @ react.production.min-16.11.0.js:25
pb @ react-dom.production.min-16.11.0.js:59
Ma @ react-dom.production.min-16.11.0.js:151
We @ react-dom.production.min-16.11.0.js:132
(anonymous) @ react-dom.production.min-16.11.0.js:60
unstable_runWithPriority @ react.production.min-16.11.0.js:25
pb @ react-dom.production.min-16.11.0.js:59
Rg @ react-dom.production.min-16.11.0.js:60
ca @ react-dom.production.min-16.11.0.js:60
xi.createPortal @ react-dom.production.min-16.11.0.js:237
cj @ react-dom.production.min-16.11.0.js:42
PerspectiveClient.24beb846c03388fc121a.js:12 ui.ErrorBoundary: Component error caught in error boundary: {"componentStack":"\n    in d\n    in div\n    in m\n    in s\n    in n\n    in div\n    in b\n    in s\n    in n\n    in A\n    in div\n    in b\n    in s\n    in n\n    in div\n    in b\n    in s\n    in n\n    in div\n    in b\n    in s\n    in n\n    in A\n    in div\n    in b\n    in s\n    in n\n    in div\n    in b\n    in s\n    in n\n    in div\n    in div\n    in M\n    in s\n    in n\n    in div\n    in b\n    in s\n    in n\n    in A\n    in div\n    in b\n    in s\n    in n\n    in div\n    in b\n    in s\n    in n\n    in div\n    in l\n    in s\n    in n\n    in div\n    in l\n    in s\n    in n\n    in A\n    in div\n    in y\n    in div\n    in div\n    in _\n    in m"}
n.cerror @ PerspectiveClient.24beb846c03388fc121a.js:12
n.sendLogItemsConsole @ PerspectiveClient.24beb846c03388fc121a.js:12
p.sendBatch @ PerspectiveClient.24beb846c03388fc121a.js:12
p.sendBatchIfComplete @ PerspectiveClient.24beb846c03388fc121a.js:12
p.log @ PerspectiveClient.24beb846c03388fc121a.js:12
e.log @ PerspectiveClient.24beb846c03388fc121a.js:12
e.error @ PerspectiveClient.24beb846c03388fc121a.js:12
componentDidCatch @ PerspectiveClient.24beb846c03388fc121a.js:17
Ph.f.componentDidCatch.c.callback @ react-dom.production.min-16.11.0.js:124
bh @ react-dom.production.min-16.11.0.js:68
ah @ react-dom.production.min-16.11.0.js:67
Pj @ react-dom.production.min-16.11.0.js:158
unstable_runWithPriority @ react.production.min-16.11.0.js:25
pb @ react-dom.production.min-16.11.0.js:59
Ma @ react-dom.production.min-16.11.0.js:151
We @ react-dom.production.min-16.11.0.js:132
(anonymous) @ react-dom.production.min-16.11.0.js:60
unstable_runWithPriority @ react.production.min-16.11.0.js:25
pb @ react-dom.production.min-16.11.0.js:59
Rg @ react-dom.production.min-16.11.0.js:60
ca @ react-dom.production.min-16.11.0.js:60
xi.createPortal @ react-dom.production.min-16.11.0.js:237
cj @ react-dom.production.min-16.11.0.js:42


How it usually works:
image
What sometimes happens for no apparent reason:

I have 2 browsers opend on the same page and one is working the other isnt:
image

I have some bindings on the component but realy nothing special…

[
  {
    "type": "ia.input.fileupload",
    "version": 0,
    "props": {
      "maxUploads": 1,
      "fileSizeLimit": 20,
      "fileUploadIcon": {},
      "style": {
        "classes": ""
      }
    },
    "meta": {
      "name": "FileUpload_0"
    },
    "position": {
      "x": 8,
      "y": 32,
      "height": 48,
      "width": 52
    },
    "custom": {},
    "propConfig": {
      "props.fileUploadIcon.color": {
        "binding": {
          "config": {
            "path": "../txtName.props.text"
          },
          "transforms": [
            {
              "code": "\tif value :\n\t\treturn '#000000'\n\telse:\n\t\treturn '#A3A3A7'\n\t",
              "type": "script"
            }
          ],
          "type": "property"
        }
      },
      "props.fileUploadIcon.path": {
        "binding": {
          "config": {
            "path": "../txtName.props.text"
          },
          "transforms": [
            {
              "code": "\tif value:\n\t\treturn 'material/photo_camera'\n\telse: \n\t\treturn 'material/no_photography'\n\t",
              "type": "script"
            }
          ],
          "type": "property"
        }
      },
      "props.style.pointer-events": {
        "binding": {
          "config": {
            "path": "../txtName.props.text"
          },
          "transforms": [
            {
              "code": "\t\n\tif value:\n\t\treturn 'auto'\n\telse:\t\t\n\t\treturn 'none'\n\t",
              "type": "script"
            }
          ],
          "type": "property"
        }
      }
    },
    "events": {
      "component": {
        "onFileReceived": {
          "config": {
            "script": "\ttxtName = self.getSibling(\"txtName\").props.text\n\tdefaultName = event.file.name\n\tif txtName:\n\t\tfilename = self.view.params.Path + '/' + txtName + '.' + defaultName.split('.')[-1]\n\t\tif system.file.fileExists(filename):\n\t\t\ttimeStamp = system.date.format(system.date.now(), \"HH-mm-ss-L\")\n\t\t\tfilename= ('('+str(timeStamp)+').'+defaultName.split('.')[-1]).join(filename.rsplit(('.'+defaultName.split('.')[-1]), 1))\n\t\tevent.file.copyTo(filename)\n\telse:\n\t\tfilename = self.view.params.Path + '/' + defaultName\n\t\tif system.file.fileExists(filename):\n\t\t\ttimeStamp = system.date.format(system.date.now(), \"HH-mm-ss-L\")\n\t\t\tfilename= ('('+str(timeStamp)+').'+defaultName.split('.')[-1]).join(filename.rsplit(('.'+defaultName.split('.')[-1]), 1))\n\t\tevent.file.copyTo(filename)\n\n\t"
          },
          "scope": "G",
          "type": "script"
        }
      }
    }
  }
]

no logs showing up in the gateway

i do not appear to get this in firefox

version: 8.1.9 (b2021080617)

What Ignition version is this, exactly?

Ah yes i knew i forgot something:
version 8.1.9 (b2021080617)

What container type is the component in? Note from a frontend dev:

Sound like the resize detector within the file upload component might be freaking out. I'd probably suggest providing the component with a strict height and width, and see if that helps.

Uh ive already changed that bit so i cant really look what i had xD

I was definitly using a fixed coordinate container, but i might have used calc() to determine the position, tho i kinda doubt i used it for the icon here… i am using that on the width for the text box next to it?

ill try to replicate it and see if it still happends

1 Like

Ah actualy i posted the json in here lol and i see i was just a fixed value

i am using width:calc(100% - 50px) in other components in that view tho, but i doubt the popup should react with those...

ive pasted a bunch of them and it seem like only a couple of them are bugging out... some of them also dont have any bindings on them (the blue ones) and they bugged out too
image

It seems to be always the same few that sometimes fail, why idk tho, i dont see much of a pattern here xd

I am having this same error:

image

I’ve got the sizing set to 0,0 40px inside a flex container.
in ignition 8.1.10

any suggestions would be AMAZING

i was not able to make this work, maybe try to make some copies untill one works, as it seems to be only a couple that do this, idk why… i stepped away from it for now so idk if it will help