ie11 / Win7 - upload click does not work

[mousemke]

this is about the clickable area. it was a button my case, but i was able top reproduce this in the droppable demo site.

drag and drop works fine, but i am unable to click any clickable areas to upload a file.

i actually fixed this in my own project by moving away from droppable (sorry ^^). the fix is that the clickable area needs to be a label linking (htmlFor => id) to the file upload input component. then the click on the button styled label will trigger the native upload input

[mousemke]

ie11 in windows 7, but not ie11 in windows 10. this was also confirmed by the fact that both of these ie11s had different version numbers

[lifenautjoe]

Aha. Will fix this as soon as I can.

Thanks!

[lifenautjoe]

Actually, not sure how to fix this.

Introducing an html element dynamically on the website would probably break layout/css of existing webpages.

Will try some things.

[mousemke]

what i ened up doing (button from material ui, but you could just as easily just use a label

      <div
        ref={el => (this.dropTargetField = el)}
        className={`${classes.dropTarget} ${className ? className : ''}`}
      >
        <div className={classes.content}>
          <input
            type="file"
            multiple
            id={`dropTarget-label-button-${dropTargetStrings.length}`}
            className={classes.hiddenInput}
            onChange={e => this.processDroppedFile([...e.target.files])}
          />
          <Button
            label={buttonText}
            fullWidth
            component="label"
            htmlFor={`dropTarget-label-button-${dropTargetStrings.length}`}
            variant={buttonVariant}
          >
            {buttonText}
          </Button>
          {children || null}
        </div>
        <div className={classes.dropMask}>
          <div className={classes.dropMaskText}>
              {dropMaskText}
          </div>
        </div>
      </div>