ActiveStorage DirectUpload Audio Files

Thomas Gurung

July 07, 2022 17:58

Hi Kevin,

Thank you for reaching out.

Can you please send us your code and what GEM version you are using?

Please let me know if you have any other questions or queries.

Kind Regards,
Thomas

0

Kevin Neubert

July 07, 2022 20:25

Thanks for the reply. This is appearing to be more intermittent (leaning toward only completes every so often) than when I reported it yesterday. I am in Rails.

My HTML file excerpt…

<%= label_tag "audio_file_input_#{presenter.voice_recording.id}", 'Audio File', { class: 'col-md-3 mt-2' } %>

<%= f.file_field :url, { class: 'image-url form-control', id: "audio_file_input_#{presenter.voice_recording.id}", direct_upload: true, style: 'display:none;' } %>

<div class="col-md-9 fileinput-dropzone dz-clickable" id="audio_file_dropzone_<%= presenter.voice_recording.id -%>" style="">

</div>

<div class="spinner-border text-primary d-none" id="spinner_audio_file_container_<%= presenter.voice_recording.id -%>" role="status">

<span class="sr-only">Loading...</span>

</div>

<span class="text-muted">Drag and drop or Click to Upload</span>

</div>

Dropzone.autoDiscover = false;

$('#audio_file_dropzone_<%= presenter.voice_recording.id -%>').dropzone({

url: ' ',

autoQueue: false,

maxFilesize: 150,

addRemoveLinks: false,

acceptedFiles: 'audio/*',

clickable: '#audio_file_dropzone_<%= presenter.voice_recording.id -%>, #audio_file_container_<%= presenter.voice_recording.id -%>',

dragover: function() {

$('#audio_file_dropzone_<%= presenter.voice_recording.id -%>').addClass('hover');

},

dragleave: function() {

$('#audio_file_dropzone_<%= presenter.voice_recording.id -%>').removeClass('hover');

},

drop: function() {

$('#audio_file_container_<%= presenter.voice_recording.id -%>').hide();

$('#spinner_audio_file_container_<%= presenter.voice_recording.id -%>').show();

},

addedfile: function(file, response) {

$('#audio_file_container_<%= presenter.voice_recording.id -%>').hide();

$('#spinner_audio_file_container_<%= presenter.voice_recording.id -%>').show();

const input = document.querySelector('#audio_file_input_<%= presenter.voice_recording.id -%>');

const url = input.dataset.directUploadUrl;

const upload = new ActiveStorage.DirectUpload(file, url);

console.log(upload);

upload.create((error, blob) => {

if (error) {

console.log(error);

console.log(blob);

} else {

$.ajax({

method: 'PATCH',

dataType: 'script',

url: '<%= save_audio_file_voice_recording_path(presenter.client, presenter.voice_recording) -%>',

data: { 'audio_file': blob.signed_id }

});

}

});

}});

</script>

The DirectUploadsController is what comes with ActiveStorage. I have not modified it nor have I created that Controller in my code.

These are the log entries after I drop a file (on failure)…

1:57:01 PM web.1 | Started POST "/rails/active_storage/direct_uploads" for 66.220.250.22 at 2022-07-07 13:57:01 -0400

1:57:01 PM web.1 | Cannot render console from 66.220.250.22! Allowed networks: 67.231.0.0/67.231.255.255, 127.0.0.0/127.255.255.255, ::1

1:57:01 PM web.1 | Processing by ActiveStorage::DirectUploadsController#create as JSON

1:57:01 PM web.1 | Parameters: {"blob"=>{"filename"=>"testing.mp3", "content_type"=>"audio/mpeg", "byte_size"=>12214, "checksum"=>"P6ZcFAgt2wXCodPQ9QcVVA=="}, "direct_upload"=>{"blob"=>{"filename"=>"testing.mp3", "content_type"=>"audio/mpeg", "byte_size"=>12214, "checksum"=>"P6ZcFAgt2wXCodPQ9QcVVA=="}}}

1:57:01 PM web.1 | TRANSACTION (0.2ms) BEGIN

1:57:01 PM web.1 | ActiveStorage::Blob Create (13.5ms) INSERT INTO "active_storage_blobs" ("key", "filename", "content_type", "byte_size", "checksum", "created_at", "service_name") VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING "id" [["key", "bfk36y0yampz8t00evnwh2bopnow"], ["filename", "testing.mp3"], ["content_type", "audio/mpeg"], ["byte_size", 12214], ["checksum", "P6ZcFAgt2wXCodPQ9QcVVA=="], ["created_at", "2022-07-07 17:57:01.680066"], ["service_name", "cloudinary"]]

1:57:01 PM web.1 | TRANSACTION (0.7ms) COMMIT

1:57:01 PM web.1 | Cloudinary Storage (0.2ms) Generated URL for file at key: bfk36y0yampz8t00evnwh2bopnow (https://api.cloudinary.com/v1_1/hcfhlrdjg/image/upload?api_key=125998864364782&context=active_storage_key%3Dbfk36y0yampz8t00evnwh2bopnow&public_id=bfk36y0yampz8t00evnwh2bopnow&signature=5bc2cc6a7f55a02ddb8f6f756f51260a0a407319&timestamp=1657216621)

1:57:01 PM web.1 | Completed 200 OK in 20ms (Views: 0.2ms | ActiveRecord: 14.3ms | Allocations: 4837)

1:59:16 PM web.1 | [ActiveJob] [ActiveStorage::AnalyzeJob] [777cb1ad-040d-4f7f-a88e-2b26d3ea1e67] ActiveStorage::Blob Load (1.8ms) SELECT "active_storage_blobs".* FROM "active_storage_blobs" WHERE "active_storage_blobs"."id" = $1 LIMIT $2 [["id", 240], ["LIMIT", 1]]

1:59:16 PM web.1 | [ActiveJob] [ActiveStorage::AnalyzeJob] [777cb1ad-040d-4f7f-a88e-2b26d3ea1e67] Performing ActiveStorage::AnalyzeJob (Job ID: 777cb1ad-040d-4f7f-a88e-2b26d3ea1e67) from Async(default) enqueued at 2022-07-07T17:54:29Z with arguments: #<GlobalID:0x000000012fe9d218 @uri=#<URI::GID gid://funyl/ActiveStorage::Blob/240>>

1:59:16 PM web.1 | [ActiveJob] [ActiveStorage::AnalyzeJob] [777cb1ad-040d-4f7f-a88e-2b26d3ea1e67] Cloudinary Storage (1.1ms) Generated URL for file at key: cr58o2rwutd93lgdb8eb6cy2ocgf (https://res.cloudinary.com/hcfhlrdjg/image/upload/cr58o2rwutd93lgdb8eb6cy2ocgf)

1:59:16 PM web.1 | [ActiveJob] [ActiveStorage::AnalyzeJob] [777cb1ad-040d-4f7f-a88e-2b26d3ea1e67] Cloudinary Storage (125.5ms) Downloaded file from key: cr58o2rwutd93lgdb8eb6cy2ocgf

1:59:16 PM web.1 | [ActiveJob] [ActiveStorage::AnalyzeJob] [777cb1ad-040d-4f7f-a88e-2b26d3ea1e67] Enqueued ActiveStorage::AnalyzeJob (Job ID: 777cb1ad-040d-4f7f-a88e-2b26d3ea1e67) to Async(default) at 2022-07-07 18:11:10 UTC with arguments: #<GlobalID:0x000000012fed6ba8 @uri=#<URI::GID gid://funyl/ActiveStorage::Blob/240>>

1:59:16 PM web.1 | [ActiveJob] [ActiveStorage::AnalyzeJob] [777cb1ad-040d-4f7f-a88e-2b26d3ea1e67] Retrying ActiveStorage::AnalyzeJob in 714 seconds, due to a ActiveStorage::IntegrityError.

1:59:16 PM web.1 | [ActiveJob] [ActiveStorage::AnalyzeJob] [777cb1ad-040d-4f7f-a88e-2b26d3ea1e67] Performed ActiveStorage::AnalyzeJob (Job ID: 777cb1ad-040d-4f7f-a88e-2b26d3ea1e67) from Async(default) in 183.94ms

This is the console.log(upload)…

DirectUpload

delegate: undefined

file: File {upload: Object, status: "added", accepted: true, name: "testing.mp3", lastModified: 1657135483000, …}

id: 8

url: "https://dev.chiirp.com/rails/active_storage/direct_uploads”

This is the console error output…

https://api.cloudinary.com/v1_1/hcfhlrdjg/image/upload?api_key=125998864364782&context=active_storage_key%3Dbfk36y0yampz8t00evnwh2bopnow&public_id=bfk36y0yampz8t00evnwh2bopnow&signature=5bc2cc6a7f55a02ddb8f6f756f51260a0a407319&timestamp=1657216621

Failed to load resource: the server responded with a status of 400 (Bad Request)

This is the console.log(error)…

Error storing "testing.mp3". Status: 400

This is the console.log(blob)…

undefined

On occasion the process will complete as expected and hit this Controller code…

def save_audio_file

@voice_recording.audio_file.purge

audio_file = params.permit(:audio_file).dig(:audio_file)

@voice_recording.update(url: '', audio_file:)

render partial: 'clients/voice_recordings/js/show', locals: { cards: %w[voice_recordings_edit] }

end

These are the log entries on a successful file upload…

7:57:22 AM web.1 | Started POST "/rails/active_storage/direct_uploads" for 66.220.250.22 at 2022-07-07 07:57:22 -0400

7:57:22 AM web.1 | Cannot render console from 66.220.250.22! Allowed networks: 67.231.0.0/67.231.255.255, 127.0.0.0/127.255.255.255, ::1

7:57:22 AM web.1 | Processing by ActiveStorage::DirectUploadsController#create as JSON

7:57:22 AM web.1 | Parameters: {"blob"=>{"filename"=>"testing.mp3", "content_type"=>"audio/mpeg", "byte_size"=>12214, "checksum"=>"P6ZcFAgt2wXCodPQ9QcVVA=="}, "direct_upload"=>{"blob"=>{"filename"=>"testing.mp3", "content_type"=>"audio/mpeg", "byte_size"=>12214, "checksum"=>"P6ZcFAgt2wXCodPQ9QcVVA=="}}}

7:57:22 AM web.1 | TRANSACTION (0.6ms) BEGIN

7:57:22 AM web.1 | ActiveStorage::Blob Create (0.8ms) INSERT INTO "active_storage_blobs" ("key", "filename", "content_type", "byte_size", "checksum", "created_at", "service_name") VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING "id" [["key", "vdq2t1s8oy8hzjeamj6p7sjrgtf1"], ["filename", "testing.mp3"], ["content_type", "audio/mpeg"], ["byte_size", 12214], ["checksum", "P6ZcFAgt2wXCodPQ9QcVVA=="], ["created_at", "2022-07-07 11:57:22.360673"], ["service_name", "cloudinary"]]

7:57:22 AM web.1 | TRANSACTION (0.3ms) COMMIT

7:57:22 AM web.1 | Cloudinary Storage (0.3ms) Generated URL for file at key: vdq2t1s8oy8hzjeamj6p7sjrgtf1 (https://api.cloudinary.com/v1_1/hcfhlrdjg/video/upload?api_key=125998864364782&context=active_storage_key%3Dvdq2t1s8oy8hzjeamj6p7sjrgtf1&public_id=vdq2t1s8oy8hzjeamj6p7sjrgtf1&signature=5d234786e39db5c9b305bfe8bcb6ce59d673d1a8&timestamp=1657195042)

7:57:22 AM web.1 | Completed 200 OK in 18ms (Views: 0.4ms | ActiveRecord: 1.7ms | Allocations: 5091)

7:57:23 AM web.1 | Started PATCH "/client/1/voice_recordings/39/save_audio_file" for 66.220.250.22 at 2022-07-07 07:57:23 -0400

7:57:23 AM web.1 | Cannot render console from 66.220.250.22! Allowed networks: 67.231.0.0/67.231.255.255, 127.0.0.0/127.255.255.255, ::1

7:57:23 AM web.1 | Processing by Clients::VoiceRecordingsController#save_audio_file as JS

7:57:23 AM web.1 | Parameters: {"audio_file"=>"eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZTA9IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1ef0234207c547b0368b21f4eff9412b7471deb8", "client_id"=>"1", "id"=>"39"}

7:57:23 AM web.1 | User Load (2.7ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 3], ["LIMIT", 1]]

7:57:23 AM web.1 | ↳ app/controllers/application_controller.rb:212:in `switch_locale'

7:57:23 AM web.1 | Client Load (1.4ms) SELECT "clients".* FROM "clients" WHERE "clients"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]

7:57:23 AM web.1 | ↳ app/lib/tenant.rb:42:in `parsed_domain'

7:57:23 AM web.1 | Twnumber Exists? (1.0ms) SELECT 1 AS one FROM "twnumbers" WHERE "twnumbers"."client_id" = $1 LIMIT $2 [["client_id", 1], ["LIMIT", 1]]

7:57:23 AM web.1 | ↳ app/controllers/application_controller.rb:197:in `set_session_vars'

7:57:23 AM web.1 | Contact Exists? (1.1ms) SELECT 1 AS one FROM "contacts" WHERE "contacts"."client_id" = $1 LIMIT $2 [["client_id", 1], ["LIMIT", 1]]

7:57:23 AM web.1 | ↳ app/controllers/application_controller.rb:198:in `set_session_vars'

7:57:23 AM web.1 | Twnumber Load (1.1ms) SELECT "twnumbers".* FROM "twnumbers" INNER JOIN "twnumberusers" ON "twnumberusers"."twnumber_id" = "twnumbers"."id" WHERE "twnumberusers"."user_id" = $1 AND "twnumberusers"."def_user" = $2 LIMIT $3 [["user_id", 3], ["def_user", true], ["LIMIT", 1]]

7:57:23 AM web.1 | ↳ app/models/user.rb:341:in `default_from_twnumber'

7:57:23 AM web.1 | Unpermitted parameters: :audio_file, :id. Context: { controller: Clients::VoiceRecordingsController, action: save_audio_file, request: #<ActionDispatch::Request:0x000000011bc4d148>, params: {"audio_file"=>"eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZTA9IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1ef0234207c547b0368b21f4eff9412b7471deb8", "controller"=>"clients/voice_recordings", "action"=>"save_audio_file", "client_id"=>"1", "id"=>"39"} }

7:57:23 AM web.1 | CACHE Client Load (0.0ms) SELECT "clients".* FROM "clients" WHERE "clients"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]

7:57:23 AM web.1 | ↳ app/controllers/clients/client_controller.rb:24:in `set_client'

7:57:23 AM web.1 | Unpermitted parameters: :audio_file, :client_id. Context: { controller: Clients::VoiceRecordingsController, action: save_audio_file, request: #<ActionDispatch::Request:0x000000011bc4d148>, params: {"audio_file"=>"eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZTA9IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1ef0234207c547b0368b21f4eff9412b7471deb8", "controller"=>"clients/voice_recordings", "action"=>"save_audio_file", "client_id"=>"1", "id"=>"39"} }

7:57:23 AM web.1 | VoiceRecording Load (0.6ms) SELECT "voice_recordings".* FROM "voice_recordings" WHERE "voice_recordings"."client_id" = $1 AND "voice_recordings"."id" = $2 LIMIT $3 [["client_id", 1], ["id", 39], ["LIMIT", 1]]

7:57:23 AM web.1 | ↳ app/controllers/clients/voice_recordings_controller.rb:180:in `set_voice_recording'

7:57:23 AM web.1 | ActiveStorage::Attachment Load (2.1ms) SELECT "active_storage_attachments".* FROM "active_storage_attachments" WHERE "active_storage_attachments"."record_id" = $1 AND "active_storage_attachments"."record_type" = $2 AND "active_storage_attachments"."name" = $3 LIMIT $4 [["record_id", 39], ["record_type", "VoiceRecording"], ["name", "audio_file"], ["LIMIT", 1]]

7:57:23 AM web.1 | ↳ app/controllers/clients/voice_recordings_controller.rb:124:in `save_audio_file'

7:57:23 AM web.1 | Unpermitted parameters: :client_id, :id. Context: { controller: Clients::VoiceRecordingsController, action: save_audio_file, request: #<ActionDispatch::Request:0x000000011bc4d148>, params: {"audio_file"=>"eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZTA9IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1ef0234207c547b0368b21f4eff9412b7471deb8", "controller"=>"clients/voice_recordings", "action"=>"save_audio_file", "client_id"=>"1", "id"=>"39"} }

7:57:23 AM web.1 | TRANSACTION (0.4ms) BEGIN