Background image in drag/drop area

[Keith]

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?

[Tina Stancheva]

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">
    <Grid>
        <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:RadUploadDropPanel>
    </Grid>
    <telerik:RadUpload UploadServiceUrl="/UserUploadHandler.ashx" Name="RadUpload1" OverwriteExistingFiles="True"
            IsAutomaticUpload="false" Filter="Image File (*.jpg;*.bmp;*.gif)|*.jpg;*.bmp;*.gif;"
            TargetFolder="/UserUploads">
    </telerik:RadUpload>
</StackPanel>

I hope that info will help you.

Greetings,
Tina Stancheva
the Telerik team

[Marko]

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 http://www.telerik.com/help/silverlight/radupload-getting-started.html

2. I added telerik:RadUpload to xaml code.

<Grid Grid.Column="1" Grid.Row="2">
    <telerik:RadUpload telerik:StyleManager.Theme="Windows7"
                  x:Name="RadUploadWindow"
                   UploadServiceUrl="/UploadHandler.ashx"
                   TargetFolder="Uploads"
                   AllowDrop="True"
                   IsEnabled="True"
                   IsAutomaticUpload="True"
                   IsMultiselect="True"
                   VerticalAlignment="Stretch" />
</Grid>

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

[Marko]

Hello,

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

[Alex Fidanov]

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.

Greetings,
Alex Fidanov
the Telerik team