Change template of file upload question

AEL

created 5 months ago

Hi,

I have an angular project using the survey tool. I have a requirement to change the interaction on the question type file upload. Instead of choosing the file from the local machine to upload the file, the user can choose from a list of files. The way it works is on click on the file upload, a pop up angular material dialog is shown, and when a file is chosen, the file reference id is set to be the answer of that question.

It would be something like this

The solution should be to replace the template of the file upload, but i am not sure how to go on about it.

Clipboard-File-1.png

Answers approved by surveyjs Support

Jane

created 5 months ago

Hello,
To replace a standard file chooser with a custom dialog, implement the survey.onOpenFileChooser function and activate a custom file chooser dialog. Once files are uploaded, call the options.callback function and pass uploaded files to a File Upload form element.

Let us know if you have further questions.

Show previous comments (6)

AEL 5 months ago

It is not quite clear to me how i can achieve this, given that the chooser itself will be a custom dialog component. I need a basic example that on upload click, it shows a dummy dialog. Or if you already have a similar example to this case. :)

Thanks in advance!

Jane 5 months ago

Hello,
Consider the following demo: View Plunker.

JavaScript
function onOpenFileChooserHandler(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();
}
survey.onOpenFileChooser.add(onOpenFileChooserHandler);

Let me know if it helps.

AEL 5 months ago

How would this open a custom angular dialog on upload click?

The behavior with the demo you provided, opens the native windows ( or any OS ) file selection dialog.

Clipboard-File-1.png

Jane 5 months ago

Hello,
I will reach out to our developers regarding this task. Please stay tuned.

Jane 4 months ago

Hello,
I created the following demo for your reference: View Codesandbox.
In this demo, I created a custom Angular component which invokes a file chooser dialog.
custom-file-chooser.component.ts

JavaScript
import {
  Component,
  EventEmitter,
  Output,
  ViewChild,
  ElementRef,
} from "@angular/core";

@Component({
  selector: "app-custom-file-chooser",
  template: `
    <div>
      <input
        type="file"
        (change)="onFileChange($event)"
        multiple
        accept="image/jpeg"
        style="display: none"
        #fileInput
      />
    </div>
  `,
})
export class CustomFileChooserComponent {
  @Output() filesSelected = new EventEmitter<File[]>();
  @ViewChild("fileInput") fileInput!: ElementRef<HTMLInputElement>;

  openDialog(): void {
    if (this.fileInput) {
      this.fileInput.nativeElement.click();
    } else {
      console.error("File input element is not initialized.");
    }
  }

  onFileChange(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (!input.files || input.files.length === 0) {
      return;
    }
    const files = Array.from(input.files);
    this.filesSelected.emit(files);
  }
}

This component is called from a survey's

JavaScript
onOpenFileChooserHandler(sender: any, options: any) {
    this.currentOptions = options;
    this.fileChooser.filesSelected.subscribe((files) => {
      if (files && files.length > 0) {        
        options.callback(files);
      } else {
        options.callback(null);
      }
    });

    if (this.fileChooser) {
      this.fileChooser.openDialog();
    }
}
model.onOpenFileChooser.add(this.onOpenFileChooserHandler.bind(this));

Once a user selects files, the custom component's filesSelected function is called and files are passed to a File Upload question via the options.callback(files) function.

I hope this example helps. Should you have any further questions, please let us know.

AEL 4 months ago

Hi Thank you for your response. The solution you provided does not work.
I am talking about something but i keep on receiving another thing. I will repeat my request again in other words.

I need to change the behavior of all file upload questions to be that when i click on "Select File", i have a custom angular dialog with documents list opened up where the user can choose docs from instead of the native operating system file choosing dialog. Technically, it will be not anymore file upload but document selection question. These documents i maintain and give to the user answering the survey.

The problem with the solution i am getting, that everytime i click on "Select File", i get the default behavior of opening up the windows file selection dialog. Even the solution you provided latest, if you click "Select File" you will get this.

While i want it to be like this

Clipboard-File-1.png Clipboard-File-2.png

Jane 4 months ago

Hello,
Thank you for the clarification. The example I shared earlier actually shows how to:

Implement a custom Angular component. This component invokes a standard file chooser dialog for simplicity.
Handle the survey.onOpenFileChooser function and invoke a custom component's openDialog function.

Please let me be more specific and share relevant parts of the code.
survey.component.ts

JavaScript
this.model.onOpenFileChooser.add(this.onOpenFileChooserHandler.bind(this));

onOpenFileChooserHandler(sender: any, options: any) {
    this.currentOptions = options;
    this.fileChooser.filesSelected.subscribe((files) => {
      if (files && files.length > 0) {
        debugger;
        options.callback(files);
      } else {
        options.callback(null);
      }
    });

    if (this.fileChooser) {
      this.fileChooser.openDialog();
    }
}

custom-file-chooser.component.ts

JavaScript
import {
  Component,
  EventEmitter,
  Output,
  ViewChild,
  ElementRef,
} from "@angular/core";

@Component({
  selector: "app-custom-file-chooser",
  template: `
    <div>
      <input
        type="file"
        (change)="onFileChange($event)"
        multiple
        accept="image/jpeg"
        style="display: none"
        #fileInput
      />
    </div>
  `,
})
export class CustomFileChooserComponent {
  @Output() filesSelected = new EventEmitter<File[]>();
  @ViewChild("fileInput") fileInput!: ElementRef<HTMLInputElement>;

  openDialog(): void {
    if (this.fileInput) {
      console.log("open dialog");
      this.fileInput.nativeElement.click();
    } else {
      console.error("File input element is not initialized.");
    }
  }

  onFileChange(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (!input.files || input.files.length === 0) {
      return;
    }
    const files = Array.from(input.files);
    this.filesSelected.emit(files);
  }
}

So, this demo actually uses a custom Angular component which uses a standard file chooser dialog. This was done for simplicity and to demonstrate how to invoke a custom file chooser component from the onOpenFileChooser function and use the options.callback function to send uploaded files to a File Upload element.

I understand that in your usage scenario, you wish to implement some other kind of a file chooser UI. Hence, please feel free to move forward and implement your custom dialog which will be invoked from the survey.onOpenFileChooser function as shown in my demo.

Should you have any further questions, please let me know.

AEL a month ago

Hello, i have a follow up request.

This proposed solution works perfectly. We have discovered lately that it can be possible to upload a value to the file upload question using drag and drop, which will skip showing the dialog as proposed above using the survey.onOpenFileChooser.add(). Is there a way to deactivate updating the value of the file upload question on drag-drop?

Jane a month ago

Hello,

I created a separate ticket on your behalf: T22145: File Upload - Deactivate updating the value of the file upload question on drag-drop?. We placed it in our processing queue and will process it shortly.

Change template of file upload question

Answers approved by surveyjs Support

Recently viewed tickets