Question T15184
Visible to All Users

onOpenFileChooser call event example

created a year ago (modified a year ago)

Hi,
I am new in IT. I select image picker of survey js not for my computer but call via laravel filemanager Plugin.
Please provide me a demo how to call this event "onOpenFileChooser"?

Sign in to comment on this post

Answers approved by surveyjs Support

created a year ago (modified a year ago)

Hello,
Thank you for reaching out to us. From what I gather, you wish to customize a SurveyJS Survey Creator and open a custom file chooser/file manager to allow users upload images for an Image Picker question. You can handle the creator.onOpenFileChooser to activate a custom file chooser. Its options contain arguments which allow you to activate a custom file chooser and send selected files to a question:

  • The options.input parameter represents a file input HTML element. You can override this element to display a custom file upload dialog.
  • After an image is successfully uploaded, call the options.callback function and pass selected file(s) as a parameter.

Here is an example on how to open a default file chooser:

JavaScript
creator.onOpenFileChooser.add(function(sender, options) {
      options.input.accept = "image/jpeg";
      options.input.value = "";
      options.input.onchange = (event) => {
        if (!window["FileReader"]) return;
        if (!options.input || !options.input.files || options.input.files.length < 1) return;
        let files = [];
        for (let i = 0; i < options.input.files.length; i++) {
          files.push(options.input.files[i]);
        }
        options.callback(files);
      };
      options.input.click();
});

Please feel free to adjust the code to your custom file manager API. Should you have any further questions, we are here to help.

    Show previous comments (4)
    TD TD
    Tester Dev a year ago

      "you can run your code to activate a required file chooser component"

      Means ?

      Clipboard-File-1.png

      TD TD
      Tester Dev a year ago

        Which is currently Iframe.

        Jane a year ago

          Hello,
          Thank you for the update. Please refer to the following sample code:

          JavaScript
           creator.onOpenFileChooser.add((sender, options) => {
    // Create a hidden file input element
    const fileInput = document.createElement("input");
    fileInput.type = "file";
    fileInput.accept = "image/jpeg";
    fileInput.style.display = "none";

    // Function to handle file selection
    const handleFileSelection = (e) => {
      const selectedFiles = e.target.files;

      if (selectedFiles.length > 0) {
        options.callback(selectedFiles);
      }
    };

    // Attach the file selection event handler
    fileInput.addEventListener("change", handleFileSelection);

    // Trigger the file input click event to open the file chooser dialog
    fileInput.click();
});

          View CodeSandbox

          In this code, I created a file input element dynamically when the onOpenFileChooser event is triggered. It then listens for file selection and passes the selected files to options.callback.

          If you wish to invoke a custom file upload component, you would replicate the same behavior using your API.

          Sign in to comment on this post