file preview and re-upload using gcanti/tcomb-form

Question

I followed File upload example and this example I can now upload the file to s3. but when it comes to editing or replacing that file how should I handle that.

const CustomFile = t.irreducible('File', x => x instanceof File);

// MyModel
const BusinessModel = t.struct({
  logo: t.maybe(CustomFile),
  name: t.String,
}, 'BusinessModel');

// options
const options = {
  fields: {
    logo: {
      type: 'file'
    }
  }
};

My response object is

{
  "name": "business name",
  "logo": {
    "url": "https://some.url.to/s3/logo.png",
    "large": {
      "url": "https://some.url.to/s3/logo_large.png"
    }
  }
}

So how do I get response logo to fit in BusinessModel such that it shows preview if file exists.

onChange it shows preview of new file

onSubmit uploads the newly selected file

is this something that I should be considering

Answer 1

class MyFileComponent extends t.form.Component { 
  getTemplate() {
    return (locals) => {
      return (
        <div className="form-group">
          {
            getLabel({
              label: locals.label,
            })
          }
          <div>
          { this.renderPreview(locals) }
            <label lang="en" className="custom-file ml-3">
              <input type="file" className="custom-file-input" accept="image/*" onChange={evt => locals.onChange(evt.target.files[0])} />
              <span className="custom-file-control"></span>
            </label>
          </div>
          { getError(locals) }
          { getHelp(locals) }
        </div>
      );
    };
  }

  renderPreview(locals) {
    // your code
  }
}

This is what I did I'm yet to handle the errors highlighting but this works of course for single file upload.