This is a migrated thread and some comments may be shown as answers.

Paste Files into RadUpload DropZone

9 Answers 58 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 09 Mar 2016, 07:40 PM

How do you paste a file, in this instance a screen capture image, into the RadUpload dropzone?  My users do not want to have to save the file to disk first.  They want to copy and past it straight from an email or snippet tool.  I have been unsuccessful at finding any documentation for this.

 

Thanks.

9 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 10 Mar 2016, 02:44 PM
Hello Chris,

The AsyncUpload does not support pasting files. The supported ways of uploading a file are:
  • selecting it from the Upload Dialog opened by clicking the Select button
  • dragging and dropping a file over a dropzone or over the control itself.

Regards,
Ivan Danchev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Linus
Top achievements
Rank 2
answered on 13 Sep 2017, 07:26 AM

I requested this feature in September 2015 without any response. Many of our users want to be able to upload a print screen directly without having to save the file to disc first (saves a lot of clicking). Maybe it is possible to go around this problem by combining the RadEditor with the AsyncUpload, but it would be very nice to have this as a feature in the AsyncUpload itself.

https://feedback.telerik.com/Project/108/Feedback/Details/169842-add-paste-from-clipboard-support-to-radupload

0
Ivan Danchev
Telerik team
answered on 18 Sep 2017, 06:04 AM
Hello Linus,

At present the feature request you have logged is not yet approved and scheduled for implementation. If it gets approved by the team this will be reflected in the request's status. Feature requests are prioritized based on multiple factors, one of which is their popularity. And in this case the request has just one "like". Given the total amount of logged requests and the number of approved requests, many of which are more anticipated, we would not be able to provide a time frame on its eventual approval and subsequent implementation.   

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
John
Top achievements
Rank 1
answered on 19 Sep 2017, 05:12 PM

Hello, Ivan.

Is there any means of pulling image data from a dataURL, to upload the file?  I was fiddling with the fileAPI and managed to set a dataURL based off my pasted image, via the following:

http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

But it seems to be the end of the line, for me.  I'll be adding to that feature request.

0
Ivan Danchev
Telerik team
answered on 22 Sep 2017, 11:18 AM
Hi John,

As mentioned previously in this thread, at present the AsyncUpload requires a user action in order to upload a file. The upload is triggered either by selecting a file from the dialog opened when pressing the Select button or by dropping a file over the AsyncUpload or over a custom drop zone.
As for sending the image dataURL information to the server and saving the file, there is a thread on stackoverflow, in which this scenario is discussed, so you could give the suggested approach a try.

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Bob
Top achievements
Rank 1
answered on 30 Sep 2020, 04:17 PM
We are finding that when we try to drag & drop an email to the upload area it is 'moving' it rather than 'copying' it over by default. The effect of this is that the email application where we dragged the email from moves the email to the 'deleted' folder. What is the correct way to set the data transfer drag effect to 'copy' rather then 'move'?


0
Peter Milchev
Telerik team
answered on 02 Oct 2020, 01:12 PM

Hello Bob,

The drag and drop from Outlook is by default not supported for browsers different from IE. 

The recent ability to do that in Chrome and Edge Chromium is due to the fact that MS added a commit to the chromium source. Unfortunately, the side effect is that the email will be moved to the Deleted folder. You can follow this Feedback portal item where we share any news about this scenario:

Regards,
Peter Milchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Amish
Top achievements
Rank 1
answered on 06 Oct 2020, 03:26 AM

Hi Milchev,

Can you please confirm if the jQuery workaround mentioned in the link below (MS forum) should fix the issue mentioned by Bob? I wanted to copy the whole jQuery function here but it is not allowing me.

Basically - it sets dropeffect to 'copy' from 'none'. If this jQuery is run against the div which is set as droparea for RadAsync control - should that fix the issue? jQuery has been copied from following location (Microsoft forum).

https://answers.microsoft.com/en-us/msoffice/forum/all/drag-and-drop-works-however-deletes-email-can-we/865f60c3-7980-4465-8a19-4d60b0ae5aba

 

 

0
Peter Milchev
Telerik team
answered on 08 Oct 2020, 04:15 PM

Hello Amish,

Thank you for sharing this link with us. 

It turns out that indeed setting the dropEffect in the dragover event will keep the file in its folder:

<script>
    // apply to all RadAsyncUpload controls on the page
    function pageLoadHandler() {
        $telerik.$(".RadAsyncUpload").each(function (ind, el) {
            var au = el.control;
            if (au.get_loadedModuleName().toLowerCase() == "file api") {
                au._uploadModule._dropoverHandler = function (ev) {
                    var dt = ev.originalEvent.dataTransfer;
                    dt.dropEffect = "copy";
                    // we need to call prevent default, otherwise
                    // the browser will try to open the document (by default)
                    ev.preventDefault();
                    ev.stopPropagation();
                }

            }
        })

        // Sys.Application.remove_load(pageLoadHandler);  
    }
    Sys.Application.add_load(pageLoadHandler);
</script>
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1"></telerik:RadAsyncUpload>

Unfortunately, setting the dropEffect on the drop event is too late while the dragover does not have access to the file itself for security reasons:

With that said, my only concern is this would change the dropeffect for all dragged files and objects that go over the drop zone. 

Nevertheless, if you see this as an acceptable drawback in your application, you can freely use the suggested workaround.

I will share this in the related feedback portal and anyone that tests this, please share your feedback, results and opinions.

As a token of gratitude for sharing the link with us, I have updated your Telerik points. If you have another account that purchases the licenses, you can contact sales to transfer the points.

Regards,
Peter Milchev
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
AsyncUpload
Asked by
Chris
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Linus
Top achievements
Rank 2
John
Top achievements
Rank 1
Bob
Top achievements
Rank 1
Peter Milchev
Telerik team
Amish
Top achievements
Rank 1
Share this question
or