Problems with File Upload field

I’m having really hard times trying to make input[type=file] play nicely with mobx-react-form. It doesn’t work out of the box and native behavior is broken. When a file is chosen field.files property got updated, but:

1. Native input is not updated (still shows: “No file selected”)
2. Validation of the field is not called, so the form is still rendered invalid
3. form.values() does not contain files selected, so basically you have to implement your own method to collect all the values

Can someone provide a very simple and limited example of the form with one required input[type=file] with form validation on file selection change and collecting the data for submit without picking data from the field itself?

[Dakkers]

for anyone that sees this in the future, this is what I ended up doing:

Rendered component

        <div>
          <input
            {...field.bind()}
            className='display-none'
            type='file'
          />
          <button
            className='btn btn-primary'
            onBlur={field.onBlur}
            onFocus={field.onFocus}
            onClick={(e) => document.getElementById(field.id).click(e)}
            type="button"
          >
            <span>{btnText}</span>
          </button>
        </div>

Form initialization

    new Form({
      fields: [
        'image',
      ],
      initials: {
        image: null,
      },
      options: {
        image: {
          validateOnChange: true
        }
      },
      validators: {
        image: ({ field }) => {
          return [
            !!field.files && field.files.length > 0,
            'Required'
          ];
        }
      },
      hooks: {
        image: {
          onDrop: (field) => {
            field.validate({ showErrors: true })
          }
        }
      },
      types: {
        image: 'file'
      }
    }, {
      hooks: {
        onSuccess: this.submitForm
      },
      options: {
        uniqueId: () => `my-super-form-${shortid.generate()}`
      }
    });

Form submission

  * submitForm (form) {
    const data = form.values();
    console.log(form.$('image'));  // <-- this has a `.files` attribute which has the file.
  }

Explanation

https://stackoverflow.com/questions/1084925/input-type-file-show-only-button

• I hide the default <input> tag using display: none (it is still rendered, technically, just hidden with CSS - so it has the field’s event handling)
• I use a button that, when clicked, finds the hidden file input and triggers its onClick
  • the hidden file input has a unique ID generated by the shortid library
• I access the file(s) I’ve uploaded by doing form.$('image').files

[prontiol]

@Dakkers It will be too difficult to extract the working POC from the current project, as there are lots of custom code.