File Upload - Deactivate updating the value of the file upload question on drag-drop?

AEL

created a month ago (modified a month ago)

[Ticket cloned from T20727: Change template of file upload question]

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?

Comments (1)

Jane a month ago

Hello,
I will discuss this usage scenario with our developers: https://github.com/surveyjs/survey-library/issues/9551. Please stay tuned.

Answers approved by surveyjs Support

Jane

created 18 days ago

Hello,
Our developers researched this issue. It appears that there is no simple way to prevent users from dropping files to a File Upload. If you wish to upload only those files which were selected via your custom file chooser dialog, consider sending an additional custom attribute within your uploaded files and check this attribute within the survey.onUploadFiles function.

Let me know if you have any further questions.

Show previous comments (4)

AEL 10 days ago

Thank you for your reply.

I have the following recommendation that can help the solution be more clean. I suggest to introduce custom configuration for the file upload event, since it is possible to intercept the upload event at anytime, it makes sense to add more customization conflagration options.

The following is a pseudo example to what i mean.

Code
type FileUploadEventConfiguration = Record<string, any>;

interface UploadFilesEvent extends LoadFilesEvent {
    callback: (data: any | Array < any > , errors ? : any | Array < any > ) => any;
    files: Array < File > ;
    configuration?: FileUploadEventConfiguration;
}

interface options.callback = (files: Array < File > , confiugration: FileUploadEventConfiguration) => void


model.onOpenFileChooser.add((_, options) => {
   // SOME CUSTOM FILE CODE WHERE WE GET THE FILES IN ( "files" `)

    customCondiguration: FileUploadEventConfiguration = {
        someProperty: 'some-value'
    };
    options.callback(files, customCondiguration);
});

model.onUploadFiles.add((_, options: UploadFilesEvent) => {
    console.log(options?.configuration) // should print { someProperty: 'some-value' }
})

AEL 10 days ago

Also another suggestion to add something like:

model.onFileDragDropAllow.add(..)

Because even if i am able to somehow distinguish between files coming from the "file chooser" and "drag and drop", i want to be able to cut the event from the start. The event if triggered, then it will already have removed any file existing in a file question of type single file upload and it will overwrite it with the new one uploaded through the drag and drop event. In that case, i will need to retrieve the old file and set it. Which is a lot of over-complication that hopefully we can solve better in collaboration with you guys :)

Jane 9 days ago

Hello,
Thank you for your input. I'll discuss those options with our developers. Please stay tuned.

sam 5 days ago

Hi AEL,

Note i'm not on the team but we have implemented a custom file browser as well.
We handle dragging & dropping seamlessly.
Our custom file picker supports new file uploads and has a concept of a "default" directory for the current survey being edited.

So when a user drag & drops a file we just upload it to that default directory leading to a seamless experience for the user. Maybe this helps you, if not sorry for wasting your time!

AEL 5 days ago

Hello Sam,

thank you for your suggestions. I can't tell if it helps or not yet. Do you mind sharing more technical information with me, like how do you handle the drag and drop files differently?

sam 5 days ago

TypeScript
creator.onUploadFile.add(
                async (
                    _sender: CreatorBase,
                    {
                        files,
                        callback
                    }: { question: Question; files: File[]; callback: (status: string, link: string) => void }
                ) => {
                    console.log('onUploadFile', files);
                    if (files[0].name.startsWith('https://')) {
                        callback('success', files[0].name);
                    } else if(fileUploader) {
                        const url = await fileUploader(files[0]);
                        callback('success', url.toString());
                    }
                }
            );

            creator.onOpenFileChooser.add(
                async (
                    _sender: CreatorBase,
                    { callback }: { input: HTMLInputElement; callback: (files: File[]) => void }
                ) => {
                    console.log('onOpenFileChooser');
                    try {
                        const pickedFile = await pickFile();
                        callback([new File([], pickedFile.toString())]);
                    } catch (error) {
                        console.error('File picker canceled with error:', error);
                    }
                }
            );

Basically in the file chooser I set the file name to a URL, in the upload event I check whether the filename is a URL, if not I upload it and call the callback with the URL.

AEL 4 days ago

Thank you for your suggestions sam :)

I have a similar approach to this that i can implement. However for me it entails much more code to maintain the business case. Thats why i wanna prevent the event from triggering from the first place.

File Upload - Deactivate updating the value of the file upload question on drag-drop?

Answers approved by surveyjs Support

Recently viewed tickets