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
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
Rank 2
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
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
Rank 1
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.
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
Rank 1
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/.
Rank 1
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).
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).