You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Christopher Auth <au...@codeheap.de> on 2015/10/07 08:58:53 UTC
Form submit load a no wicket element
Hi,
I have a problem, that I need to load a html element during submit, that
have not a 'wicket:id' attribute.
It is possible to do that?
In the html tree in the browser I add a new 'img' element with
javascript to a div. This element has not a wicket:id. But I need the
base64 encoded file in the img-tag.
The HTML that Wicket used:
<div class="editablediv" id="editablediv" contenteditable></div>
<script type="text/javascript">
if (document.addEventListener) {
document.addEventListener('paste', onPasteTriggered, false);
}
/*Called whenever a paste event has occured*/
function onPasteTriggered(e) {
if (typeof e.clipboardData != 'undefined') {
var copiedData = e.clipboardData.items[0]; //Get the
clipboard data
/*If the clipboard data is of type image, read the data*/
if (copiedData.type.indexOf("image") == 0) {
var imageFile = copiedData.getAsFile();
/*We will use HTML5 FileReader API to read the image file*/
var reader = new FileReader();
reader.onload = function (evt) {
var result = evt.target.result; //base64 encoded image
/*Create an image element and append it to the
content editable div*/
var img = document.createElement("img");
img.src = result;
document.getElementById("editablediv").appendChild(img);
};
/*Read the image file*/
reader.readAsDataURL(imageFile);
}
}
}
</script>
The HTML from Browser after paste the image:
<div contenteditable="" id="editablediv" class="editablediv"><img alt=""
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAt0AAAJSCAYAAAAf0Xn.../fic+YIIIAAAggggAAC3RH4f57viSsFn9zlAAAAAElFTkSuQmCC"></div>
Thanks
Christopher
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: AW: Re: Form submit load a no wicket element
Posted by Tobias Soloschenko <to...@googlemail.com>.
Hi,
beware that if you use Base64 in a hidden field and GET as method - the Base64 encoded content has to be URL safe.
kind regards
Tobias
> Am 07.10.2015 um 17:19 schrieb Christopher Auth <au...@codeheap.de>:
>
> Hi,
>
> I have found a solution to copy the base64 String into a hidden wicket field.
>
> So it works for me.
>
> Thanks
>
> Christopher
>
> ----- Originale Nachricht -----
> Von: Christopher Auth <au...@codeheap.de>
> Gesendet: 07.10.2015 - 10:26
> An: users@wicket.apache.org
> Betreff: Re: Form submit load a no wicket element
>
>> Hi,
>>
>> sorry. I need a way to get the base64 data of the image into a Java
>> Object. That I can save it into the database. I do not known a way to
>> use the Wicket-Model concept.
>>
>> On submit, wicket save all datas from the elements with a wicket:id
>> attribute into the models. But in my case wicket does not known that in
>> the div a img element will append. The img tag will add dynamically into
>> the html.
>>
>> Have Wicket provided a chance to get the encoded image into a Java Object?
>>
>>
>> I'm not a JavaEE expert, so I do not known how I get this info from
>> client site to the java server site.
>>
>> I hope I could be better described the problem.
>>
>>
>> Thanks
>>
>>
>> Christopher
>>
>>
>>> Am 07.10.2015 um 09:29 schrieb Martin Grigorov:
>>> Hi,
>>>
>>> What is the issue exactly?
>>> I see no problem for this (assuming you use modern browser that supports
>>> all used JS APIs).
>>>
>>> There is no Wicket involved so I don't expect any problems caused by Wicket.
>>>
>>> Martin Grigorov
>>> Wicket Training and Consulting
>>> https://twitter.com/mtgrigorov
>>>
>>>> On Wed, Oct 7, 2015 at 8:58 AM, Christopher Auth <au...@codeheap.de> wrote:
>>>>
>>>> Hi,
>>>>
>>>> I have a problem, that I need to load a html element during submit, that
>>>> have not a 'wicket:id' attribute.
>>>>
>>>> It is possible to do that?
>>>>
>>>> In the html tree in the browser I add a new 'img' element with
>>>> javascript to a div. This element has not a wicket:id. But I need the
>>>> base64 encoded file in the img-tag.
>>>>
>>>>
>>>>
>>>> The HTML that Wicket used:
>>>>
>>>> <div class="editablediv" id="editablediv" contenteditable></div>
>>>> <script type="text/javascript">
>>>> if (document.addEventListener) {
>>>> document.addEventListener('paste', onPasteTriggered, false);
>>>> }
>>>>
>>>> /*Called whenever a paste event has occured*/
>>>> function onPasteTriggered(e) {
>>>> if (typeof e.clipboardData != 'undefined') {
>>>> var copiedData = e.clipboardData.items[0]; //Get the
>>>> clipboard data
>>>>
>>>> /*If the clipboard data is of type image, read the data*/
>>>> if (copiedData.type.indexOf("image") == 0) {
>>>> var imageFile = copiedData.getAsFile();
>>>>
>>>> /*We will use HTML5 FileReader API to read the image file*/
>>>> var reader = new FileReader();
>>>>
>>>> reader.onload = function (evt) {
>>>> var result = evt.target.result; //base64 encoded image
>>>>
>>>> /*Create an image element and append it to the
>>>> content editable div*/
>>>> var img = document.createElement("img");
>>>> img.src = result;
>>>>
>>>> document.getElementById("editablediv").appendChild(img);
>>>> };
>>>>
>>>> /*Read the image file*/
>>>> reader.readAsDataURL(imageFile);
>>>> }
>>>> }
>>>> }
>>>> </script>
>>>>
>>>>
>>>> The HTML from Browser after paste the image:
>>>>
>>>> <div contenteditable="" id="editablediv" class="editablediv"><img alt=""
>>>>
>>>> src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAt0AAAJSCAYAAAAf0Xn.../fic+YIIIAAAggggAAC3RH4f57viSsFn9zlAAAAAElFTkSuQmCC"></div>
>>>>
>>>>
>>>>
>>>> Thanks
>>>>
>>>> Christopher
>>>>
>>>> ---------------------------------------------------------------------
>>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
AW: Re: Form submit load a no wicket element
Posted by Christopher Auth <au...@codeheap.de>.
Hi,
I have found a solution to copy the base64 String into a hidden wicket field.
So it works for me.
Thanks
Christopher
----- Originale Nachricht -----
Von: Christopher Auth <au...@codeheap.de>
Gesendet: 07.10.2015 - 10:26
An: users@wicket.apache.org
Betreff: Re: Form submit load a no wicket element
> Hi,
>
> sorry. I need a way to get the base64 data of the image into a Java
> Object. That I can save it into the database. I do not known a way to
> use the Wicket-Model concept.
>
> On submit, wicket save all datas from the elements with a wicket:id
> attribute into the models. But in my case wicket does not known that in
> the div a img element will append. The img tag will add dynamically into
> the html.
>
> Have Wicket provided a chance to get the encoded image into a Java Object?
>
>
> I'm not a JavaEE expert, so I do not known how I get this info from
> client site to the java server site.
>
> I hope I could be better described the problem.
>
>
> Thanks
>
>
> Christopher
>
>
> Am 07.10.2015 um 09:29 schrieb Martin Grigorov:
>> Hi,
>>
>> What is the issue exactly?
>> I see no problem for this (assuming you use modern browser that supports
>> all used JS APIs).
>>
>> There is no Wicket involved so I don't expect any problems caused by Wicket.
>>
>> Martin Grigorov
>> Wicket Training and Consulting
>> https://twitter.com/mtgrigorov
>>
>> On Wed, Oct 7, 2015 at 8:58 AM, Christopher Auth <au...@codeheap.de> wrote:
>>
>>> Hi,
>>>
>>> I have a problem, that I need to load a html element during submit, that
>>> have not a 'wicket:id' attribute.
>>>
>>> It is possible to do that?
>>>
>>> In the html tree in the browser I add a new 'img' element with
>>> javascript to a div. This element has not a wicket:id. But I need the
>>> base64 encoded file in the img-tag.
>>>
>>>
>>>
>>> The HTML that Wicket used:
>>>
>>> <div class="editablediv" id="editablediv" contenteditable></div>
>>> <script type="text/javascript">
>>> if (document.addEventListener) {
>>> document.addEventListener('paste', onPasteTriggered, false);
>>> }
>>>
>>> /*Called whenever a paste event has occured*/
>>> function onPasteTriggered(e) {
>>> if (typeof e.clipboardData != 'undefined') {
>>> var copiedData = e.clipboardData.items[0]; //Get the
>>> clipboard data
>>>
>>> /*If the clipboard data is of type image, read the data*/
>>> if (copiedData.type.indexOf("image") == 0) {
>>> var imageFile = copiedData.getAsFile();
>>>
>>> /*We will use HTML5 FileReader API to read the image file*/
>>> var reader = new FileReader();
>>>
>>> reader.onload = function (evt) {
>>> var result = evt.target.result; //base64 encoded image
>>>
>>> /*Create an image element and append it to the
>>> content editable div*/
>>> var img = document.createElement("img");
>>> img.src = result;
>>>
>>> document.getElementById("editablediv").appendChild(img);
>>> };
>>>
>>> /*Read the image file*/
>>> reader.readAsDataURL(imageFile);
>>> }
>>> }
>>> }
>>> </script>
>>>
>>>
>>> The HTML from Browser after paste the image:
>>>
>>> <div contenteditable="" id="editablediv" class="editablediv"><img alt=""
>>>
>>> src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAt0AAAJSCAYAAAAf0Xn.../fic+YIIIAAAggggAAC3RH4f57viSsFn9zlAAAAAElFTkSuQmCC"></div>
>>>
>>>
>>>
>>> Thanks
>>>
>>> Christopher
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>
>>>
>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Form submit load a no wicket element
Posted by Christopher Auth <au...@codeheap.de>.
Hi,
sorry. I need a way to get the base64 data of the image into a Java
Object. That I can save it into the database. I do not known a way to
use the Wicket-Model concept.
On submit, wicket save all datas from the elements with a wicket:id
attribute into the models. But in my case wicket does not known that in
the div a img element will append. The img tag will add dynamically into
the html.
Have Wicket provided a chance to get the encoded image into a Java Object?
I'm not a JavaEE expert, so I do not known how I get this info from
client site to the java server site.
I hope I could be better described the problem.
Thanks
Christopher
Am 07.10.2015 um 09:29 schrieb Martin Grigorov:
> Hi,
>
> What is the issue exactly?
> I see no problem for this (assuming you use modern browser that supports
> all used JS APIs).
>
> There is no Wicket involved so I don't expect any problems caused by Wicket.
>
> Martin Grigorov
> Wicket Training and Consulting
> https://twitter.com/mtgrigorov
>
> On Wed, Oct 7, 2015 at 8:58 AM, Christopher Auth <au...@codeheap.de> wrote:
>
>> Hi,
>>
>> I have a problem, that I need to load a html element during submit, that
>> have not a 'wicket:id' attribute.
>>
>> It is possible to do that?
>>
>> In the html tree in the browser I add a new 'img' element with
>> javascript to a div. This element has not a wicket:id. But I need the
>> base64 encoded file in the img-tag.
>>
>>
>>
>> The HTML that Wicket used:
>>
>> <div class="editablediv" id="editablediv" contenteditable></div>
>> <script type="text/javascript">
>> if (document.addEventListener) {
>> document.addEventListener('paste', onPasteTriggered, false);
>> }
>>
>> /*Called whenever a paste event has occured*/
>> function onPasteTriggered(e) {
>> if (typeof e.clipboardData != 'undefined') {
>> var copiedData = e.clipboardData.items[0]; //Get the
>> clipboard data
>>
>> /*If the clipboard data is of type image, read the data*/
>> if (copiedData.type.indexOf("image") == 0) {
>> var imageFile = copiedData.getAsFile();
>>
>> /*We will use HTML5 FileReader API to read the image file*/
>> var reader = new FileReader();
>>
>> reader.onload = function (evt) {
>> var result = evt.target.result; //base64 encoded image
>>
>> /*Create an image element and append it to the
>> content editable div*/
>> var img = document.createElement("img");
>> img.src = result;
>>
>> document.getElementById("editablediv").appendChild(img);
>> };
>>
>> /*Read the image file*/
>> reader.readAsDataURL(imageFile);
>> }
>> }
>> }
>> </script>
>>
>>
>> The HTML from Browser after paste the image:
>>
>> <div contenteditable="" id="editablediv" class="editablediv"><img alt=""
>>
>> src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAt0AAAJSCAYAAAAf0Xn.../fic+YIIIAAAggggAAC3RH4f57viSsFn9zlAAAAAElFTkSuQmCC"></div>
>>
>>
>>
>> Thanks
>>
>> Christopher
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Form submit load a no wicket element
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
What is the issue exactly?
I see no problem for this (assuming you use modern browser that supports
all used JS APIs).
There is no Wicket involved so I don't expect any problems caused by Wicket.
Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov
On Wed, Oct 7, 2015 at 8:58 AM, Christopher Auth <au...@codeheap.de> wrote:
> Hi,
>
> I have a problem, that I need to load a html element during submit, that
> have not a 'wicket:id' attribute.
>
> It is possible to do that?
>
> In the html tree in the browser I add a new 'img' element with
> javascript to a div. This element has not a wicket:id. But I need the
> base64 encoded file in the img-tag.
>
>
>
> The HTML that Wicket used:
>
> <div class="editablediv" id="editablediv" contenteditable></div>
> <script type="text/javascript">
> if (document.addEventListener) {
> document.addEventListener('paste', onPasteTriggered, false);
> }
>
> /*Called whenever a paste event has occured*/
> function onPasteTriggered(e) {
> if (typeof e.clipboardData != 'undefined') {
> var copiedData = e.clipboardData.items[0]; //Get the
> clipboard data
>
> /*If the clipboard data is of type image, read the data*/
> if (copiedData.type.indexOf("image") == 0) {
> var imageFile = copiedData.getAsFile();
>
> /*We will use HTML5 FileReader API to read the image file*/
> var reader = new FileReader();
>
> reader.onload = function (evt) {
> var result = evt.target.result; //base64 encoded image
>
> /*Create an image element and append it to the
> content editable div*/
> var img = document.createElement("img");
> img.src = result;
>
> document.getElementById("editablediv").appendChild(img);
> };
>
> /*Read the image file*/
> reader.readAsDataURL(imageFile);
> }
> }
> }
> </script>
>
>
> The HTML from Browser after paste the image:
>
> <div contenteditable="" id="editablediv" class="editablediv"><img alt=""
>
> src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAt0AAAJSCAYAAAAf0Xn.../fic+YIIIAAAggggAAC3RH4f57viSsFn9zlAAAAAElFTkSuQmCC"></div>
>
>
>
> Thanks
>
> Christopher
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>