Handle empty image field upload to Cloudinary - reactjs

Question

In this project I have a Redux Form with an input type='file' to upload an image to Cloudinary along with the other data upload to MongoLab. The form is reused with an item (Book) creation component (booklist\client\src\components\AddBook.js) and the one for editing a Book (booklist\client\src\components\Book.js).
The AddBookForm form. The book prop when present comes from the parent Book component. The other Fields were omitted.
class AddBookForm extends Component {
componentDidMount() {
this.handleInitialize();
}
handleInitialize() {
let names = '';
if (this.props.book) {
const authors = this.props.book.authors && this.props.book.authors.map(ath => {
let str = `${ath.firstname} ${ath.lastname}, `;
names = names + str;
});
names = names.slice(0, -2);
}
const initData = {
'title': this.props.book && this.props.book.title || '',
'pages': this.props.book && this.props.book.pages || 0,
'publisher': this.props.book && this.props.book.publisher || '',
'publishedAt': this.props.book && moment(this.props.book.publishedAt).format('MM.DD.YYYY') || '',
'releasedAt': this.props.book && moment(this.props.book.releasedAt).format('MM.DD.YYYY') || '',
'isbn13': this.props.book && this.props.book.isbn13 || '',
'cover': this.props.book && this.props.book.cover || '',
'authors': names,
book_id: this.props.book && this.props.book._id,
cloudinarySecureUrl: this.props.book && this.props.book.cloudinarySecureUrl
};
this.props.initialize(initData);
}
render() {
const { onSubmit, handleSubmit, pristine, reset, submitting } = this.props;
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Field
name='cover'
type='file'
component={fileField}
label='Cover'
comment='Please provide a cover. Optional'
/>
<button
disabled={submitting}
className='add-form-action'
>
Add Book
</button>
<button type='button' disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</form>
)
}
export default AddBookForm = reduxForm({
form: 'AddBookForm'
})(AddBookForm);
The Book component method for handling the form submission
onSubmit(formData) {
const authors = formData.authors;
const authorsToArray = [];
const authorsArray = authors.split(',');
for (let ath of authorsArray) {
const firstname = ath.trim().split(' ')[0];
const lastname = ath.trim().split(' ')[1] || '';
authorsToArray.push({
firstname,
lastname
});
}
formData.authors = authorsToArray;
this.props.addBook(formData, this.props.history);
}
This is the addBook() action to handle the Book form data upload.
export const addBook = (bookData, history) => (dispatch) => {
const cloudinaryUrl = 'https://api.cloudinary.com/v1_1/*******/upload';
const cloudinaryUploadPreset = '*******';
const formData = new FormData();
formData.append('file', bookData.cover[0]);
formData.append('upload_preset', cloudinaryUploadPreset);
axios({
url: cloudinaryUrl,
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: formData
})
.then(res => {
bookData.cloudinarySecureUrl = res.data.secure_url;
axios.post('/api/books', bookData)
.then(res => {
history.push('/')
})
.catch(err => dispatch({
type: GET_ERRORS,
payload: err.response.data
}));
})
.catch(error => console.log('Cloudinary image upload error:', error.message));
};
What do I default bookData.cover[0] to so I can submit the form with no image for the Field name='cover'? Is there/should I take another way? The complete repo is on https://github.com/ElAnonimo/booklist
UPDATE
With this addition to the catch clause of the addBook() action on no image upload when editing a Book I'm getting the correct list of books even the image persists from when the image was uploaded.
.catch(error => {
history.push('/');
});

Answer 1

This is what I did in the book creation action.
// add book
export const addBook = (bookData, history) => (dispatch) => {
const cloudinaryUrl = 'https://api.cloudinary.com/v1_1/dlzbcvsbf/upload';
const cloudinaryUploadPreset = 'hvqidzpj';
const formData = new FormData();
// bookData.cover is the `FileList` array created when user submits a cover picture, bookData.cover[0] is the actual cover picture file
bookData.cover && bookData.cover[0] && formData.append('file', bookData.cover[0]);
formData.append('upload_preset', cloudinaryUploadPreset);
if (!bookData.cover[0]) {
axios.post('/api/books', bookData)
.then(res => {
history.push('/')
})
.catch(err => dispatch({
type: GET_ERRORS,
payload: err.response.data
}));
} else {
axios({
url: cloudinaryUrl,
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: formData
})
.then(res => {
// book cover isn't stored in the DB no need to send it to backend
delete bookData.cover;
bookData.cloudinarySecureUrl = res.data.secure_url;
axios.post('/api/books', bookData)
.then(res => {
history.push('/')
})
.catch(err => dispatch({
type: GET_ERRORS,
payload: err.response.data
}));
})
.catch(error => {
console.log('Cloudinary image upload error:', error.message);
history.push('/');
});
}
};