Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Redux action
export function uploadSuccess({ data }) {
return {
type: 'UPLOAD_DOCUMENT_SUCCESS',
data,
};
}
export function uploadFail(error) {
return {
type: 'UPLOAD_DOCUMENT_FAIL',
error,
};
}
export function uploadDocumentRequest({ file, name }) {
let data = new FormData();
data.append('file', document);
data.append('name', name);
return (dispatch) => {
axios.post('/files', data)
.then(response => dispatch(uploadSuccess(response))
.catch(error => dispatch(uploadFail(error));
};
}
/*
... A lot of Redux / React boilerplate happens here
like mapDispatchToProps and mapStateToProps and @connect ...
*/
// Component method
handleFileUpload({ file }) {
const file = files[0];
this.props.actions.uploadRequest({
file,
name: 'Awesome Cat Pic'
})
}
// Component render
<input type="file" onChange={this.handleFileUpload} />
@HzJavier

This comment has been minimized.

Copy link

HzJavier commented Aug 22, 2017

On uploadDocumentRequest you receive file but you append document to the data variable. Are those intended to be the same? Or how do you get the information on the document?

@xmile1

This comment has been minimized.

Copy link

xmile1 commented Sep 6, 2018

// Component method
handleFileUpload({ file }) {
  const file = files[0];
  this.props.actions.uploadRequest({
     file,
     name: 'Awesome Cat Pic'
  })
}

should be

// Component method
handleFileUpload({ target: files }) {
  const file = files[0];
  this.props.actions.uploadRequest({
     file,
     name: 'Awesome Cat Pic'
  })
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.