src/Crud/templates/crud/dropZone_single.html.twig line 1

Open in your IDE?
  1. <script>
  2.     $(document).ready(function(){
  4.             // jquery del dropzone
  5.             try {
  6.                 Dropzone.autoDiscover = false;
  8.                 var rejectDimensions;
  9.                 var acceptDimensions;
  11.                 var myDropzone = new Dropzone("#dropzone_{{ routeClassName }}_{{ field }}" , {
  12.                                         paramName: "file", // The name that will be used to transfer the file
  13.                                         maxFilesize: 2.5, // MB
  14.                                         maxFiles: 1,
  15.                                         addRemoveLinks : true,
  16.                                         removedfile: function(file) {
  17.                                             
  18.                                             jConfirm('{% trans from 'crud' %}delete.confirm{% endtrans %}', 'Alerta', function(r) {
  19.                                                 if (r)
  20.                                                 {
  21.                                                     var deleteUrl = '{{ path('dropzone_single_delete', {'routeClassName': routeClassName, 'id': '__ID__', 'field': field,}) }}';
  22.                                                     deleteUrl = deleteUrl.replace('__ID__',file.id);
  23.                                                     $.getJSON(deleteUrl, function(data) {
  24.                                                         myDropzone.options.maxFiles += 1;
  25.                                                     });
  27.                                                     var _ref;
  28.                                                     return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 
  29.                                                 }
  30.                                             });
  31.                                             
  32.                                         },
  33.                                         success: function(file) {
  34.                                             
  35.                                             myDropzone.options.maxFiles -= 1;
  36.                                             if (file.previewElement) {
  37.                                                 //var param = "'"+file.name+"'";
  38.                                                 //$(file.previewElement).append('<a class="dz-description" href="" onclick="javascript:editDescripcion('+file.id+'); return false;">Descripción</a>');
  39.                                                 return file.previewElement.classList.add("dz-success");
  40.                                             }
  41.                                             
  42.                                         },
  43.                                         thumbnail: function(file, dataUrl) { 
  44.                                             var thumbnailElement, _i, _len, _ref, _results;
  45.                                             if (file.previewElement) 
  46.                                             {
  47.                                                 file.previewElement.classList.remove("dz-file-preview");
  48.                                                 file.previewElement.classList.add("dz-image-preview");
  49.                                                 _ref = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
  50.                                                 _results = [];
  51.                                                 for (_i = 0, _len = _ref.length; _i < _len; _i++) 
  52.                                                 {
  53.                                                     thumbnailElement = _ref[_i];
  54.                                                     thumbnailElement.alt = file.name;
  55.                                                     _results.push(thumbnailElement.src = dataUrl);
  56.                                                 }
  57.                                                 {% if ratio is defined %}
  58.                                                     if (file.width / file.height < {{ ratio }}-0.01 || file.width / file.height > {{ ratio }}+0.01) 
  59.                                                     {
  60.                                                         file.previewElement.classList.remove("dz-success");
  61.                                                         file.previewElement.classList.add("dz-error");
  62.                                                         var w;
  63.                                                         w=$(file.previewElement).children('.dz-error-message').children('span');
  64.                                                         w.attr('data-dz-errormessage','ASPECT RATIO');
  65.                                                         w.html('ASPECT RATIO');
  66.                                                     }
  67.                                                 {% endif %}
  68.                                                 return _results;
  69.                                             } 
  70.                                         },
  71.                                         dictDefaultMessage :
  72.                         '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Droap files</span> to upload \
  73.                         <span class="smaller-80 grey">(or click)</span> <br /> \
  74.                         <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
  76.                                         dictResponseError: 'Error while uploading file!',
  77.                                         acceptedFiles: '{{ acceptedFiles }}{% if acceptedFiles == 'image' %}/*{% endif %}  ',
  78.                                         //change the previewTemplate to use Bootstrap progress bars
  79.                                         previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
  80.                 });
  82.                 //var existingFileCount = 0; // The number of files already uploaded
  83.                 {% if entity.getFieldValue(field) %}
  84.                     var mockFile = { name: "{{ entity.getFieldValue(field).archivo }}", size: {{ entity.getFieldValue(field).size }}, id: {{ entity.id }} };   
  85.                     myDropzone.options.addedfile.call(myDropzone, mockFile);
  86.                     myDropzone.options.thumbnail.call(myDropzone, mockFile, "{{ absolute_url(entity.getFieldValue(field).getUrl()) }}");
  87.                     myDropzone.options.success.call(myDropzone, mockFile);
  88.                     myDropzone.options.maxFiles = 0;
  89.                 {% endif %}
  91.                 $(document).one('ajaxloadstart.page', function(e) {
  92.                     try {
  93.                         myDropzone.destroy();
  94.                     } catch(e) {}
  95.                 });
  97.             } catch(e) 
  98.             {
  99.                 alert('Dropzone.js does not support older browsers!');
  100.             }
  102.             $('.progress-small').addClass('hide');
  104.     });
  105.     
  106. </script>
  108. {% block index %}
  109.     <div class="alert alert-info">
  110.         <strong>
  111.             <i class="ace-icon fa fa-upload bigger-150"></i>
  112.             {{ texto | upper }}
  113.         </strong>
  115.         <br>
  116.     </div>
  117.     {% if ratio is defined %}
  118.         <form id="dropzone_{{ routeClassName }}_{{ field }}" class="dropzone" action="{{ path('dropzone_single_upload', {'routeClassName': routeClassName, 'parentId': parentId, 'field': field, 'ratio': ratio }) }}" style="background-color: #d9edf7! important">
  119.     {% else %}        
  120.         <form id="dropzone_{{ routeClassName }}_{{ field }}" class="dropzone" action="{{ path('dropzone_single_upload', {'routeClassName': routeClassName, 'parentId': parentId, 'field': field}) }}" style="background-color: #d9edf7! important">
  121.     {% endif %}        
  122.             <div class="fallback">
  123.                 <input name="file" type="file" />
  124.             </div>
  125.             <div class="dz-message">
  126.             </div>
  127.    
  128.         </form>
  129.                 
  130.     <div id='dialog_descripcion_{{ routeClassName }}'></div>
  131.     <div id='dialog_{{ routeClassName }}'></div>
  132.     <script>
  133.         $(document).ready(function(){
  135.             function editDescripcion(fileId)
  136.             {
  137.                 var baseSite = $('#baseSite').val();
  138.                 var url = baseSite+"{{routeClassName}}/describir/foto/"+fileId;
  139.                 $('#dialog_{{ routeClassName }}').parent().mask("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cargando...");
  140.                 $('#dialog_{{ routeClassName }}').dialog('open');
  141.                 $('#dialog_{{ routeClassName }}').load(url, function(){
  142.                     $('#dialog_{{ routeClassName }}').parent().unmask();
  143.                 });
  145.             }
  146.         });
  147.     </script>        
  148. {% endblock %}