We have created a KB article where a possible approach to achieve image resizing before the upload is suggested. You can find it at https://www.telerik.com/support/kb/aspnet-ajax/upload-(async)/details/resize-images-client-side-with-html5-before-uploading-with-radasyncupload The article describes a straightforward way on how to change the uploaded image dimensions. You can further improve and modify the logic in the _uploadFile function to allow the user to define the new dimensions or use a tool to allow the users to modify the image.
Workaround:
function encodeRowContent() {
var asyncUpload = $find('<%= RadAsync_FileUpload.ClientID%>');
var $ = $telerik.$;
asyncUpload._updateRowContent = function (row, inputValue) {
var $progress,
$content = $("<span class='ruUploadProgress'>" + $telerik.htmlEncode(this._getFileName(inputValue)) + "</span>");
$(row).removeClass("ruSelectWrap")
.addClass("ruFileLI ruUploading")
.prepend("<span class='radIcon'></span>");
if (this._isManualUpload())
$content.addClass("ruUploadOnHold");
if (this._enableInlineProgress) {
$progress = $('<span class="ruFileProgressWrap"><span class="ruFileProgress"></span></span>');
$content.append($progress);
}
$('.ruFakeInput, .ruBrowse', row).remove();
$(".ruFileWrap", row).append($content); // Replace fake input
}
}
Sys.Application.add_load(encodeRowContent);
RadAsyncUpload "Drop Files here" element remains visible when dragging a file quickly over and out of the DragZone
Replicable in File Upload with Drag and Drop live demo.
Drag a file quickly through the DragZone without dropping it. The "Drop Files Here" element is shown but doesn't get hidden when the mouse leaves the DragZone (ondragleave).
The user should be able to determine by which criteria the validation failed (size or extension).
Hi Telerik Team, is it possible to implement the feature into the uploadmodule control , that you can open the uploaded files per Double-Click. We want to use the control to create offers and we want to give the users the option to upload files - that works wonderful. But the following editors of the offers don`t have the chance to open the "attached" files. Thank you very much. Best Regards, Jan Brandenburger
Workaround - Toggle drop zone visibility or enable/disable it, using AsyncUpload OnClientFileUploaded and OnClientFileUploadRemoved events:
<div class="dropfile" style="height: 20px; width: 120px; background-color: red; display: block">
</div>
<telerik:RadAsyncUpload ID="fimFileImport" runat="server" DropZones=".dropfile" MaxFileInputsCount="1"
RenderMode="Lightweight" OnClientFileUploaded="OnClientFileUploaded" OnClientFileUploadRemoved="OnClientFileUploadRemoved" >
</telerik:RadAsyncUpload>
<script type="text/javascript">
function OnClientFileUploaded(sender, args) {
var maxFileCount = sender.get_maxFileCount();
var uploadedFilesLength = sender.getUploadedFiles().length;
if (maxFileCount === uploadedFilesLength) {
$telerik.$('.dropfile').hide();
}
}
function OnClientFileUploadRemoved(sender, args) {
var maxFileCount = sender.get_maxFileCount();
var uploadedFilesLength = sender.getUploadedFiles().length;
if (maxFileCount > uploadedFilesLength) {
$telerik.$('.dropfile').show();
}
}
</script>
Documentation says Firefox should be ok with LastModifiedDate, but it's not. It's consistently being set to 1/1/0001 12:00:00 AM, which is not useful.
Happens in any RadAsyncUpload example if you look at the value for LastModifiedDate in the AsyncUploadedFile objects.
Works fine in Chrome, Edge. Fails in Firefox for Mac or Windows.
This issue is observed only in R1 2020. The solution is to not disable the FileAPI.
Reproduction steps:
<script>
Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable = function () { return false; };
Telerik.Web.UI.RadAsyncUpload.Modules.Flash.isAvailable = function () { return false; };
Telerik.Web.UI.RadAsyncUpload.Modules.Silverlight.isAvailable = function () { return false; };
</script>
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" ></telerik:RadAsyncUpload>
Recently, Chrome version has been updated our all the user’s system as 117.xxx.xxx.
After updating the Chrome version and RadAsyncUpload is not working and getting the below error message. So, user unable to perform any upload action on this.
This is control using in production live application and it affecting our day-to day business.
Please provide your solution as soon as possible.
Error – Message :
Uncaught Error while uploading, <div></div><pre>{"fileInfo":{"FileName":"README.md","ContentType":null,"ContentLength":5798,"DateJson":null,"Index":0}, "metaData":"8D91232C303626342ACC0E7ED035FEA5DE6451C2DB0AF6EACED0DEF16BAC9F74139C19B88F3583C5E4E753AF69CA36E66EB8DC6DE10E16C1B06A7DD1B482E8E57C5949FC91A77397D6CEB2BE801B511978BE81978AF16A2AFCAB9DA0F1C04972541477EA061F94B0DC6BF18D7CC177C427FA3C9FFBB4331699BC031FC1032C268EDB586EE6E54ADD874033CEFE7916EA3B880C6383A59D10D72D4954B3FDDE3391C0D66A5D38956DDBA8B3026A07DD8C1561889181210D7982B964EB1E654AD007C04D7832068AB2BC4E220B2AC8565C53260448459E72E53295BDAD64DCF63F311E327C366756AF117BD3E45B0D85AF7BC2CC0A2983A6142FF6FAC4E9BCC92CADEA17DC" }</pre>