[WIP - help wanted] attempt at getting data-uri based image upload working

[jywarren]

Guidance (not working): https://stackoverflow.com/questions/23675747/use-paperclip-for-saving-base64-images-obtained-from-an-api?noredirect=1&lq=1

https://github.com/thoughtbot/paperclip/blob/f384174392ce192c9d76bd447902fe8a3ecf70ad/README.md#io-adapters

From a note page, i'm trying (in javascript console):

var token = $('meta[name="csrf-token"]').attr('content');
// sample image:
var data = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z";

$.post('/images/create', { authenticity_token: token,  data: data, uid: 1, image: { title: '', notes: '' }  }, console.log);

But getting:

Started POST "/images/create" for 127.0.0.1 at 2018-10-05 11:22:52 -0400
Processing by ImagesController#create as */*
  Parameters: {"authenticity_token"=>"r0bzzuKtNIF8HpQmSmTndzNM+a1ndsWm/keBtL9nQZaWav70zqSM1bv+hsNqT9fDmvJZrtMKii2xF2md8MylkQ==", "data"=>"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z", "uid"=>"1", "image"=>{"title"=>"", "notes"=>""}}
  User Load (1.0ms)  SELECT  `rusers`.* FROM `rusers` WHERE `rusers`.`id` = 15 LIMIT 1
  User Load (1.1ms)  SELECT  `rusers`.* FROM `rusers` WHERE `rusers`.`id` = 4 LIMIT 1
   (0.3ms)  BEGIN
  User Update (0.7ms)  UPDATE `rusers` SET `last_request_at` = '2018-10-05 15:22:53', `updated_at` = '2018-10-05 15:22:53' WHERE `rusers`.`id` = 4
   (7.0ms)  COMMIT
  DrupalUser Load (0.6ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = 'warren' LIMIT 1
  CACHE DrupalUser Load (0.1ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = 'warren' LIMIT 1  [["name", "warren"], ["LIMIT", 1]]
  CACHE DrupalUser Load (0.1ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = 'warren' LIMIT 1  [["name", "warren"], ["LIMIT", 1]]
  CACHE DrupalUser Load (0.1ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = 'warren' LIMIT 1  [["name", "warren"], ["LIMIT", 1]]
  CACHE DrupalUser Load (0.1ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = 'warren' LIMIT 1  [["name", "warren"], ["LIMIT", 1]]
Completed 500 Internal Server Error in 699ms (ActiveRecord: 24.3ms)

ActiveModel::UnknownAttributeError (unknown attribute 'image' for Image.):

app/controllers/images_controller.rb:19:in `create'

[jywarren]

Hi @siaw23 this seemed like something you might "just know" -- i dunno. Got a bit stuck, so if anything here makes sense to you, i'd love some help!

[jywarren]

Also noting that Paperclip is deprecated but it will likely take us a while to move to ActiveStorage: https://github.com/thoughtbot/paperclip/blob/master/MIGRATING.md

[jywarren]

I also don't see that ActiveStorage has data-uri uploads... er maybe? rails/rails@c2ba530

and we are looking at potentially doing CDN integration for images, and ActiveStorage maybe doesn't yet support this? https://stackoverflow.com/questions/50676891/rails-activestorage-link-to-cloudfront

But... maybe? rails/rails#31419 (comment)

Anyways we cross that bridge when we get to it. We can move these notes into a separate issue.

[plotsbot]

	2 Messages
📖	@jywarren Thank you for your pull request! I’m here to help with some tips and recommendations. Please take a look at the list provided and help us review and accept your contribution! And don’t be discouraged if you see errors – we’re here to help.
📖	This pull request doesn’t link to a issue number. Please refer to the issue it fixes (if any) in the body of your PR, in the format: Fixes #123.

Generated by 🚫 Danger

[jywarren]

Haha, it passes tests. Whoops. We'll need a test.

[jywarren]

there we go!

[jywarren]

Confirmed that this works using the following script, from JavaScript console on any PublicLab.org page:

var token = "r0bzzuKtNIF8HpQmSmTndzNM+a1ndsWm/keBtL9nQZaWav70zqSM1bv+hsNqT9fDmvJZrtMKii2xF2md8MylkQ=="; // CSRF token

var data = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z";

$.post('/images/create', { authenticity_token: token,  data: data, uid: 1, photo: { title: '', notes: '' }  }, console.log);

[jywarren]

however, we need to set the filename to end in .png