How to format and render AWS S3 image attachment to be used in React?How can I rename a database column in a Ruby on Rails migration?Loop inside React JSXReact “after render” code?Set focus on input after renderSerializing a custom attributeWhat is the difference between using constructor vs getInitialState in React / React Native?What do these three dots in React do?Programmatically navigate using react routerWhat is the difference between React Native and React?How do I render an Active Storage attachment form Rails to React?

split inside flalign

What does Argus Filch specifically do?

Should I use (1,3) or (1-3) or (4)?

Did Logical Positivism fail because it simply denied human emotion?

Are the related objects in an SOQL query shared?

Piece de Resistance - Introduction & Ace and A's

How to check a file was encrypted (really & correctly)

When using the Proficiency Dice optional rule, how should they be used in determining a character's Spell Save DC?

Probably terminated or laid off soon; confront or not?

The warlock of firetop mountain, what's the deal with reference 192?

Why is Heisenberg shown dead in Negro y Azul?

How do I handle a DM that plays favorites with certain players?

In MTG, was there ever a five-color deck that worked well?

Glue-up for butcher block-style countertop

On the consistency of different well-polished astronomy software

Does a humanoid possessed by a ghost register as undead to a paladin's Divine Sense?

…down the primrose path

Is there any difference between "result in" and "end up with"?

Repeated! Factorials!

Is the first page of a novel really that important?

Is there a general term for the items in a directory?

Can a Hogwarts student refuse the Sorting Hat's decision?

Is there a command-line tool for converting html files to pdf?

Can the Cauchy product of divergent series with itself be convergent?



How to format and render AWS S3 image attachment to be used in React?


How can I rename a database column in a Ruby on Rails migration?Loop inside React JSXReact “after render” code?Set focus on input after renderSerializing a custom attributeWhat is the difference between using constructor vs getInitialState in React / React Native?What do these three dots in React do?Programmatically navigate using react routerWhat is the difference between React Native and React?How do I render an Active Storage attachment form Rails to React?






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








0















I'm sending image attachments from React to Rails Active Storage as a blob. Everything uploads to AWS S3 ok but the data coming back isn't suitable to render with <Image.



Here's an example of what comes back to React:



 avatar: "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2…736b6edc83b7ccfc91c7914d7eb595a697fb/IMG_2008.png"


My User model looks like this:



class User < ApplicationRecord
include Rails.application.routes.url_helpers

has_secure_password
has_one_attached :avatar

def avatar_filename
self.avatar.filename.to_s if self.avatar.attached?
end

def avatar_attached?
self.avatar.attached?
end

has_many :sightings
has_many :animals, through: :sightings
has_many :comments, :as => :commentable, dependent: :destroy


validates :username, uniqueness: true

def attachment_url
if self.attachment.attached?
Rails.application.routes.url_helpers.rails_blob_path(self.attachement, only_path:true)
else
nil
end
end

end


and UserSerializer looks like this:




class UserSerializer < ActiveModel::Serializer
include Rails.application.routes.url_helpers

attributes :id, :name, :username, :avatar

has_many :sightings
has_many :animals, through: :sightings

def avatar
rails_blob_path(object.avatar, only_path: true) if object.avatar.attached?
end


end



So I am using url_helper but not sure if I'm using correctly since I'm a newb and the documentation can be confusing.










share|improve this question
























  • I don't use it but I think, you need to use _url instead of _path. Try to use rails_blob_url or only_path: false

    – IlyaOsotov
    Mar 27 at 9:05

















0















I'm sending image attachments from React to Rails Active Storage as a blob. Everything uploads to AWS S3 ok but the data coming back isn't suitable to render with <Image.



Here's an example of what comes back to React:



 avatar: "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2…736b6edc83b7ccfc91c7914d7eb595a697fb/IMG_2008.png"


My User model looks like this:



class User < ApplicationRecord
include Rails.application.routes.url_helpers

has_secure_password
has_one_attached :avatar

def avatar_filename
self.avatar.filename.to_s if self.avatar.attached?
end

def avatar_attached?
self.avatar.attached?
end

has_many :sightings
has_many :animals, through: :sightings
has_many :comments, :as => :commentable, dependent: :destroy


validates :username, uniqueness: true

def attachment_url
if self.attachment.attached?
Rails.application.routes.url_helpers.rails_blob_path(self.attachement, only_path:true)
else
nil
end
end

end


and UserSerializer looks like this:




class UserSerializer < ActiveModel::Serializer
include Rails.application.routes.url_helpers

attributes :id, :name, :username, :avatar

has_many :sightings
has_many :animals, through: :sightings

def avatar
rails_blob_path(object.avatar, only_path: true) if object.avatar.attached?
end


end



So I am using url_helper but not sure if I'm using correctly since I'm a newb and the documentation can be confusing.










share|improve this question
























  • I don't use it but I think, you need to use _url instead of _path. Try to use rails_blob_url or only_path: false

    – IlyaOsotov
    Mar 27 at 9:05













0












0








0








I'm sending image attachments from React to Rails Active Storage as a blob. Everything uploads to AWS S3 ok but the data coming back isn't suitable to render with <Image.



Here's an example of what comes back to React:



 avatar: "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2…736b6edc83b7ccfc91c7914d7eb595a697fb/IMG_2008.png"


My User model looks like this:



class User < ApplicationRecord
include Rails.application.routes.url_helpers

has_secure_password
has_one_attached :avatar

def avatar_filename
self.avatar.filename.to_s if self.avatar.attached?
end

def avatar_attached?
self.avatar.attached?
end

has_many :sightings
has_many :animals, through: :sightings
has_many :comments, :as => :commentable, dependent: :destroy


validates :username, uniqueness: true

def attachment_url
if self.attachment.attached?
Rails.application.routes.url_helpers.rails_blob_path(self.attachement, only_path:true)
else
nil
end
end

end


and UserSerializer looks like this:




class UserSerializer < ActiveModel::Serializer
include Rails.application.routes.url_helpers

attributes :id, :name, :username, :avatar

has_many :sightings
has_many :animals, through: :sightings

def avatar
rails_blob_path(object.avatar, only_path: true) if object.avatar.attached?
end


end



So I am using url_helper but not sure if I'm using correctly since I'm a newb and the documentation can be confusing.










share|improve this question














I'm sending image attachments from React to Rails Active Storage as a blob. Everything uploads to AWS S3 ok but the data coming back isn't suitable to render with <Image.



Here's an example of what comes back to React:



 avatar: "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2…736b6edc83b7ccfc91c7914d7eb595a697fb/IMG_2008.png"


My User model looks like this:



class User < ApplicationRecord
include Rails.application.routes.url_helpers

has_secure_password
has_one_attached :avatar

def avatar_filename
self.avatar.filename.to_s if self.avatar.attached?
end

def avatar_attached?
self.avatar.attached?
end

has_many :sightings
has_many :animals, through: :sightings
has_many :comments, :as => :commentable, dependent: :destroy


validates :username, uniqueness: true

def attachment_url
if self.attachment.attached?
Rails.application.routes.url_helpers.rails_blob_path(self.attachement, only_path:true)
else
nil
end
end

end


and UserSerializer looks like this:




class UserSerializer < ActiveModel::Serializer
include Rails.application.routes.url_helpers

attributes :id, :name, :username, :avatar

has_many :sightings
has_many :animals, through: :sightings

def avatar
rails_blob_path(object.avatar, only_path: true) if object.avatar.attached?
end


end



So I am using url_helper but not sure if I'm using correctly since I'm a newb and the documentation can be confusing.







ruby-on-rails reactjs amazon-s3 rails-activestorage






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Mar 27 at 2:37









Demian SimsDemian Sims

701 silver badge10 bronze badges




701 silver badge10 bronze badges















  • I don't use it but I think, you need to use _url instead of _path. Try to use rails_blob_url or only_path: false

    – IlyaOsotov
    Mar 27 at 9:05

















  • I don't use it but I think, you need to use _url instead of _path. Try to use rails_blob_url or only_path: false

    – IlyaOsotov
    Mar 27 at 9:05
















I don't use it but I think, you need to use _url instead of _path. Try to use rails_blob_url or only_path: false

– IlyaOsotov
Mar 27 at 9:05





I don't use it but I think, you need to use _url instead of _path. Try to use rails_blob_url or only_path: false

– IlyaOsotov
Mar 27 at 9:05












0






active

oldest

votes










Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55368956%2fhow-to-format-and-render-aws-s3-image-attachment-to-be-used-in-react%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes




Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.







Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.



















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55368956%2fhow-to-format-and-render-aws-s3-image-attachment-to-be-used-in-react%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

How to preserve electronics (computers, tablets and phones) for hundreds of years Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) The network's official Twitter account is up and running again. What content…How might modern humans leave a message for 50,000 years?How would an aquatic race develop computers?How do we make computers care for human life?Keeping supplies for 1000 yearsWhat will cell phones become in 100 years?What body armor protects against a laser?Could a society attain 1800s technology if limited to using copper and bronze?Electricity power (magic) and electronicsScavenging metal resources in post-apocalypse after 100 yearsWhy would precursors create devices that can survive and still work after hundreds of years?

155 수학 과학 기타 둘러보기 메뉴eh추가해eh문서를 완성해

Convert JSON to MapSimplest way to convert a string representing JSON array into Java array List of key value pairsHow to take String JSON values into HashMapConvert a JSON String to a HashMapCreating BSON object from JSON stringJSONObject - How to get a value ?Better Map ConstructorReading JSON from Url javaUpdate columns if input values are not null otherwise ignore and keep the existing values of column in databaseHow to store object represented as Json string into Couchbase Lite?Go JSON into MapHow do I efficiently iterate over each entry in a Java Map?Sort a Map<Key, Value> by valuesHow to round a number to n decimal places in JavaCan comments be used in JSON?How do I read / convert an InputStream into a String in Java?How can I pretty-print JSON in a shell script?What is the correct JSON content type?How can I deserialize JSON to a simple Dictionary<string,string> in ASP.NET?Why does Google prepend while(1); to their JSON responses?Parse JSON in JavaScript?