Question T13743
Visible to All Users

onUploadFile and base64

created 2 years ago (modified 2 years ago)
  1. If I dont use the onUploadFile, is there any way I can validate the size of file been uploaded? I just want to limit the file uploaded up to 20mb
  2. And also, I dont use onUploadFile, then how I can get the file extension been uploaded?
  3. Can I get the base64 format from the survey element in onUploadFile?
  4. If no 1 is not possible, hence I need to use onUploadFile and validate from there, hence can I get the base64 like in question no 2.
  5. Why the question type image Screenshot 2023-07-04 at 11.26.32 AM.png when Choose Image, it not trigger the event onUploadFile
    6.Screenshot 2023-07-04 at 11.26.24 AM.png Why this question type image picker, not show the button plus to add images? It only shown when the user click on that area, is any option need to add to the survey model to always show the plus button?

Answers approved by surveyjs Support

created 2 years ago

Hello Izzudin,
Thank you for reaching out to us.

If you wish to limit the size of the uploaded file, you can use the QuestionFileModel.maxSize property. For instance, the following configuration limits the size of uploaded files to 20 MB.

JSON
{ "elements": [ { "type": "file", "title": "Please upload your files", "name": "files", "allowMultiple": true, "maxSize": 20000000 } ] }

By default, a File question's storeDataAsText option is enabled. Therefore, all files uploaded to a survey are stored as base64 encoded strings.

If you wish to intercept file uploading and, for instance, check the size of the uploaded file, or determine a file extension, you can disable the storeDataAsText option and handle the survey.onUploadFiles event. Within this event you can validate a file and, if you wish to store the file as a base64 encoded string, you can get uploaded files via options.files and convert them to base64 by using the FileReader API. You can check how we do so in our source code: https://github.com/surveyjs/survey-library/blob/c9e3dfade812cdf26fd01839673bdeaec326b877/src/question_file.ts#L299-L310.
The following code handles the survey.onUploadedFiles to convert uploaded files to base64 string:

JavaScript
survey.onUploadFiles.add((survey, options) => { let files = options.files; const content = []; files.forEach((file) => { let fileReader = new FileReader(); fileReader.onload = (e) => { const base64Content = fileReader.result; content.push({ name: file.name, type: file.type, content: base64Content, }); if (content.length === files.length) { const mappedFiles = options.files.map(function(f) { const matchingContent = content.find((c) => c.name === f.name); return { file: f, content: matchingContent.content, }; }); options.callback("success", mappedFiles); } }; fileReader.readAsDataURL(file); }); });

View Demo

I hope this helps.

It only shown when the user click on that area, is any option need to add to the survey model to always show the plus button?

This point was unclear. Please elaborate on the issue.

    Comments (2)

      reply for question no 6:
      regarding the question no 6, I save the image picker question without upload any images, hence the image picker is empty, then when I reload the whole page, the image picker question shown as on the attachment where it does not show the plus + button.

      related to no 5
      The question type image, i got a problem with the event survey.onUploadFiles as it not trigger when I upload any image, so what should I do?

        Hello,
        Thank you for the update.

        To process your recent inquiries in the most efficient manner, I created separate tickets on your behalf:

        We placed them in our processing queue and will reply shortly.