ファイルのプレビューと再アップロードgcanti/tcomb-formを使用

Question

私はFile upload exampleとthis exampleをフォローしました。ファイルを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' 
    } 
    } 
}; 

マイレスポンスオブジェクトは、どのように私は、ファイルが存在する場合、それはプレビューが表示されていることを、このようなBusinessModelに収まるように応答logoを得るのですか

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

です。

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

を検討する必要があり、新たに選択したファイル

is this somethingをアップロード示しエラーは強調表示されますが、これはもちろん単一ファイルのアップロードでも機能します。