NestJS and React - How to send back a HTTP error response - node.js

Question

I am building an app with React and NestJS.
In NestJS, I have an API endpoint to upload a photo like so:
#Controller('api/upload')
export class UploadController {
constructor(private readonly uploadService: UploadService) {}
#Post()
#UseInterceptors(
FileInterceptor('image', {
storage: diskStorage({
destination: './myphoto',
filename: (req, file, cb) => {
if (file.mimetype !== 'image/png')
// how do I return an Http error message here?
return cb(null, 'myphoto.png');
},
}),
}),
)
uploadPhoto(#UploadedFile() image) {
}
}
In React, I am using axios and redux-thunk to hit this endpoint like so:
export const uploadPhotoAsync = (data: FormData) => {
return (dispatch: ThunkDispatch<{}, {}, AnyAction>) => {
return axios.post('http://localhost:8080/api/upload', data)
.then(() => {
dispatch({ type: UPLOAD_PHOTO_COMPLETE, error: null });
})
.catch((e) => {
dispatch({ type: UPLOAD_PHOTO_COMPLETE, error: e.message });
});
};
};
As you can see, if there is an error message, we want to catch it and store it in state to display to the user.
My question is: how do I use NestJS to return an error message so that it can be caught by my front-end error handler? In the if statement in my controller, I tried just doing something like throw new UnsupportedMediaException("My error message here") but all that appears to do is throw the error on the server-side and nothing gets sent to the client.
Any help would be greatly appreciated.