Fileupload issues....

5 posts, 0 answers
  1. Suthish
    Suthish avatar
    13 posts
    Member since:
    May 2015

    Posted 01 Jun Link to this post

    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."

     

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    832 posts

    Posted 06 Jun Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Suthish
    Suthish avatar
    13 posts
    Member since:
    May 2015

    Posted 06 Jun Link to this post

    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;
    }

  5. Suthish
    Suthish avatar
    13 posts
    Member since:
    May 2015

    Posted 06 Jun in reply to Suthish Link to this post

    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>

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    832 posts

    Posted 09 Jun Link to this post

    Hello Suthish,

    I removed the line numbers as requested.

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017