Background image in drag/drop area

5 posts, 1 answers
  1. Keith
    Keith avatar
    17 posts
    Member since:
    Mar 2011

    Posted 24 May 2011 Link to this post

    I would like to put a simple background image in the area where people can drag and drop a file into place.  Where and how would I go about doing this?
  2. Answer
    Tina Stancheva
    Tina Stancheva avatar
    3299 posts

    Posted 27 May 2011 Link to this post

    Hi Keith,

    In order to create an area where people can drop files to upload, you can take advantage of the RadUploadDropPanel control. You can set the Background property of the control to an ImageBrush thus painting the panel's background with an image. I attached a sample project illustrating this approach.

    Another approach that you can use is to place the RadUploadDropPanel on top of an Image. And if the RadUploadDropPanel.Background is Transparent the Image will be displayed as its background:
    <StackPanel x:Name="LayoutRoot" Background="White">
            <Image Source="telerik.png" />
            <telerik:RadUploadDropPanel BorderThickness="1" BorderBrush="#FFA7A7A7" Background="Transparent" Height="500"
                    VerticalAlignment="Stretch" HorizontalAlignment="Stretch" x:Name="RadUploadDropPanel"
                    RadUpload="{Binding ElementName=RadUpload1}">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Drag Items here to Upload."
                        TextWrapping="Wrap" Margin="10" FontWeight="Bold" />
        <telerik:RadUpload UploadServiceUrl="/UserUploadHandler.ashx" Name="RadUpload1" OverwriteExistingFiles="True"
                IsAutomaticUpload="false" Filter="Image File (*.jpg;*.bmp;*.gif)|*.jpg;*.bmp;*.gif;"

    I hope that info will help you.

    Tina Stancheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Marko
    Marko avatar
    4 posts
    Member since:
    Jun 2011

    Posted 04 Aug 2011 Link to this post

    Hello Tina,

    your example is very helpful, it works as expected. But I can not get AllowDrop to work in my project. Please help.

    1. I followed this steps

    2. I added telerik:RadUpload to xaml code.

    <Grid Grid.Column="1" Grid.Row="2">
        <telerik:RadUpload telerik:StyleManager.Theme="Windows7"
                       VerticalAlignment="Stretch" />

    3. If I browse for files everything works fine, files get uploaded etc... But if I want to drag&drop it, there's a problem.
    When I go dragging attachment to browser (IE, Chrome, Firefox...) icon changes to shortcut. And when dropped, attachment is opened within the browser, killing the application, instead of uploading the file. However, drag&drop does work if I choose to install application locally.

    4. I tried telerik:RadUploadDropPanel   as well but no success.

    Below you will find three images, which indicate the problem.

    a. Drag&Drop works perfect in your example (RadUpload_YourExampleVeryMuchOK)
    b. Drag&Drop fails in my project using web (RadUpload_MyProjectWebNotOK)
    c. Drag&Drop works perfect in my project when app installed locally (RadUpload_MyProjectInstalledAppOK)

    If you need more info, do not hesitate to ask me. Thank you.

    Regards, Marko

  4. Marko
    Marko avatar
    4 posts
    Member since:
    Jun 2011

    Posted 05 Aug 2011 Link to this post


    I've found that the problem is <param name="windowless" value="true" /> in Default.aspx file. Also mentioned in here.

    But if I set windowless to false, then 'Telerik.Windows.Controls.RadHtmlPlaceholder' doesn't work. Mentioned here.

    1. I need the drag&drop, so windowless must be set to false.
    2. I need to show PDF to the user.
        a. It can be as a Popup window like HtmlPlaceHolder.
        b. It can be as a browser Popup. Like "Save as" or "Open". And user opens it in external viewer.

    What are my options?

    Thank you.

    Best regards, Marko
  5. Alex Fidanov
    Alex Fidanov avatar
    637 posts

    Posted 10 Aug 2011 Link to this post

    Hi Marko,

    I believe your best option is to swich toggle the windowless mode. You can see how you can do this programatically in our online example for the html placeholder here.

    Alex Fidanov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

Back to Top