faila augšuplāde modālā logā

ctrnz Wed, 08/19/2015 - 10:05

Ir nepieciešamība pēc samērā vienkāršas lietas. Vienā no satura veidiem ir Datnes lauks. Estētisku iemeslu dēļ gan veidojot jaunu, gan labojot esošu, nepieciešams šī lauka vietā rādīt butonu/ikonu, kuru klikšķinot "izlec" modāls/dialog/popup lodziņš, kurā tad tālāk tiek augšuplādēts fails. Tas tiek panākts ar jQuery Dialog palīdzību. Izskats ir panākts vajadzīgais, taču diemžēl dzēst esošus failus sanāk, bet nesanāk pievienot jaunus. Neatkarīgi no faila izmēra, šis modālais logs pēc faila augšuplādes atgriež

"An unrecoverable error occurred. The uploaded file likely exceeded the maximum file size (8 MB) that this server supports."

Runa ir par Drupal 7. Izmantotais JS:

(function ($) {
Drupal.behaviors.module_custom = {
attach: function (context, settings) {
//appending button
var $inputButton = $('<input type="button" value="File" id="open_modal" />');
$inputButton.insertAfter($(".field-name-field-file"));
//hiding file upload wrapper div
$('.field-name-field-file').hide(); 

//initializing modal dialog window   
$( ".field-name-field-file" ).dialog({
  autoOpen: false,
  show: {
    effect: "blind",
    duration: 1000
  },
  hide: {
    effect: "explode",
    duration: 1000
  },
  width: 500
});

//launching modal dialog when button is clicked
$( "#open_modal" ).click(function() {
  $( ".field-name-field-file" ).dialog( "open" );
});

  }); 

}
  };
    }(jQuery));

 

Tā nav samērā vienkārša lieta! Nevar tā vnk izraut kādu formas lauku ārā no formas ielikt modālā logā. Paeksperimentē ar Title lauku. Es iesaku izmantot Accordeon field group un nostilot, vai arī Tab. Un būs estētiski.
Ieteiktais risinājums īsti nederēs. Tas Datnes lauks ir iekš Field Collection un prasība ir tieši modāls logs. Varbūt ir risinājums kā izdarīt tā, lai faila augšuplādes notiek tikai reizē ar visas formas submitu? Pašreiz ir obligātais AJAX augšuplādes process, ja formai pievieno failu. Ja no tā tiktu vaļā, tad visam vajadzētu strādāt :)

Tad var šādi.

$('html').once(function(){
  var $inputButton = $('MODAL');
  var $closeButton = $('CLOSE');
  $('#edit-upload').after($inputButton);
  $('#edit-upload').append($closeButton);
  $('#edit-upload').addClass('md-modal');
});

CSS

.md-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 630px;
  min-width: 320px;
  height: auto;
  z-index: 2000;
  visibility: hidden;
  transform: translateX(-50%) translateY(-50%);
}

.md-modal:target { visibility: visible; }

Tas ir tikai piemērs. Pilnveido un nostilo pēc vajadzības.

Paldies par lielisku padomu! Izskatās, ka ar šādu pieeju viss strādā.