How to pass blob url to rails create method by ajax - ruby-on-rails

Question

I want to upload a voice sound in my Rails project.
The recording works fine to download, but I can't send the data to rails server.
recorder && recorder.exportWAV(function (blob) {
var url = URL.createObjectURL(blob);
console.log(url);
$.ajax({
type: "POST",
url: "/voices",
data: {voice: {sound: url}}
});
});
In server log there is a post data, but sound was not created.
Started POST "/voices" for ::1 at 2015-12-08 20:43:16 +0900
Processing by VoicesController#create as */*
Parameters: {"voice"=>{"sound"=>"blob:http%3A//localhost%3A3000/3ad3859e-b960-44b8-ba18-20727e739bab"}}
User Load (0.4ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT 1 [["id", 1]]
Profile Load (0.3ms) SELECT "profiles".* FROM "profiles" WHERE "profiles"."user_id" = $1 LIMIT 1 [["user_id", 1]]
(0.2ms) BEGIN
SQL (0.5ms) INSERT INTO "voices" ("sound", "created_at", "updated_at") VALUES ($1, $2, $3) RETURNING "id" [["sound", nil], ["created_at", "2015-12-08 11:43:16.254713"], ["updated_at", "2015-12-08 11:43:16.254713"]]
(0.6ms) COMMIT
Completed 500 Internal Server Error in 135ms (ActiveRecord: 3.4ms)
How can I pass the sound blob data to rails server?
voices_controller.rb
class VoicesController < ApplicationController
#voice = Voice.new(voice_params)
respond_to do |format|
if #voice.save
format.html { redirect_to root_path, notice: 'voice was successfully created.' }
format.json { render :show, status: :created, location: root_path }
else
format.html { render :new }
format.json { render json: #voice.errors, status: :unprocessable_entity }
end
end
def voice_params
params.require(:voice).permit(:sound, :user_id)
end
end
app/models/voice.rb
class Voice < ActiveRecord::Base
belongs_to :phrase
belongs_to :user
mount_uploader :sound, SoundUploader
end
Another attempt
recorder && recorder.exportWAV(function (blob) {
var url = URL.createObjectURL(blob);
console.log(url);
var formData = new FormData();
formData.append('voice[sound]', url);
$.ajax({
type: "POST",
url: "/voices",
data: formData
});
});
This codes ends up with a error Uncaught TYpeError: Illegal invocation.

Answer 1

Not sure, if you are trying to post the data correctly or have your models setup properly. you need to save your audio as a file, using File.open(filename, w)
SQL (0.5ms) INSERT INTO "voices" ("sound", "created_at", "updated_at") VALUES ($1, $2, $3) RETURNING "id" [["sound", nil], ["created_at", "2015-12-08 11:43:16.254713"], ["updated_at", "2015-12-08 11:43:16.254713"]]
The SQL, is suggesting, that nothing is getting passed to "sound" field.
if you are passing it as a blob, you need to set the column accordingly, if not done entirely, however better option would be 2)
Send and save the audio data as a file. Have a look at link
formData.append('voice[sound]', url); # Comment this
formData.append('voice[sound]', blob); # This will send the actual data to your server and not the blob url. then your carrierwave will have the file data, which it can save.