Question T17064
Visible to All Users

Upload file - change the chooseButtonText value

created 10 months ago

Hey,

it looks like there is not setter for changing the texxt of the upload file button "select file" which seem to be stored in the chooseButtonText field.
Is there another way to change it?

Answers approved by surveyjs Support

created 10 months ago

Hello Amit,
The File Upload's 'Select File' button uses a caption defined within a SurveyJS Form Library localization: chooseFileCaption. If you wish to override this caption, override the chooseFileCaption localization string.

JavaScript
import { surveyLocalization } from 'survey-core'; const engLocale = surveyLocalization.locales["en"]; engLocale.chooseFileCaption = "Click here to upload a file";

Please let me know if you have further questions.

    Show previous comments (1)

      Hi Amit,
      I'm afraid there is no option to change the select file button text for an individual file upload question. I'll be happy to discuss your usage scenario with our developers. Would you additionally elaborate on your usage scenario?

      Thanks

        Of course,

        In our custom survey design, for some of the upload file questions it is very important for us to make it clear for the user what is the file that needs to be uploaded.
        So in some cases we just say "Upload File" and specify the allowed file type in the question's description but we also have another use case when we need to specify the file needed such as "Upload Invoice" and due to limited screen space we cannot add the allowed file type in the description.

        It would be nice to have a field "chooseFileText" in the survey schema json file.

          Hello Amit,
          Thank you for the clarification. While the Upload File button caption cannot be customized, you may change the placeholder of the upload file area: QuestionFileModel.filePlaceholder.
          Consider the following demo:

          JSON
          { "pages": [ { "name": "page1", "elements": [ { "type": "file", "name": "question1", "allowMultiple": true, "filePlaceholder": "Upload a File.\nDrag and drop a file here or click the button below to select a file to upload. Allowed file types: XXX." }, { "type": "file", "name": "question2", "filePlaceholder": "Upload Invoice.\nDrag and drop a file here or click the button below to upload an invoice. Allowed file types: XXX." } ] } ] }

          For the record: you can also use the acceptedTypes property to filter file types within the file chooser dialog.

          Please let me know whether the filePlaceholder property may work for you.

          Thanks