Rails 4 - Kendo UI ImageBrowser successful upload but undefined thumbnail

Question

I am integrating Kendo UI editor with my custom CMS in Rails 4. Everything seems to work except a bug after a new image is uploaded. After I choose the image to upload the ImageBrowser adds a new item and displays the "upload in progress" circle. First it shows the image's file name near the circle, then it changes to undefined.

But if I close the ImageBrowser then open it again, the thumbnail is there as expected, without an error. If I artificially produce an error in the controller, at the end of the create action, then an error popup appears in the Kendo ImageBrowser (with 404 or 500), and if I wait a bit before clicking on the ok button then after clicking on it the thumbnail is there as expected also.

So I guess 2 things:

1. I am not providing the correct/expected response for the ImageBrowser at the end of the create action. (tried to render the same json as I render for transport.read but the problem still occurs). In this case my question is: What kind of response does Kendo ImageBrowser expect?
2. It takes time to upload/process/resize the image and kendo asks too soon (so it gets an "undefined" result), and won't "ask" again. In this case my question is: How/when to delay or call read again to display the newly uploaded image's thumbnail correctly, without getting undefined back?

Any suggestions to fix this? Or is it an error on Kendo UI side?

Heres snippet from the output:

Started POST "/kezelo/assets" for 127.0.0.1 at 2014-01-17 18:09:33 +0100
Processing by Kezelo::AssetsController#create as */*
  Parameters: {"file"=>#<ActionDispatch::Http::UploadedFile:0x007fa78bb00b00 @tempfile=#<Tempfile:/var/folders/90/wjyhxjfs3gz3xkhsk8z_sz2w0000gn/T/RackMultipart20140117-49102-5lwwh4>, @original_filename="100_3048.JPG", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"file\"; filename=\"100_3048.JPG\"\r\nContent-Type: image/jpeg\r\n">, "path"=>"", "authenticity_token"=>"sdKhe348x26hm0k8kirzHlYgmH1LN73wf3ZWyOA5PHY="}
   (0.1ms)  begin transaction
  SQL (0.7ms)  INSERT INTO "assets" ("created_at", "image_file_size", "kendo_type", "photo", "updated_at") VALUES (?, ?, ?, ?, ?)  [["created_at", Fri, 17 Jan 2014 17:09:35 UTC +00:00], ["image_file_size", 247716], ["kendo_type", "f"], ["photo", "100_3048.JPG"], ["updated_at", Fri, 17 Jan 2014 17:09:35 UTC +00:00]]
   (1.6ms)  commit transaction
  Asset Load (0.4ms)  SELECT "assets".* FROM "assets"
Completed 200 OK in 1416ms (Views: 29.7ms | ActiveRecord: 2.7ms)


Started GET "/uploads/assets/undefined" for 127.0.0.1 at 2014-01-17 18:09:35 +0100

ActionController::RoutingError (No route matches [GET] "/uploads/assets/undefined"):
  actionpack (4.0.2) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
  actionpack (4.0.2) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
  railties (4.0.2) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.0.2) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.0.2) lib/active_support/tagged_logging.rb:67:in `block in tagged'
  activesupport (4.0.2) lib/active_support/tagged_logging.rb:25:in `tagged'
  activesupport (4.0.2) lib/active_support/tagged_logging.rb:67:in `tagged'
  railties (4.0.2) lib/rails/rack/logger.rb:20:in `call'
  actionpack (4.0.2) lib/action_dispatch/middleware/request_id.rb:21:in `call'
  rack (1.5.2) lib/rack/methodoverride.rb:21:in `call'
  rack (1.5.2) lib/rack/runtime.rb:17:in `call'
  activesupport (4.0.2) lib/active_support/cache/strategy/local_cache.rb:83:in `call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  actionpack (4.0.2) lib/action_dispatch/middleware/static.rb:64:in `call'
  rack (1.5.2) lib/rack/sendfile.rb:112:in `call'
  railties (4.0.2) lib/rails/engine.rb:511:in `call'
  railties (4.0.2) lib/rails/application.rb:97:in `call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  rack (1.5.2) lib/rack/content_length.rb:14:in `call'
  rack (1.5.2) lib/rack/handler/webrick.rb:60:in `service'
  /usr/local/rvm/rubies/ruby-2.0.0-p247/lib/ruby/2.0.0/webrick/httpserver.rb:138:in `service'
  /usr/local/rvm/rubies/ruby-2.0.0-p247/lib/ruby/2.0.0/webrick/httpserver.rb:94:in `run'
  /usr/local/rvm/rubies/ruby-2.0.0-p247/lib/ruby/2.0.0/webrick/server.rb:295:in `block in start_thread'


  Rendered /usr/local/rvm/gems/ruby-2.0.0-p247/gems/actionpack-4.0.2/lib/action_dispatch/middleware/templates/rescues/_trace.erb (1.4ms)
  Rendered /usr/local/rvm/gems/ruby-2.0.0-p247/gems/actionpack-4.0.2/lib/action_dispatch/middleware/templates/routes/_route.html.erb (4.4ms)
  Rendered /usr/local/rvm/gems/ruby-2.0.0-p247/gems/actionpack-4.0.2/lib/action_dispatch/middleware/templates/routes/_table.html.erb (1.4ms)
  Rendered /usr/local/rvm/gems/ruby-2.0.0-p247/gems/actionpack-4.0.2/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (47.9ms)

My transport read url is (with dataType: json):

http://localhost:3000/kezelo/assets

The json output for the above url:

[{"id":21,"name":"MAP_0528.JPG","type":"f","size":573896},{"id":22,"name":"MAP_0565.JPG","type":"f","size":646608},{"id":24,"name":"MAP_0667.JPG","type":"f","size":370408},{"id":26,"name":"mami_a_kertben.JPG","type":"f","size":364433},{"id":28,"name":"15kg_os.jpg","type":"f","size":975517},{"id":29,"name":"MAP_0257.jpg","type":"f","size":357723},{"id":31,"name":"DSC_0113.JPG","type":"f","size":574744},{"id":33,"name":"DSC_0062.JPG","type":"f","size":287631},{"id":34,"name":"100_2997.JPG","type":"f","size":126418},{"id":35,"name":"100_2999.JPG","type":"f","size":364433},{"id":36,"name":"100_3002.JPG","type":"f","size":340892},{"id":37,"name":"100_3025.JPG","type":"f","size":199709},{"id":38,"name":"100_3005.JPG","type":"f","size":435145},{"id":39,"name":"100_3019.JPG","type":"f","size":152869},{"id":40,"name":"100_3033.JPG","type":"f","size":208811},{"id":41,"name":"100_3039.JPG","type":"f","size":264420},{"id":42,"name":"100_3048.JPG","type":"f","size":247716}]

Answer 1

Problem solved. My first guess was right. I didn't provide the appropriate response for Kendo ImageBrowser. It needed ONLY the uploaded image data in json format like this:

{"name":"new_image_name","type":"f","size":646608} 

Now it works like a charm! The most tricky thing of this integration was to provide a suitable json output for Kendo. For those who would like to use this editor in their apps, look into the acts_as_api gem. It will ease your pain.