AjaxFileUpload questions from a noobie

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?

Answer 1

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