Archief - ["RAILS”] Image_tag content to apply controller

AliChemicali · 21 mei 2013

Hello!

Ik krijg mijn image_tag content maar niet naar mijn apply controller via parameters.

Als ik het volgende doe in mijn apply_helper:

Code:

 file_field_tag("profile_pic")

En de user upload vervolgens een image gaat dat allemaal mooi naar de apply controller onder de vorm van params

Maar als ik het volgende doe in mijn apply_helper:

Code:

image_tag("user.png", :alt => "profile_pic", :id => "profile_pic")

of

Code:

image_tag("user.png", :alt => "PROFILE_PIC", :id => "PROFILE_PIC")

Krijg ik niets van deze params in mijn apply controller.
Ik heb zitten proberen met andere namen, met een link_to er rond, rechtstreeks in de controller, ...

Meer code kun je vinden in deze gist: https://gist.github.com/YOUConsulting/f2066fb330443b92fba6

Alvast bedankt voor de hulp!

Greetz.

EDIT: Misschien nog wat meer uitleg geven over de opzet, de user kan namelijk zijn profielfoto van linkedin halen of leeg laten en dan krijg je die user.png of zelf een foto uploaden via de file_field_tag.

EDIT2: Ik heb zitten proberen om rechtstreeks wat dingen te doen zoals:

Code:

     raw("<img id='profile_pic' name='profile_pic' src='/assets/user.png'/>")

of

Code:

 image_tag('user.png', :profile_pic =>'test')

of gewoon rechtstreeks de params proberen te vullen:

rofile_pic = "test"
personal_info[profile_pic] = "test"

bealzebub · 21 mei 2013

T is allemaal nogal messy en de echt relevante code (controller en model) zit niet in die gist, maar ik zal een gokje doen.

Je duwt wrsch die params in een instance van je User model. Als ik het zo bekijk, dan ga ik van de veronderstelling uit dat je de geuploade image als BLOB in je db opslaat en niet als file ergens wegschrijft. Zit die data effectief dan ook in de database?

Nu, als je dan je image rechtstreeks in je image tag wil gaan embedden, dan moet die van het volgende formaat zijn:

Code:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALgAAAC4CAIAAADfUbGQAAAgAElEQVR4nEy8aY9lWXYdttbe59z7Xkw5jzV1VTe7m2xSHECLTcoybRkWINmGYBmQLFp/yv/BgD/4iz/YMAQIhGTKcJNNenzovoort" />

Je moet met andere woorden meegeven wat het formaat is (dat krijg je mee in de headers van je file upload params en moet je dus ook in de db opslaan) en je moet de content Base64 encoden, jij gaat die in je helper gaan decoden.

Nu, heb je een reden waarom je de images opslaat in de DB als BLOBs? Distributed environment, master/slave environment, …? Op zich is er niets verkeerd mee, maar filesystem based storages is makkelijker, performanter en je webserver kan ze rechtstreeks serven zonder door de volledige rack stack te moeten gaan.

Gebruik je CarrierWave, Paperclip of DragonFly voor je image uploading? Indien niet, misschien toch eens kijken voor één van die gems (opgesomd in volgorde van maturiteit), ze dekken heel wat complexiteit rond file uploads en handling en het maakt de zaken een stuk eenvoudiger om mee te werken.

De informatie die je nu gegeven hebt lijkt veel, maar doet totaal niet terzake, je moet volgende zaken bekijken:

Komt de file upload data binnen in m'n controller (blijkbaar wel)
Wat doe ik met die data in m'n controller (op een model initializen en saven?)? (Zo te zien een model instantiëren)
Wordt de file upload data effectief op m'n model gezet en wordt die data ook effectief in de db bewaard?
Hoe werk ik? Filebased of BLOB-based? Hoe moet ik dan in m'n view de image gaan tonen (via file URI src of via embedded Base64 src)?
Wat wordt er effectief in m'n <img> tag src attribute gerenderd?

Er gaat dus ergens iets fout, maar eigenlijk heb je geen idee waar en daardoor kan je niet de nodige info geven in deze post zodat iemand je kan helpen om de kern van het probleem te bepalen en op te lossen.

AliChemicali · 21 mei 2013

Alvast bedankt voor een reactie:
Mijn images gaan naar de SAP database en deze kan alleen omgaan met XSTRING(BLOB).
Ik gebruik dragon fly voor image_uploads.

Dat ter zijde, file upload lukt perfect!

Het probleem is om bv. de default image naar de controller te krijgen deze toont men d.m.v. een image_tag in de apply_helper.

BV: image_tag("user.png"). Deze laat dan mooi mijn image zien op het scherm maar als ik dan apply doe wil ik ergens de "source" van die image_tag in mijn controller krijgen en dit wilt maar niet lukken.

Ik heb vanalles zitten proberen raw, id, name,...

Snap je ongeveer wat mijn probleem is.

Ik ga het toch nog eens verder proberen te verduidelijken.
Als de user niet via linkedin zijn profiel aanmaakt zal hij een default image te zien krijgen.
De view:

Code:

 <label>
     <%= render_profile_image(form_data.by_name("PROFILE_PIC"), "Profile picture","Profile picture") %>
  </label>

Render_profile_image verwijst naar de apply helper
De apply_helper
def render_profile_image(field, alt, title)
image_tag('user.png')
end

Als dit allemaal gedaan is komt de user op de volgende view:

Link to view

Via firebug ziet de image_tag en sex er zo uit, ter info sex komt wel in params:

Code:

<label>
<span>Sex</span>
<select id="personal_info_SEX" name="personal_info[SEX]">
</label>
<label>
<img alt="User" src="/assets/user.png"/>
</label>

Als je nog iets nodigt van mijn code, feel free to ask!

EDIT: Mijn file upload is een propere rendeer namelijk:

Code:

 <input id="profile_pic" name="profile_pic" type="file"/>

bealzebub · 21 mei 2013

Als k t goe versta wil je van die image tag het src attribute terug meegeven met de rest van je form? Dat kan uiteraard niet, enkel form elements worden doorgegeven (en dat is <img> niet). De beginselen van HTML…

Als dit effectief het probleem is, dan is de oplossing poepsimpel:

Code:

def render_profile_image(field, alt, title)
  image_tag(field) + hidden_field_tag('personal_info[PROFILE_PIC]', field)
end

Of hidden_field ofzo (als je met een object werkt). T is aan jou om uit te zoeken welke manier het beste is voor jouw toepassing. Die image_tag en hidden_field_tag helpers renderen uiteindelijk een string uit, dus je kan die gewoon als strings gaan samenvoegen.

Je rendert dus een hidden form input met de nodige gegevens. Die zullen wel in je personal_info params meekomen.

AliChemicali · 21 mei 2013

bealzebub zei:
Als k t goe versta wil je van die image tag het src attribute terug meegeven met de rest van je form? Dat kan uiteraard niet, enkel form elements worden doorgegeven (en dat is <img> niet). De beginselen van HTML…

Als dit effectief het probleem is, dan is de oplossing poepsimpel:

Code:

def render_profile_image(field, alt, title) image_tag(field) + hidden_field_tag('personal_info[PROFILE_PIC]', field) end

Of hidden_field ofzo (als je met een object werkt). T is aan jou om uit te zoeken welke manier het beste is voor jouw toepassing. Die image_tag en hidden_field_tag helpers renderen uiteindelijk een string uit, dus je kan die gewoon als strings gaan samenvoegen.

Je rendert dus een hidden form input met de nodige gegevens. Die zullen wel in je personal_info params meekomen.

het is mij juist gelukt om mijn data mee te geven via flash is dit "proper"?

AliChemicali · 21 mei 2013

bealzebub zei:
Als k t goe versta wil je van die image tag het src attribute terug meegeven met de rest van je form? Dat kan uiteraard niet, enkel form elements worden doorgegeven (en dat is <img> niet). De beginselen van HTML…

Als dit effectief het probleem is, dan is de oplossing poepsimpel:

Code:

def render_profile_image(field, alt, title) image_tag(field) + hidden_field_tag('personal_info[PROFILE_PIC]', field) end

Of hidden_field ofzo (als je met een object werkt). T is aan jou om uit te zoeken welke manier het beste is voor jouw toepassing. Die image_tag en hidden_field_tag helpers renderen uiteindelijk een string uit, dus je kan die gewoon als strings gaan samenvoegen.

Je rendert dus een hidden form input met de nodige gegevens. Die zullen wel in je personal_info params meekomen.

het is mij juist gelukt om mijn data mee te geven via flash is dit "proper"?

bealzebub · 21 mei 2013

Flash is de dag van vandaag een zeer slechte oplossing, tenzij als fallback. Heel veel mensen hebben flashblockers (inclusief mezelf) en op mobile ben je al helemaal gesjareld.

Je kan hetzelfde gewoon via Javascript en canvas doen volgens mij (aan te passen indien nodig):

Code:

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware that using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Enige voorwaarde voor bovenstaande is dat je enkel IE9 of hoger ondersteunt (of een fallback via Flash voorziet voor versies lager dan dat). Al de rest van de browsers ondersteunt canvas al een eeuwigheid.

Andere optie is via de File API werken, maar dan schuift je support op naar IE10 of hoger (en Firefox 13 of hoger). File API is iets eenvoudiger dan canvas, maar mobile support trekt op nix tenzij bleeding edge versies (iOS 6, bleeding edge Android browser of Chrome for Android).

Vandaag de dag zou ik persoonlijk Flash zoveel mogelijk vermijden, je zal bij elke nieuwe versie van Flash moeten checken of alles nog hetzelfde werkt (hun security policy wordt regelmatig eens bijgestuurd) en vroeg of laat ga je rekening moeten houden met het feit dat Flash minder en minder zal geïnstalleerd zijn, zeker als je de populariteit van mobile devices als tablets en smartphones ziet stijgen tot het echt een requirement wordt.

AliChemicali · 21 mei 2013

bealzebub zei:
Flash is de dag van vandaag een zeer slechte oplossing, tenzij als fallback. Heel veel mensen hebben flashblockers (inclusief mezelf) en op mobile ben je al helemaal gesjareld.

Je kan hetzelfde gewoon via Javascript en canvas doen volgens mij (aan te passen indien nodig):

Code:

function getBase64Image(img) { // Create an empty canvas element var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; // Copy the image contents to the canvas var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); // Get the data-URL formatted image // Firefox supports PNG and JPEG. You could check img.src to // guess the original format, but be aware that using "image/jpg" // will re-encode the image. var dataURL = canvas.toDataURL("image/png"); return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); }

Enige voorwaarde voor bovenstaande is dat je enkel IE9 of hoger ondersteunt (of een fallback via Flash voorziet voor versies lager dan dat). Al de rest van de browsers ondersteunt canvas al een eeuwigheid.

Andere optie is via de File API werken, maar dan schuift je support op naar IE10 of hoger (en Firefox 13 of hoger). File API is iets eenvoudiger dan canvas, maar mobile support trekt op nix tenzij bleeding edge versies (iOS 6, bleeding edge Android browser of Chrome for Android).

Vandaag de dag zou ik persoonlijk Flash zoveel mogelijk vermijden, je zal bij elke nieuwe versie van Flash moeten checken of alles nog hetzelfde werkt (hun security policy wordt regelmatig eens bijgestuurd) en vroeg of laat ga je rekening moeten houden met het feit dat Flash minder en minder zal geïnstalleerd zijn, zeker als je de populariteit van mobile devices als tablets en smartphones ziet stijgen tot het echt een requirement wordt.

Je hebt gelijk Flash zal dan geen oplossing zijn, ik heb ook zitten lezen over Rails Env Variables, zou dit dan een alternatief kunnen zijn voor uw oplossing?

Ik bekritiseer uw oplossing niet, ik wil gewoon zoveel mogelijk mogelijkheden bekijken!

Alvast bedankt!

AliChemicali · 22 mei 2013

Ik heb juist gelezen, dat je ook kunt doen: session[

rofile_pic] is dat ook "clean"?

AliChemicali · 22 mei 2013

Heb het met hidden field gedaan, werkt perfect

VinceVe · 22 mei 2013

AliChemicali zei:
het is mij juist gelukt om mijn data mee te geven via flash is dit "proper"?

Met flash bedoel je dan de flash variabele, of bedoel je letterlijk een plugin (shockwave flash) ?
De flash variabele is hetzelfde als de session variabele, maar bij een flash message gaat de message maar 1 request mee.

Best zou ik dit in een hidden field gewoon steken. Omdat sessions en een flash message niet echt aan de orde zijn (voor data overdracht) hier. Een session ga je bvb gaan gebruiken als een gebruiker altijd aangelogd moet zijn.

Meer informatie:

Ruby on Rails Guides: Action Controller Overview < Flash messages
Ruby on Rails Guides: Ruby On Rails Security Guide < Sessions

Edit: Gezien dat je met hidden field hebt gedaan. Dat is de beste manier

bealzebub · 22 mei 2013

VinceVe zei:
Best zou ik dit in een hidden field gewoon steken. Omdat sessions en een flash message niet echt aan de orde zijn (voor data overdracht) hier. Een session ga je bvb gaan gebruiken als een gebruiker altijd aangelogd moet zijn.

Sessions hou je inderdaad gewoon best clean en voor wat het is: session management (en dat kan idd o.a. inlogggevens zijn). Gebruikersparameters steek je ofwel in localstorage (clientside) of in je model (en dus db) serverside. De session maakt gebruik van een cookie (base64encoding met authenticity check in Rails 3, encrypted in Rails 4) en ondertussen zouden we toch al moeten weten dat cookies geen vuilbak zijn waar je honderdduizend dingen in deponeert.

AliChemicali · 22 mei 2013

Alvast bedankt voor de uitleg van beide! het werkt via hidden field

Archief - ["RAILS”] Image_tag content to apply controller

AliChemicali

Legacy Member

bealzebub

Legacy Member

AliChemicali

Legacy Member

bealzebub

Legacy Member

AliChemicali

Legacy Member

AliChemicali

Legacy Member

bealzebub

Legacy Member

AliChemicali

Legacy Member

AliChemicali

Legacy Member

AliChemicali

Legacy Member

VinceVe

Legacy Member

bealzebub

Legacy Member

AliChemicali

Legacy Member