Loading animation while uploading files

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,
      });
    });
  };

[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);
                });

        });
    };

[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,
           });
       });
   };