Hi All,
Requirement: Using DrupalGap, I want to add a product to database with product image.

In my form I have buttons for 'capture image' and 'browse image'. After capture the image using file_save() I upload and store the image details in the database. Including the 'fid' in the file_save() function's success callback, I have stored the rest of the product details in the database. All the things are working successfully, but there is a delay after pressing the 'Save' button. This tempts the user to press the save button again, which cause multiple product creation. I tried to disable the button the save button's click() function, it works but took time.

I have noticed one thing, if I avoid the image file upload it works instantly. Soon after the save button press, the button is disabled.

Why if the fid is there in the form, submit tooks time?
The real file upload is not happening when the capture image save?
If it is not happening then how it gets the 'fid'?
How can I disable the save button instantly with the product creation with image?

Regards,
Saneesh.

Comments

Saneesh created an issue. See original summary.

tyler.frankenstein’s picture

tyler.frankenstein CreditAttribution: tyler.frankenstein commented
Status: Active » Postponed (maintainer needs more info)

Are you using a form built into DrupalGap? (i.e. the node add/edit form). Or are you building your own custom form?

Saneesh’s picture

Saneesh CreditAttribution: Saneesh commented

Hello Tyler,

I'm using custom form.

Regards,
Saneesh.

tyler.frankenstein’s picture

tyler.frankenstein CreditAttribution: tyler.frankenstein commented

First, make sure your custom form element(s) don't use field machine names, that will confuse the DrupalGap Form State Values assembly mechanism. Please share some code, otherwise it's hard to guess what's going on.

Saneesh’s picture

Saneesh CreditAttribution: Saneesh commented

Hello Tyler,
Sorry to late reply.

These are my add and edit functions:

function add_product() {
  $(document).on('pageinit', '#add_product', function () {
    $(document).on('click', '#save', function (e) {
      // Disable the button to avoid the multile submit.
      $('#save').html('Saving...').prop('disabled', true);
      e.preventDefault();

      try {
        var image_file_data = localStorage.getItem("image_data");

        if (!image_file_data) {
          throw "Image not uploaded.";
        }

        var d = new Date();
        var image_name = Drupal.user.uid + '_' + d.valueOf() + '.jpg';

        var file = {
          file: {
            file: image_file_data,
            filename: image_name,
            filepath: 'public://' + image_name
          }
        };

        if (!empty(Drupal.settings.file_private_path)) {
          file.file.filepath = 'private://' + image_name;
        }

        // Change the loader mode to saving, and save the file.
        drupalgap.loader = 'saving';

        file_save(file, {
          async: false,
          success: function (response) {
            var node_product = {
              "title": $('#name').val(),
              "type": "grocery",
              "field_category": {
                "und": $('#category').val()
              },
              "uid": Drupal.user.uid,
              "field_product": {
                "und" : {
                  "form": {
                    "field_image": {
                      "und": [{
                        "fid": response.fid,
                      }]
                    },
                    "commerce_price": {
                      "und": [{
                        "amount": $('#mrp').val(),
                        "currency_code": "INR",
                        "data": {
                          "components": []
                        }
                      }]
                    }
                  }
                }
              },
              "language": "und"
            };

            product_save(node_product);
          }
        });
      }
      catch (error) {
        alert('add_product - ' + error);
      }
    });
  });

  var content = {};

  // Product details.
  content['product_form'] = {
    markup: (
      [
        '<form>',
        '<div class="add-prd-container">',
        '<div class="add-prd-details">',
        '<div class="add-prd-form">',
        '<div class="add-prd-left">' + t('Product Name') + '</div>',
        '<div class="add-prd-right"><input required id="name" type="text" name="prd_name"></div>',
        '</div>',
        '<div class="add-prd-form">',
        '<div class="add-prd-left">' + t('Product ID/Code') + '</div>',
        '<div class="add-prd-right"><input required id="sku" type="text" name="prd_code"></div>',
        '</div>',
        '<div class="add-prd-form">',
        '<div class="add-prd-left">' + t('Category') + '</div>',
        '<div class="add-prd-right">' + generate_categories() + '</div>',
        '</div>',
        '<div class="add-prd-form">',
        '<div class="add-prd-left">' + t('MRP') + '</div>',
        '<div class="add-prd-right"><input required id="mrp" type="number" name="mrp"></div>',
        '</div>',
        '<div class="add-prd-form">',
        '<div class="add-prd-left">' + t('Store price') + '</div>',
        '<div class="add-prd-right"><input id="store_price" type="number" name="sp"></div>',
        '</div>',
        '<div class="add-prd-form">',
        '<div class="add-prd-left">' + t('Image') + '</div>',
        '<div class="add-prd-right"><img id="product_image" width="50" /></div>',
        '</div>',
        '</div>',
      ].join("")
    )
  };

  // Open library.
  content['camera'] = {
    theme: 'button_link',
    text: t('Capture Image'),
    path: null,
    attributes: {
      'data-icon': 'camera',
      'data-iconpos': 'right',
      onclick: 'product_camera_click()'
    }
  };

  // Photo library.
  content['photos'] = {
    theme: 'button_link',
    text: t('Browse Image'),
    path: null,
    attributes: {
      'data-icon': 'grid',
      'data-iconpos': 'right',
      onclick: 'product_photos_click()'
    }
  };

  // Submit button.
  content['product_save'] = {
    markup: ([
      '<div class="save-btn"><button type="submit" id="save">' + t('Save') + '</button></div>',
      '</div>',
      '</form>'
    ].join(""))
  };

  return content;
}

function edit_product() {
  preload_categories();
  localStorage.setItem("image_data", "");

  var nid = arg(1);

  try {
    $(document).on("pageinit", ".edit_product", function() {
      $(document).on("click", ".image_change", function() {
        $(".product-edit-file-button").slideToggle("slow");
      });

      $(document).on("click", ".discount-sticker", function(){
        $(".add-discount-stickers-outer").show();
      });

      $(document).on("click", ".add-discount-button-cancel", function(){
        $(".add-discount-stickers-outer").hide();
      });

      $(document).on("click", "#delete", function(){
        var opinion = confirm("Are you sure you want to delete?");

        if (opinion) {
          node_delete($('#nid').val(), {
            success: function(result) {
              drupalgap_alert('Product deleted successfully!.');
              drupalgap_goto('home_page');
            }
          });
        }
      });
      $(document).on("click", "#product_save", function(e) {
        e.preventDefault();

        // Disable the button to avoid the multile submit.
        $('#product_save').html('Saving...').prop('disabled', true);

        try {
          // Change the loader mode to saving.
          drupalgap.loader = 'saving';

          var node_product = {
            "title": $('#name').val(),
            "type": "grocery",
            "uid": Drupal.user.uid,
            "nid": $('#nid').val(),
            "product_id": $('#product_id').val(),
            "field_category": {
              "und": $('#category').val()
            },
            "mrp": $('#mrp').val(),
            "offer_price": $('#store_price').val(),
            "image_fid": 0,
            "sku": $('#sku').val(),
            "language":"und"
          };

          var image_file_data = localStorage.getItem("image_data");

          // If the product image changed, upload it first then update details.
          if (image_file_data) {
            var d = new Date();
            var image_name = Drupal.user.uid + '_' + d.valueOf() + '.jpg';

            var file = {
              file: {
                file: image_file_data,
                filename: image_name,
                filepath: 'public://' + image_name
              }
            };

            if (!empty(Drupal.settings.file_private_path)) {
              file.file.filepath = 'private://' + image_name;
            }

            file_save(file, {
              async: false,
              success: function (response) {
                node_product.image_fid = response.fid;

                product_update_save(node_product);
              }
            });
          }
          // Image not changed file_save() call not needed.
          else {
            node_product.image_fid = $('#fid').val();

            product_update_save(node_product);
          }
        }
        catch (error) {
          console.log('product_edit_page - ' + error);
        }
      });
    });

    var content = {};

    content['edit_product'] = {
      theme: 'view',
      format: 'form',
      path: 'product_edit/' + nid,
      row_callback: 'product_edit_row',
      empty_callback: 'product_empty',
      attributes: {
        id: 'my_products_list_view'
      }
    };

    return content;
  }
  catch (error) {
    console.log('product_edit_page - ' + error);
  }
}