Update form values instead of updating the fragment

src/molecules/Files.js

@@ -18,19 +18,29 @@ class Files extends React.Component {
   }
 
   handleChange = event => {
-    const { uploadFile } = this.props
     const { uploads } = this.state
 
     Array.from(event.target.files).forEach(file => {
       uploads.push({
         file,
-        request: uploadFile(file)
+        request: this.props.uploadFile(file)
       })
     })
 
     this.setState({ uploads })
   }
 
+  handleUploadedFile = ({ file, url }) => {
+    const values = this.state.values.concat({
+      name: file.name,
+      url
+    })
+
+    this.setState({ values })
+
+    this.props.handleChange(values)
+  }
+
   render () {
     const { name } = this.props
     const { values, uploads } = this.state
@@ -59,7 +69,8 @@ class Files extends React.Component {
             <Upload
               key={upload.file.name}
               file={upload.file}
-              request={upload.request}/>
+              request={upload.request}
+              handleUploadedFile={this.handleUploadedFile}/>
           ))}
 
           {values && values.map(value => (

src/molecules/Upload.js

@@ -31,6 +31,11 @@ class Upload extends React.Component {
       this.setState({
         progress: 1
       })
+
+      this.props.handleUploadedFile({
+        file: this.props.file,
+        url: this.props.request.responseText
+      })
     } else {
       this.setState({
         error: 'There was an error'