Invalid request parameters: invalid% coding when uploading a file to the Rails server only api

Question

I am working on a web application using Reactjs as front-end and Rails5 api only applications as back-end

This is the data that I send to the server as Request payload

 ------WebKitFormBoundaryCD1o71UpVNpU4v86 Content-Disposition: form-data; name="user[username]" oeuoeoaeaoe ------WebKitFormBoundaryCD1o71UpVNpU4v86 Content-Disposition: form-data; name="user[profile_image]"; filename="gggg.jpg" Content-Type: image/jpeg ------WebKitFormBoundaryCD1o71UpVNpU4v86-- 

This is my controller

 def update_with_image user = current_user if user.update_attributes(user_update_params) # Handle a successful update. render json: user, status: 200 else render json: { errors: user.errors }, status: 422 end end private def user_update_params params.require(:user).permit(:username,:profile_image) end 

So, when I tried to upload the image to the Rails server, I got this error

 ActionController::BadRequest (Invalid request parameters: invalid %-encoding ("user[username]" oeuoeoaeaoe ------WebKitFormBoundaryCD1o71UpVNpU4v86 Content-Disposition: form-data; name="user[profile_image]"; filename="gggg.jpg" Content-Type: image/jpeg ????JFIF????@6 "?? ??F!1AQ "aq? #2???B?????$3Rb?%Cr?????? ??A!1A"Qaq?2???BR???#b??3rS?$Cs???? ??%)): rack (2.0.1) lib/rack/query_parser.rb:72:in `rescue in parse_nested_query' rack (2.0.1) lib/rack/query_parser.rb:61:in `parse_nested_query' 

** I am using Rack::Cors and Rack::Attack as my midiver.

How can i fix this?

Thanks!