Home/ Questions/Q 6994891
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T19:57:02+00:00

I have created a iframe to upload and display the images into the server

  • 0

I have created a iframe to upload and display the images into the server without refreshing the page.Kindly help me with a solution to drag and drop the saved image from a iframe into a div.

The following code is used in the iframe(iframeImage.aspx) to display the images from the server:

<div>
<asp:DataList ID="dtlist" runat="server" RepeatColumns="4" CellPadding="5">
<ItemTemplate>    
<div id="divImage" runat="server" onclick="Test()" class="draggable">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server" />
</div>
<br />
<asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server"/>
</ItemTemplate>
<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>

From code behind, I am binding the images into the datalist.

Currently, I need to drag and drop the image into a main div(reportHeader of CustomDesign.aspx).The below code is used to bind texts into the main div:

function CreateTextLineLabel(textAreaElt) {
            var id = "Text1" + count.num++;
            $('#reportHeader').append('<div id="' + id + '" class="draggable" ondblclick="showPopup(this)"><span>' + $(textAreaElt).val() + '</span></div>&nbsp;&nbsp;');
            $("#" + id).draggable({ revert: "invalid" });
            $("#" + id).resizable();
            $("#reportHeader").droppable({
                activeClass: "ui-state-hover",
                hoverClass: "ui-state-active",
                drop: function(event, ui) {
                    $(this)
                    .addClass("ui-state-highlight")
                    .find("p")
                        .html("Dropped!");
                }
            });

            $(textAreaElt).remove();
        }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Im pretty sure you cant actually do this at all, images in your iframe are in a different document so no drag and drop framework (that I’ve ever heard of) will work spanning 2 documents.

    It sounds to me like you are better off to implement an ajax upload control instead of having your upload code in an iframe. This will still avoid having a postback but also gets around dirty postbacks ect. If you have a google for ajax upload you will see plenty of different examples you can use depending on the kind of result and actual codebase you are using. If you arent using MVC a common one is in the Ajax Control Toolkit

    • 0