Loading animation while uploading files

[sumitlearnt]

I was able to upload mutiple file from surveyjs using XHR upload from the sample. I can also see the total bytes uploaded . Is there any way to show them as the progressbar?

onUploadFiles = (result, options) => {
    const totalCount = options.files.length;
    options.files.map((file, i) => {
      const formData = new FormData();
      
      
      // options.files.forEach(file => {
      formData.append('file', file);
      $.ajax({
        url: UploadURL,
        type: 'POST',
        xhr() {
          const myXhr = $.ajaxSettings.xhr();
          if (myXhr.upload) {
            myXhr.upload.addEventListener(
              'progress',
              event => {
                let percent = 0;
                const position = event.loaded || event.position;
                const total = event.total;
                percent = (position / total) * 100;
                console.log('percent', percent);
                console.log('count', `${i}of${totalCount}`);
              },
              false,
            );
          }
          return myXhr;
        },
        success(data) {
          options.callback(
            'success',
            // multiple file fix
            [file].map(file => {
              return {
                file,
                content: data.secure_url,
              };
            }),
          );
        },
        error(error) {
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000,
      });
    });
  };

[andrewtelnov]

@sumitlearnt Where do you want to show the progress bar? Right now we do not have this functionality in the file question. I may add it as a feature request.

Thank you,
Andrew

[sumitlearnt]

@andrewtelnov Thanks for reply, I want to show the progress bar just underneath of file field . thats where i am struggling. At the moment I was able to show the progress bar out of the surveyjs components i.e somewhere on the same html page

[andrewtelnov]

@sumitlearnt No doubt, the progress bar inside the question would be better. It is in our TODO list now, but I could not get any estimates on this functionality yet. Busy with other things, sorry.

Thank you,
Andrew

[PankajKumawat125]

Hi,
Can you please add this feature ASAP?

or can you suggest me some alternative to show progress bar in the question div itself ?

[tsv2013]

SurveyJS is a client side JavaScript library and doesn't contain the onUploadFiles event handler. It's the custom code and we can't write this code inside the SurveyJS library. We can provide an API to show progress over the each file preview block and progress indicator in case of preview is disabled.

We'll work of this feature if it will be highly requested.

On the other hand you can write your custom onUploadFiles event handler and show let's say a small popup window with progress indicator on your side. I believe this solution can be found over the web.

[sumitlearnt]

I did something like below , to show progress underneath file uploader

       const totalCount = options.files.length;
       options.files.map((file, i) => {
           const formData = new FormData();
           formData.append('file', file);
           $.ajax({
               url: url,
               type: 'POST',
               xhr() {
                   const myXhr = $.ajaxSettings.xhr();

                   if (myXhr.upload) {
                       myXhr.upload.addEventListener(
                           'progress',
                           event => {
                               let percent = 0;
                               const position = event.loaded || event.position;
                               const total = event.total;
                               percent = (position / total) * 100;
                               console.log('percent', percent);
                               console.log('count', `${i}of${totalCount}`);
                               $(".sv_q_file div").html('<div style="padding: 10px";font-weight: "bold"> Uploading ' + Math.floor(percent) + '% </div>')
                           },
                           false,
                       );
                   }
                   return myXhr;
               },
               success(data) {
                   $(".sv_q_file div").html('');
                   options.callback(
                       'success',
                       // multiple file fix
                       [file].map(file => {
                           return {
                               file,
                               content: your_file_data,
                           };
                       }),
                   );
                   $('.sv_q_file_remove_button').css('display', 'none');
               },
               error(error) {
                   
                   $(".sv_q_file div").html('<div style="padding: 10px; color:red;font-weight: bold">Something went wrong on upload</div>')

               },
               async: true,
               data: formData,
               cache: false,
               contentType: false,
               processData: false,
               timeout: 60000,
           });
       });
   };

[pankajQW]

Hi @sumitlearnt
Your solution is a very good workaround. But I am still facing one issue... If we have more than 1 file upload fields, then It always updates div of first field only.
Can you help me with how to get current element and update?

[sumitlearnt]

@pankajQW @andrewtelnov
Thanks for pointing out that bug.
Finally I was able to do it for mutiple fileupload as well . Please correct me if anything is wrong

const onUploadFiles = (result, options) => {
        options.files.map((file, i) => {
            const  elements = $("body").find("[aria-label='"+options.name+"']");
            const formData = new FormData();
            formData.append('file', file);
            axios.post(UploadURL,
                formData,
                {
                    onUploadProgress: function (progressEvent) {
                        const percent = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
                        const html='<div  class="uploadprogress" style="padding: 10px; color:blue;font-weight: bold"> Uploading ' + Math.floor(percent) + '% </div>';
                        elements.parent().find('.uploadprogress').remove();
                        elements.parent().append(html);
                        if(percent===100){
                            elements.parent().find('.uploadprogress').remove();
                        }
                    }.bind(this)
                }
            ).then(function (response) {

                options.callback(
                    'success',
                    // multiple file fix
                    [file].map(file => {
                        return {
                            file,
                            content: response.data.secure_url,
                        };
                    }),
                );
                $('.sv_q_file_remove_button').css('display', 'none');

            })
                .catch(function () {
                    console.log('FAILURE!!');
                    const errorhtml='<div style="padding: 10px; color:red;font-weight: bold">Something went wrong on upload</div>';
                    elements.parent().find('.uploadprogress').remove();
                    elements.parent().append(errorhtml);
                });

        });
    };

[pankajQW]

@sumitlearnt

Hey thanks for your efforts and response.

I was also working on this yesterday night and have done this way and frankly it's working for me.

document.querySelector("div#"+options.question.id+".sv_q.sv_qstn div div.sv_q_file div").cloneNode(true)

Let me know if you think this is correct or not?
Also I want to show imageview of survey along with progress and when done I just want to remove progress and just keep the imageview?

Appreciate your efforts

[sumitlearnt]

@pankajQW IMO you should get rid of hardcoded class like sv_q.sv_qstn div div.sv_q_file so that it will work even when you customise the css attributes . Showing imageview should be easy as well .

[MrKrabat]

+1 loading animation is still not implemented
Since only one upload is allowed at a time, this is a problem because you do not know when the first one is finished.

[ZakariaESDModellium]

Hey @andrewtelnov / @tsv2013
Has this feature been implemented ?
Thank you guys!

[tsv2013]

@ZakariaESDModellium at this moment - no

[tsv2013]

Fixed in surveyjs/survey-creator#4435