locked
AjaxFileUpload questions from a noobie RRS feed

  • Question

  • User-597672045 posted

    I need help improving the control's cosmetics.  Over all, it is very functional, but yet looks very confusing to users.

    • Is there a way to  change the verbiage "Drop file here" to something else?  How about the Text of the button ("Select File"), and also the instruction "Please select file(s) to upload)
    • Is there a good CSS class someone has put together that I can steal?  The default look and feel is kinda ugly
    • Can the file dialogue filter only certain file types?  I know I can set AllowedFileTypes
    • When the file is dragged over the the area, it is hard to tell if the file is hovering over the right area.  It says "-->Move" when it is over the right area and "+Copy" when it isn't.  Nobody understands "-->Move" means it's in right area.
    • Once a file is dropped, it really gets even more ugly and confusing.  There is the "remove" button and the "upload" button.  My users get completely thrown off.  Is this the only option?

    Wednesday, July 12, 2017 9:30 AM

All replies

  • User-1838255255 posted

    Hi profnachos,

    According to your description and issue, here are my answers about these five questions:

     

    Is there a way to  change the verbiage "Drop file here" to something else?  How about the Text of the button ("Select File"), and also the instruction "Please select file(s) to upload)

    You could use jQuery to get this element, then set the value of it.

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
          <script type="text/javascript">
            $(function () {
                $(".ajax__fileupload_dropzone").empty();
                $(".ajax__fileupload_dropzone").html("Please select file(s) to upload");
            });
        </script>

    Is there a good CSS class someone has put together that I can steal?  The default look and feel is kinda ugly

    I think you could use Browser F12 to get the element, then add style to this element.

    Can the file dialogue filter only certain file types?  I know I can set AllowedFileTypes

    Document cannot give property to set this function, So I think it can not be filter in file dialog. For more details, please check this document:

    https://ajaxcontroltoolkit.devexpress.com/AjaxFileUpload/AjaxFileUpload.aspx 

    When the file is dragged over the the area, it is hard to tell if the file is hovering over the right area.  It says "-->Move" when it is over the right area and "+Copy" when it isn't.  Nobody understands "-->Move" means it's in right area.

    Please Check the following tutorial:

    https://www.w3schools.com/jsref/event_ondragover.asp 

    Once a file is dropped, it really gets even more ugly and confusing.  There is the "remove" button and the "upload" button.  My users get completely thrown off.  Is this the only option?

    I think this is the control default button, if modify default control, it will be very difficult.

    Best Regards,

    Eric Du

    Thursday, July 13, 2017 7:15 AM