Fileupload issues....

[Suthish]

Hi,

I was following below example to select multiple files, facing following issues.

http://demos.telerik.com/aspnet-ajax/asyncupload/examples/validation/defaultcs.aspx?show-source=true

1. When click on "Select" button, and select a file (.pdf) the file getting opened and browse window get frozen.

2. How to show selected success/failure icon, file name, file size followed by "Remove" link and followed by message "This file exceeds the maximum allowed size of 500 KB."

 

 

[Ivan Danchev]

Hello Suthish,

If you are using the code from the demo and want to upload a .pdf file you will have to add pdf to the allowed file extensions by adding it to the list of extensions set to the AllowedFileExtensions property: AllowedFileExtensions="jpg,jpeg,png,gif,pdf" . Otherwise the validation will trigger and display "This file type is not supported". As for the message for exceeding the allowed file size, this is implemented through the MaxFileSize property and the OnClientValidationFailed handler, in the demo the handler (validationFailed) can be found in the scripts.js file (below the actual demo).

Regards,
Ivan Danchev
Telerik

[Suthish]

Thanks Ivan,
Issue 1. was mistaken from my end. The Folder "Show the Preview Pane" was enabled, due to which the upload control got frozen.
Issue 2. I figured out with other events.. like below.. but not complete solution, I guess... :).
Sharing here, might help others also...

function pageLoad() {
    $('.ruFakeInput').val("Select File..");
}

var MAX_TOTAL_BYTES = 5; //3MB
var filesSize = new Array();
var OVERSIZE_MESSAGE = "Combined File size is greater than 3MB";
var totalBytes = 0;
var upload_files;

progressUpdating = function (radAsyncUpload, args) {

    filesSize[args.get_data().fileName] = args.get_data().fileSize;
};

onFileUploadRemoved = function (radAsyncUpload, args) {
    var uploadingRows = $(".RadAsyncUpload").find(".ruUploadProgress");
    totalBytes = 0;

    for (var ij = 0; ij < radAsyncUpload._uploadedFiles.length; ij++) {
        totalBytes += radAsyncUpload._uploadedFiles[ij].fileInfo.ContentLength;
    }

    if (totalBytes >= MAX_TOTAL_BYTES) {
        alert(OVERSIZE_MESSAGE);
    }
};


onFilesUploaded = function (radAsyncUpload, args) {
    if (radAsyncUpload._uploadedFiles.length == 0) {
        filesSize = new Array();
    }
    else {
        totalBytes = 0;
        for (var i = 0; i < radAsyncUpload._uploadedFiles.length; i++) {
            totalBytes += radAsyncUpload._uploadedFiles[i].fileInfo.ContentLength;
        }

        if (totalBytes >= MAX_TOTAL_BYTES) {
            alert(OVERSIZE_MESSAGE);
        }
    }
};

onFileUploaded = function (radAsyncUpload, args) {
    for (var index in filesSize) {
        if (!isNaN(filesSize[index])) {
            totalBytes = 0;
            var fileSize;
            var contentLength;
            var row;
            var span;

            contentLength = (args.get_fileInfo().ContentLength) / 1024;
            if (contentLength >= 1024) {
                contentLength = contentLength / 1024;
                contentLength = Math.floor(contentLength * 100) / 100;
                fileSize = contentLength + " MB";
            }
            else {
                contentLength = (contentLength.toString().split("."))[0];
                fileSize = contentLength + " KB";
            }

            row = args.get_row();
            span = $(row).find(".ruFileWrap .ruUploadProgress");
            span.removeClass("ruUploadFailure").addClass("ruUploadSuccess");
            span.text("").append("<table style='width:450px;vertical-align:middle;'><tr><td style='font-size:11px;'> " + args.get_fileName() +
                        "</td><td style='font-size:11px;text-align:right;'><label style='color:Green;'>" +
            fileSize + "</label></td></tr>");
        }
    }
};

validationFailed = function (radAsyncUpload, args) {
    var erorMessage = getErrorMessage(radAsyncUpload, args);
    var spanmsg = createError(erorMessage);
    var row = args.get_row();
    var span = $(row).find(".ruFileWrap .ruUploadProgress");
    span.removeClass("ruUploadSuccess").addClass("ruUploadFailure");
    span.text("").append("<table style='width:450px;vertical-align:middle;'><tr><td style='font-size:11px;'> " + args.get_fileName() +
    "</td><td style='font-size:11px;text-align:right;'>" + spanmsg + "</td></tr>");
};

function getErrorMessage(sender, args) {
    var fileExtention = args.get_fileName().substring(args.get_fileName().lastIndexOf('.') + 1, args.get_fileName().length);
    if (args.get_fileName().lastIndexOf('.') != -1) {
        if (sender.get_allowedFileExtensions().indexOf(fileExtention) == -1) {
            return ("File type is not allowed");
        }
        else {
            return (">= 3 MB");
        }
    }
    else {
        return ("File type is not allowed");
    }
}

function createError(erorMessage) {
    var input = '<span style="color:red;" class="ruErrorMessage">' + erorMessage + '</span>';
    return input;
}

[Suthish]

oops.. how these line numbers came.. Admin please edit and remove.. the numbers..

<telerik:RadAsyncUpload runat="server" RenderMode="Lightweight"  MaxFileSize="3145728"
        ID="AsyncUpload1" AllowedFileExtensions=".pdf"
        MultipleFileSelection="Automatic"
        OnClientValidationFailed="validationFailed"
        OnClientProgressUpdating="progressUpdating"
        OnClientFilesUploaded="onFilesUploaded"
        OnClientFileUploaded="onFileUploaded"
        OnClientFileUploadRemoved="onFileUploadRemoved"
        UploadedFilesRendering="BelowFileInput">
        <FileFilters>
            <telerik:FileFilter Description="AllowedFileExtensions(.pdf)" Extensions=".pdf" />
        </FileFilters>
</telerik:RadAsyncUpload>

[Ivan Danchev]

Hello Suthish,

I removed the line numbers as requested.

Regards,
Ivan Danchev
Telerik