Menu
I am using an iframe to upload an image. So I have two files - the file for the iframe and the file that will display the image. When the link to display the iframe is clicked this code is run:
function ShowUploadImageOut(RecordID) {
$('#<%=hfPieceID.ClientID %>').val(RecordID);
$("#dvAddImageOutturn").html(
'<iframe id="iframeUpload" src="utilities/UploadPOD.aspx?id=uploadOutturn"></iframe>'
);
}
On the iframe is an upload button that saves the image to a folder on the computer and sets the image file name to FileNameHidden
protected void btnUpload_Click(object sender, EventArgs e)
{
if (fuUpload.HasFile)
{
if (Request.QueryString["id"] == "uploadOutturn")
{
String Path = ConfigurationManager.AppSettings["PieceOutturnFolder"].ToString()
+ Company.Current.CompCode;
string FileName = fuUpload.FileName;
if (File.Exists(Path + "/" + FileName))
{
File.Delete(Path + "/" + FileName);
}
fuUpload.SaveAs(Path + "/" + FileName);
filename = FileName;
imgTemp.ImageUrl = "/thumbnail.ashx?ImgFilePath=" + Path.Replace("/", "\\")
+ "\\" + FileName + @"&width=200&height=400";
FileNameHidden.Value = FileName;
}
}
}
FileNameHidden has the property clientidmode set to "static":
<input type="hidden" id="FileNameHidden" runat="server" clientidmode="Static" />
Back on the page for displaying the image there is a save button. This button takes the value from FileNameHidden and sets it to a hidden field. This new hidden field is used to save the file name to the database:
<asp:HiddenField ID="hfUploadedPieceHubImageFile" runat="server" />
<div id="dvAddEditImageOutturn" class="dvdraggable">
<div id="dvAddImageOutturn"></div>
<asp:LinkButton ID="btnPieceHubUpdateImage"
onclick="btnUpdatePieceImage_Click"
OnClientClick="CloseUploadWindow();return GetPieceOutturnFilename();"
CssClass="btnSaveSmall"
runat="server"
></asp:LinkButton>
</div>
function GetPieceOutturnFilename() {
if ($('#iframeUpload').contents().find('#FileNameHidden').length > 0) {
$("#<%= hfUploadedPieceHubImageFile.ClientID %>").val(
$('#iframeUpload').contents().find('#FileNameHidden').val()
);
}
return true;
}
The problem is in the GetPieceOutturnfile function. $('#iframeUpload').contents().find('#FileNameHidden').length is always zero. It should be finding the FileNameHidden from the iframe.
Going through the code I can see FileNameHidden definitely gets set the name of the image:
<input name="FileNameHidden" type="hidden" id="FileNameHidden" value="test.jpg">
So I don't understand why it says the length is zero
504
The problem was with the btnPieceHubUpdateImage for the onClientClick:
OnClientClick="CloseUploadWindow();
return GetPieceOutturnFilename();"
It was closing the window first then trying to save the FileNameHidden from the Iframe. Swapping these around so it calls GetPieceOutturnFileName first solved the problem.
137
I got it working with this code. Make sure the content loaded into the iframe (child.html) is on the same domain or it will not work for security reasons. Also, it will not work running the files on your desktop. They need to be served from a server.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
$("#iframeUpload").load(function() {
var fileName = $(this).contents().find("#FileNameHidden").val();
console.log(fileName);
});
});
</script>
</head>
<body>
<iframe id="iframeUpload" src="child.html" />
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<form>
<input name="FileNameHidden" type="hidden" id="FileNameHidden" style="display:none" value="test.jpg">
</form>
</body>
</html>
If this does not help solve your issue, you should provide files or a jsfiddle.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
