Предварительный просмотр и повторная загрузка файла с использованием gcanti/tcomb-формы

Question

Я следовал примеру загрузки файла, и теперь я могу загрузить этот файл на s3. но когда дело доходит до редактирования или замены этого файла, как я должен справиться с этим.

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'
    }
  }
};

Мой объект ответа

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

Так как мне получить ответ logo чтобы вписаться в BusinessModel такой, что он показывает предварительный просмотр, если файл существует.

onChange показывает предварительный просмотр нового файла

onSubmit загружает новый выбранный файл

это то, что я должен рассмотреть

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
  }
}

Это то, что я сделал, я еще не обработал подсвечивание ошибок, но это работает, конечно, для загрузки одного файла.