Can we reset dropify? - Githubissues

viet241 commented 8 years ago

when a visitor clicks [form-reset-button]

mahesh-gupta-moebel commented 8 years ago

I am also keen to know if it is possible. What my finding is resetPreview prototype doesnot provide any public function to call on.

bass3l commented 8 years ago

I use this:

  $('.dropify-clear').click();

It will act as if 'remove' button is clicked.

teqnology commented 7 years ago

You can also use:

var drEvent = $('#drop').dropify();
drEvent = drEvent.data('dropify');
drEvent.resetPreview();
drEvent.clearElement();

mecjos commented 7 years ago

I use one modal form which include dropify input element to edit table data elements. When I click edit button I set default image file to dropify and click close button of modal I use reset codes you gave but when I click another element's edit button it can not set default image to dropify again. How can i solve this?

teqnology commented 7 years ago

I honestly have no idea what your code does and how it's written so this may not be the solution. I'm not entirely sure I understand what you mean when you say "modal form which include dropify input element to edit table data elements". That doesn't really makes sense to me.

I'll try to give you a hint, you should be able to pick it up from here and adapt it to your code.

Are you saying you have multiple dropify instances in your page? If so, you need to declare your instances in a different way than the code above:

var drEvent = $('#drop').dropify();

The line above initializes the dropify method for the element with id drop as in <input type="file" id="drop" />. Since that's an "id", you can only have one declared in your page. Thus you probably want to switch and use a class name:

<input type="file" class="drop" />

and then you use it as follows:

var drEvent = $('.drop').dropify();

Basically you want to declare dropify() for each edit button you have in your page. Hope this somehow helps.

mecjos commented 7 years ago

At first, thanks for you fast reply.. You can see my code example below. There is a customer list table on my page and edit button on each table row. When edit button clicked a bootstrap modal runs. I have a edit form in this modal and customer logo input field. I want to edit this customer logo. As you can see on my codes. When edit button clicked I set default image to dropify by using $(".editDropify").dropify({defaultFile: compLogo}); and when modal close icon clicked I reset the form and clear dropify input by using your reset codes.

var drEvent = $('.editDropify').dropify();
drEvent = drEvent.data('dropify');
drEvent.resetPreview(); 
drEvent.clearElement();

This works till here. But when I click another table row's edit button,$(".editDropify").dropify({defaultFile: compLogo}); this code doesn't work. It is still reseted.

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

        <div class="modal fade modal-primary" id="editCustomerModal" aria-hidden="true" role="dialog" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" id="closeEditModal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">Müşteri Düzenle</h4>
              </div>
                <div class="modal-body">
                  <form class="form-horizontal" id="editCustomer" enctype="multipart/form-data" autocomplete="off">
                      <div class="form-group row">
                          <label class="col-xs-12 col-sm-3 form-control-label">Logo:</label>
                          <div class="col-sm-9 col-xs-12">
                              <input type="file" name="image" class="editDropify" />
                          </div>
                      </div>
                      <div class="form-group row">
                          <label class="col-xs-12 col-sm-3 form-control-label">Firma Adı:</label>
                          <div class="col-sm-9 col-xs-12">
                              <input type="text" class="form-control" name="comp_name" autocomplete="off" />
                          </div>
                      </div>
                      <div class="form-group row">
                          <label class="col-xs-12 col-sm-3 form-control-label">Adres:</label>
                          <div class="col-sm-9 col-xs-12">
                            <textarea class="form-control" name="comp_address" rows="5" ></textarea>
                          </div>
                      </div>
                      <div class="form-group row">
                          <label class="col-xs-12 col-sm-3 form-control-label">E-mail:</label>
                          <div class="col-sm-9 col-xs-12">
                              <input type="email" class="form-control" name="comp_email" autocomplete="off" />
                          </div>
                      </div>
                      <div class="form-group row">
                          <label class="col-xs-12 col-sm-3 form-control-label">Telefon:</label>
                          <div class="col-sm-9 col-xs-12">
                            <input type="tel" class="form-control" name="comp_tel" autocomplete="off" />
                          </div>
                      </div>
                      <div class="form-group row">
                          <label class="col-xs-12 col-sm-3 form-control-label">Referans No.:</label>
                          <div class="col-sm-9 col-xs-12">
                            <input type="text" class="form-control" name="comp_ref" autocomplete="off" />
                          </div>
                      </div>
                      <div class="form-group row">
                          <label class="col-xs-12 col-sm-3 form-control-label">Yetkili Adı:</label>
                          <div class="col-sm-9 col-xs-12">
                              <input type="text" class="form-control" name="user_name" autocomplete="off"/>
                          </div>
                      </div>
                      <div class="form-group row">
                          <label class="col-xs-12 col-sm-3 form-control-label">Yetkili Soyadı:</label>
                          <div class="col-sm-9 col-xs-12">
                              <input type="text" class="form-control" name="user_lastname" autocomplete="off"/>
                          </div>
                      </div>
                      <input type="hidden" name="which_form" value="customerForm" />
                      <input type="hidden" name="which_content" />
                  </form>
                </div>
                <div class="modal-footer p-0">
                    <div class="row no-space">
                        <div class="col-xs-12 col-sm-6">
                            <button type="button" class="btn btn-danger btn-block h-50 font-size-18" style="border-radius: 0;" data-dismiss="modal"><i class="icon fa-close" aria-hidden="true"></i> İptal </button>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <button type="submit" form="editCustomer" class="btn btn-success btn-block h-50 font-size-18" id="submitEditCustomer" style="border-radius: 0;"><i class="icon fa-save" aria-hidden="true"></i> Kaydet </button>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>

        <table class="table table-hover" data-role="content" data-plugin="selectable" data-row-selectable="true">
          <thead class="bg-blue-grey-100">
            <tr>
              <th>
                <span class="checkbox-custom checkbox-primary">
                  <input class="selectable-all" type="checkbox">
                  <label></label>
                </span>
              </th>
              <th></th>
              <th>Customer Name</th>
              <th width="100px">Logo</th>
              <th>Ref.No.</th>
              <th>Email</th>
              <th>Tel.</th>
              <th width="90px"></th>
            </tr>
          </thead>
          <tbody id="customerList">
            <tr>
              <td>
                <span class="checkbox-custom checkbox-primary">
                  <input class="selectable-item" type="checkbox">
                  <label></label>
                </span>
              </td>
              <td style="cursor: pointer;"> {{listNumber}} </td>
              <td style="cursor: pointer;"> {{customerName}} </td>
              <td style="cursor: pointer;"> {{customerLogo }} </td>
              <td style="cursor: pointer;"> {{customerRef }} </td>
              <td style="cursor: pointer;"> {{customerEmail }} </td>
              <td style="cursor: pointer;"> {{customerTel }} </td>
              <td style="display: none;"> {{customerAddress }} </td>
              <td style="display: none;"> {{authName }} </td>
              <td style="display: none;"> {{authLastName}} </td>
              <td>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-icon btn-primary btn-outline editButton" data-edit-id="<?php echo $content['comp_id'] ?>" data-toggle="tooltip" title="Düzenle"><i class="icon wb-pencil" aria-hidden="true"></i></button>
                    <button type="button" class="btn btn-icon btn-danger btn-outline" id="deleteCustomer" data-delete-id="<?php echo $content['comp_id'] ?>" data-toggle="tooltip" title="Sil"><i class="icon wb-trash" aria-hidden="true"></i></button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>

        <script>
        $(document).ready(function() {

            $(document).on('click', 'button#deleteCustomer', function() {
                var deleteId = $(this).data("delete-id");
                var removeItem = $(this).closest('tr');
                bootbox.dialog({
                    message: "Bu müşteriyi silmek istediğinize emin misiniz?",
                    title: "Müşteri Sil",
                    buttons: {
                      success: {
                        label: "Sil",
                        className: "btn-success",
                        callback: function() {
                            $.post("deleteSomething.php",
                            {itemId : deleteId, deleteItem : "customer"}
                            );
                            removeItem.fadeOut(600);
                            toastr.error("Müşteri silindi.");
                        }
                      },
                      danger: {
                        label: "İptal",
                        className: "btn-danger",
                        callback: function() {
                        }
                      }
                    }
                }); 
            });

            $(document).on('click', '.editButton', function() {

                var compName = $(this).closest("tr").children("td:eq(2)").text().trim(),

                    compLogo = $(this).closest("tr").children("td:eq(3)").children("img").attr("src"),

                    compAddress = $(this).closest("tr").children("td:eq(7)").text().trim(),

                    compEmail = $(this).closest("tr").children("td:eq(5)").text().trim(),

                    compTel = $(this).closest("tr").children("td:eq(6)").text().trim(),

                    compRef = $(this).closest("tr").children("td:eq(4)").text().trim(),

                    compUserName = $(this).closest("tr").children("td:eq(8)").text().trim(),

                    compUserLastName = $(this).closest("tr").children("td:eq(9)").text().trim(),

                    editCompId = $(this).data("edit-id");

                $("#editCustomer input[name='comp_name']").val(compName);

                $("#editCustomer textarea[name='comp_address']").val(compAddress);

                $("#editCustomer input[name='comp_email']").val(compEmail);

                $("#editCustomer input[name='comp_tel']").val(compTel);

                $("#editCustomer input[name='comp_ref']").val(compRef);

                $("#editCustomer input[name='user_name']").val(compUserName);

                $("#editCustomer input[name='user_lastname']").val(compUserLastName);

                $("#editCustomer input[name='which_content']").val(editCompId);

                $("#editCustomerModal").modal({backdrop: "static"});

                $(".editDropify").dropify({defaultFile: compLogo});

            });

            $('#editCustomer')
                .formValidation({
                    framework: "bootstrap4",
                    button: {
                      selector: '#submitEditCustomer',
                      disabled: 'disabled'
                    },
                    icon: null,
                    fields: {
                      comp_name: {
                        validators: {
                          notEmpty: {
                            message: 'Şirket adı boş bırakılamaz.'
                          }
                        }
                      },
                      comp_email: {
                          validators: {
                              notEmpty: {
                                  message: 'Geçerli bir Eposta adresi belirtin.'
                              },
                              emailAddress: {
                                  message: 'Eposta adresi hatalı.'
                              }
                          }
                      },
                      comp_ref: {
                          validators: {
                              notEmpty: {
                                  message: 'Bir referans numarası belirtin.'
                              }
                          }
                      },
                      user_name: {
                          validators: {
                              notEmpty: {
                                  message: 'Yetkili adı boş bırakılamaz.'
                              }
                          }
                      },
                      user_lastname: {
                          validators: {
                              notEmpty: {
                                  message: 'Yetkili soyadı boş bırakılamaz.'
                              }
                          }
                      }
                    },
                    err: {
                      clazz: 'text-help'
                    },
                    row: {
                      invalid: 'has-danger'
                    }
                })

                .on('success.form.fv', function(e) {
                    e.preventDefault();

                    var formDatas = new FormData($("#editCustomer")[0]);

                    $.ajax({
                        type: "POST",
                        url: "editSomething.php",
                        data: formDatas,
                        cache: false,
                        contentType: false,
                        processData: false
                    })

                .success(function(response) {

                    var departmentName = $("#editDepName").val(),

                        descDepartment = $("#editDepDesc").val(),

                    $button = $("button[data-edit-id=" + editCompId + "]"),

                    $tr = $button.closest("tr"),

                    $cells = $tr.find("td");

                    $cells
                            .eq(2).html(departmentName).end()
                            .eq(3).html(descDepartment).end();

                    $("#editCustomerModal").modal('hide');

                    });
                });

            $(document).on('click', '.close', function () {

                $(".dropify-clear").click();

                $("#editCustomerModal").modal('hide');
            });

        });

        </script>
    </body>
</html>

teqnology commented 7 years ago

I think you need to check how variables are declares and what values those variables hold:

I declared a variable in my reset dropify code: var drEvent. You appear not to be using that. So you might want to normalize that. drEvent. Each time you call the "edit" action you should be declaring a variable and assigning it the new item (in this case the image).

$('.dropify').dropify(); and var drEvent = $('.dropify').dropify(); aredifferent if you're using the dropify event in multiple different events on the same page.

Play a little bit with that code, fix your variable values, and you should be able to fix it.

mecjos commented 7 years ago

I used your codes also.. Same result..

var drEvent = $('.editDropify').dropify(); drEvent = drEvent.data('dropify'); drEvent.resetPreview(); drEvent.clearElement();

rafaelgamezdiaz commented 6 years ago

Thanks teqnology, I was proving many ways of how to clean the dropify but at last your solution was my salvation.

var drEvent = $('#drop').dropify(); drEvent = drEvent.data('dropify'); drEvent.resetPreview(); drEvent.clearElement();

Best Wishes

deepesh0102 commented 5 years ago

HTML INPUT <input id="passport_picture" name="passport_picture" type="file" class=" form-control form-control-file dropify" id="passport_picture">

var drEvent = $('#identity_picture').dropify(); drEvent = drEvent.data('dropify'); drEvent.resetPreview(); drEvent.clearElement(); drEvent.settings.defaultFile = publicpath_identity_picture; drEvent.destroy(); drEvent.init(); $('.dropify#identity_picture').dropify({ defaultFile: publicpath_identity_picture, });

this works for me

jilmarrangel commented 4 years ago

Excelente gracias

JeremyFagis / dropify

Can we reset dropify? #22