Sencha Touch - Upload e download

O Sencha Touch fornece configuração XHR2 para funcionar com desenvolvimento Ajax e Ajax2.

XHR2 é xmlHttpRequest nível 2, que costumava solicitar dados do servidor. Para qualquer aplicativo da web, os dados residem no servidor e uma vez que a página é carregada, os dados devem ser acessados ​​do servidor com a ajuda de solicitações Ajax.

O XHR2 no Sencha Touch fornece o recurso de barra de progresso, que mostra ao usuário a quantidade de dados transferidos para uma solicitação específica. O XHR2 foi adicionado recentemente, portanto, precisamos verificar se o navegador é compatível ou não.

A seguir está a função para verificar se o navegador oferece suporte a XHR2 -

if (Ext.feature.has.XHR2) {
   // Here we can write functionality to work if browser supports XHR2 
}

Podemos até verificar se o upload progressivo com XHR2 é suportado pelo navegador ou não.

if (Ext.feature.has.XHRUploadProgress) {
   // Here we can write functionality to work if browser supports progressive uploads
}

Vários novos recursos XHR2 estão incluídos no Sencha Touch.

Sr. Não Características e descrição
1

XHR2: true

Isso é usado para habilitar e desabilitar a funcionalidade XHR2 no aplicativo.

2

Ext.field.File

Novo campo de arquivo é adicionado para dar mais calma sobre o tipo de campo.

3

Ext.field.FileInput

Isso para fornecer FileInput.

4

Ext.progressIndicator

Isso é para fornecer a porcentagem exata de dados transferidos em termos de barra de progresso.

5

xtype: fileinput

Para criar uma instância da classe fileInput.

6

xtype: filefield

Para criar uma instância da classe de arquivo.

7

responseType : value

Este parâmetro permite vários tipos de respostas como texto, documento, blob etc.

A seguir estão os exemplos para enviar uma solicitação simples de ajax com e sem parâmetro e fazer upload de arquivos usando ajax.

Solicitação Ajax simples sem parâmetros - Sucesso

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/index.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

Isso produzirá o seguinte resultado -

O exemplo acima mostra a chamada ajax bem-sucedida, pois a URL mencionada está correta. Neste exemplo, não estamos passando nenhum parâmetro, é apenas uma simples solicitação ajax que atinge a URL mencionada.

Se você estiver usando o navegador Chrome na ferramenta do desenvolvedor, navegue até a seção de rede, você pode ver a solicitação que está sendo enviada e a resposta que recebemos.

Solicitação Ajax simples sem parâmetros - Falha

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],
            onReady: function() {
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/indexx.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

Isso produzirá o seguinte resultado -

No exemplo acima, apenas para mostrar como funciona a falha de ajax, mencionamos a URL errada. Compare este exemplo com o anterior, você encontrará a diferença.

Envio de parâmetros em solicitação Ajax

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],

            onReady: function() {
               var formData = new FormData();
               formData.append("firstName", "Hi");
               formData.append("lastName", "Reader");

               // Request will be sent as part of the payload instead of standard post data
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  data: formData,
                  success: function(response) {
                     var out = Ext.getCmp("output");
                     response = Ext.JSON.decode(response.responseText, true);
                     Ext.Msg.alert(response.message);
                  },
                  failure: function(response) {
                     var out = Ext.getCmp("output");
                     Ext.Msg.alert('Ajax failed!');
                  }
               };

               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });      
      </script>
   </head>
   <body>
   </body>
</html>

Isso produzirá o seguinte resultado -

Neste exemplo, estamos passando parâmetros com o ajax usando a propriedade data da chamada ajax.

Upload de arquivos usando Ajax

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.MessageBox',
               'Ext.Button',
               'Ext.ProgressIndicator',
               'Ext.form.Panel',
               'Ext.field.FileInput'
            ],

            onReady: function() {
               var progressIndicator = Ext.create("Ext.ProgressIndicator", {
                  loadingText: "Uploading: {percent}%"
               });

               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  progress:progressIndicator,
                  success: function(response) {
                     Ext.Msg.alert('File uploaded successfully.');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('File upload failed.');
                  }
               };

               Ext.Viewport.add(progressIndicator);
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"fileinput",
                        accept:"image/jpeg"
                     },
                     {
                        xtype:"button",
                        text: "Upload",
                        ui: 'confirm',
                        handler: function(){
                           var input = Ext.Viewport.down("fileinput").input;
                           var files = input.dom.files;
                           if (files.length) {
                              request.binaryData = files[0];
                              Ext.Ajax.request(request);
                           }else {
                              Ext.Msg.alert("Please Select a JPG");
                           }
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

Isso produzirá o seguinte resultado -

Este exemplo mostra como fazer upload de dados usando uma chamada ajax. Neste exemplo, estamos usando o indicador da barra de progresso para mostrar o progresso durante o upload do arquivo.