Vue Js & Rails: How to display image attached with blob - ruby-on-rails

I'm uploading image files using Rails Active Storage gem and they are being hosted in AWS S3. However, I wonder how could I display the image attached to each record in my Vue Js component. I have tried to directly call the image file name but it did not work; Also, I tried to use the AWS image_url but after some time I realized that it was an incorrect approach. What would be your suggestions to accomplish this?

Related

Uploading Webcam screenshot with Rails 5 ActiveStorage

Like the new ActiveStorage functionality in Rails 5.2.
My app let's the user take a still form their webcam, which I then need to upload as an attachment.
Does anyone know how to do this with ActiveStorage?
My setup accesses the webcam via JS using navigator.mediaDevices.getUserMedia and copies a still to an image tag via a canvas. I've tried uploading the data from the img tag to ActiveStorage, but either ignores it or gives a signing error.
Any ideas if this is possible and how it could be done??
thanks!

seed images using carrierwave

I am trying to create a Angular 4 app that uses a rails API to display and upload images. to upload images using the rails API I have decided to use carrierwave. what I would like to know is how do I seed some initial images and store the url in the database? below is what I have done in my db.seed file
Pictures.create!(
image: Rails.root.join("C:/Ciaran/admin/src/assets/images/test_img1.jpg").open,
)
However where is the image stored in my rails app folder? I do not see it anywhere.
And when I inspect the pictures table in MySQL for the image column the whole url is not displayed only test_img1.jpg? How do I make it show the full url?
So basically if someone who knows more about rails and carrierwave could please explain to me:
For the code snippet that I have shown above does that create a copy of the image into my rails app? because I do not see it in any of the apps folders once I have seeded the database?
why is the full url not displayed in the database table for pictures and how do I get it to display the full url so I can access it from my angular front end?
Thank you for your help
1 - in your app folder there should be a file called image_uploader.rb. And it should have a def store_dir which indicates where is your files are stored.
2 - because full url is generated based on the above image_uploader.rb configuration file. You can simply get the url for example if your model instance variable is #picture
#picture = Picture.first
#picture.image.thumb.url

Prawn PDF: how to add images uploaded with dragonfly

I like to generate PDF-Files which also includes images uploaded by the user. The prawn gem works so far, and can also embed images located in the file system.
My problem is that I want to include user uploaded images, and where these images are stored will probably change in the future (from file system to some cloud service).
I use the dragonfly gem for handling the images, this uses rack to access the images and sometimes process them on the fly.
Now the simpliest idea does not work
(with report being my object and spot_image my image field)
image report.spot_image
no implicit conversion of #<Class:0x007fc07ecf1110> into String
I tried also to open the file via http with open-uri. This should work, but it blocks on my development machine, I think because the development rails server is single threaded:
image_path = report.spot_image.remote_url
image_url = "#{view.request.protocol}\#view.request.host_with_port}
/#{image_path.sub(/^\//,"")}"
image open(image_url) # timeout in development-mode
It may probably work in production, but even then it does a needless http-request. Can I ask dragonfly (or rack) directly for the image? prawn uses duck-typing and needs some object that responds to read and rewind as image.
I found relevant documentation about dragonfly file handling. The following did not work:
The report.spot_image.data method returns the image data as string, but prawn recognizes the data as path instead of as image data. The dragonfly tempfile method returns a closed temporary file, but prawn does not recognize that it can open it.
I had success with the file method, which returns an open file handle. It is unclear if prawn is closing this file than. So I used the block-style method to make sure the file is closed:
report.spot_image.file do |f|
image f
end
This works so far. (not yet tested with cloud storage)

Rails s3_direct_upload how to disable it

In Rails, I am using s3_direct_upload gem for asset(doc file) upload. Right now if I try to upload an image file as a different asset, it is directly uploading to s3. I need to disable this option for image upload and it should be enable only for document upload.
s3_direct_upload is provides form helper methods to upload images to s3 directly. like this s3_uploader_form. It just reduces your jquery_file_upload and s3 configuration.
But you can still upload image to your local file system. Using simple form_tag. i.e. When you want to upload images to s3 use s3_uploader_form syntax and when you want to upload images to local file system then use simple form_tag or any other rails provided form syntax.
For uploading images using ajax use remotipart gem with simple form syntax.

Uploading image from PhoneGap to Carrierwave / Rails 3?

I'm trying to figure out the best way to upload a camera image from a PhoneGap app to a Rails 3 app that has Carrierwave on it. My thoughts so far:
Option 1) Use phonegap filetransfer functionality to upload to a temp folder on S3 then assign the URL to the remote_avatar_url for my carrierwave field. Then carrierwave does all the work for me in terms of grabbing the image, resizing, cropping, etc. Carrierwave will then send the files back over to S3 where they will be stored in the right places.
Option 2) Use phonegap filetransfer functionality to upload directly to my rails server then let carrierwave do the work from here. This seems more efficient, but I don't know how to assign an image that was posted to a rails api controller to Carrierwave so that it can do its thing. Any ideas assuming this is the best way to handle?
Thanks!
You can send the image as Base64/encode and than parse it on the CarrierWave side. Take a look at http://ograycoding.wordpress.com/2012/07/03/api-upload-with-carrierwave/

Resources