Display a p:overlayPanel at a specific position relative to another component (p:graphicImage) - jsf

Question

Using a <p:overlayPanel> to display a <p:fileUpload>, when a <p:graphicImage> is clicked as follows.
<p:graphicImage id="image"
library="default"
name="test/Sunset.jpg"
style="left: 400px; top: 100px; position: relative;"
height="200"
width="200"/>
<p:overlayPanel for="image" my="top left" at="bottom right"
dynamic="true" showCloseIcon="true" dismissable="true">
<p:fileUpload mode="advanced"
fileLimit="1"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
fileUploadListener="#{bean.listener}"/>
</p:overlayPanel>
When the given <p:graphicImage> is clicked, a <p:fileUpload> is displayed in a <p:overlayPanel> as can be seen in the following picture.
I however, need to display this <p:overlayPanel> (holding a <p:fileUpload>) in a way that the bottom right corner of this <p:overlayPanel> positions over the top left corner of the given <p:graphicImage> (just because this unnecessarily introduces an ugly horizontal scroll bar on the browser where this is actually implemented (inside a <p:dataTable>)).
These attributes my="top left" at="bottom right" are expected to do the trick but they do not.
Is this achievable anyway?
According to the answer, <p:fileUpload> looks like the following, when a file is uploaded.
Which stays away from removing the horizontal scroll bar in the browser.

Answer 1

One way to do it is to dynamically resize the <p:overlayPanel> with an onshow event to match the <p:graphicImage> dimensions.
Here's an example :
<h:form id="form">
<p:graphicImage id="img" value="/res/img/img.jpg" />
<p:overlayPanel id="overlay" for="img" my="right bottom" at="left bottom" onShow="resize();" >
<p:fileUpload />
</p:overlayPanel>
<script type="text/javascript">
function resize() {
$("[id='form2:overlay']").css("left", "auto");
$("[id='form2:overlay']").css("right", $("[id='form2:img']").css("width"));
}
</script>
</h:form>
EDIT :
Fixed code to work inside a form.
EDIT 2:
Changed code to dynamically position overlay's right side on img's left side.
Since the img in in the last table column on the right, we can just substract img's width from right absolute position.