How to upload images to rails api app with react and carrierwave? - ruby-on-rails

Question

I'm trying to upload images to a rails 5 api app with carrierwave and react but for some reason it doesn't work.
Here're some parts of the app.
migration
class AddImagesToTopics < ActiveRecord::Migration[5.1]
def change
add_column :topics, :images, :json
end
end
topic model
class Topic < ApplicationRecord
mount_uploader :images, ImageUploader
...
end
topics controller
def topic_params
params.require(:topic).permit(:name, :options, :subject, :body, {images: []})
end
submitted form logs
#topic = #board.topics.new(topic_params)
p "-----------"
p params[:topic][:images]
p #topic
p "-----------"
gives the following:
Unpermitted parameter: :images
"-----------"
<ActionController::Parameters {"0"=>{}} permitted: false>
#<Topic id: nil, board_id: 5, body: "dsf", created_at: nil, updated_at: nil, name: "", options: "", subject: "", images: nil>
"-----------"
form
class Form extends Component {
constructor(props) {
super(props)
this.state = {
topic: {
name: "",
options: "",
subject: "",
body: "",
images: null
}
}
this.handleSubmit = this.handleSubmit.bind(this)
this.handleChange = this.handleChange.bind(this)
this.handleImagesSelect = this.handleImagesSelect.bind(this)
}
handleSubmit(e) {
e.preventDefault();
this.props.add_topic(this.props.perm, this.state);
}
handleChange(e) {
this.setState({ topic: { ...this.state.topic, [e.target.name]: e.target.value } });
}
handleImagesSelect(e) {
this.setState({ topic: { ...this.state.topic, images: e.target.files } });
console.log(e.target.files);
console.log(this.state);
}
render() {
const { name, options, subject, body, images } = this.state.topic
return(
<div>
<div className="form_wrapper">
<form id="form" onSubmit={this.handleSubmit } encType="multipart/form-data">
<table>
<tbody>
....
<tr>
<td>body</td>
<td>
<textarea name="body" id="body" rows="10" cols="50"
value={body}
onChange={this.handleChange}/>
</td>
</tr>
<tr>
<td>file</td>
<td>
<input name="images" type="file" id="images" multiple="true"
onChange={this.handleImagesSelect}/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<hr/>
</div>
)
}
}
add topic action
export function add_topic(perm, topic) {
return dispatch => {
axios.post(api + perm + "/topics/", topic)
.then((res) => {
dispatch({ type: ADD_TOPIC, payload: res.data })
})
.catch((err) => console.log(err))
}
}