V petek sem okoli 14h dobil idejo in v nedeljo pred kosilom je bila stvar nared.

No, seveda večine dela nisem opravil sam. Največ mi je pomagal jQuery-file-upload widget, ki sem ga našel na spletu. Zadeva je zastavljena kot samostojen in celovit sistem za nalaganje datotek (s poudarkom na slikah), da pa se ga uporabiti kot zgolj osnovo za lastne projekte. In točno to sem naredil jaz.

Najprej sem v svojo kodo v glavi dokumenta dodal nalaganje widgeta:

<script type="text/javascript" src="jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="jquery.iframe-transport.min.js"></script>
<script type="text/javascript" src="jquery.fileupload.min.js"></script>

Nato sem v strani, kjer imam možnost nalaganja slik dodal jQuery inicializacijo, ki poskrbi, da se na ustrezne elemente vklopi želena funkcionalnost.

<script type="text/javascript">
$(document).ready(function(){
  $("#fileupload").fileupload({
    url = "upload_image.php";
    dataType: "json",
    dropZone: $("#dropzone"),
    pasteZone: null,
    add: function(e, data) {
      data.context = $("#dropzone").text("Uploading ...");
      data.submit();
    },
    done: function (e, data) {
      $.each(data.result.files, function(index, value) {
        if ( index=="name" )
          data.context.text("Uploaded.");
        if ( index=="error" )
          data.context.text("Error uploading.");
      });
    }
  });
});
</script>

Seveda sem moral <input> element, ki služi za izbiro datoteke, opremiti z ustreznim id-jem.

<INPUT ID="fileupload" TYPE="file" NAME="file">

Ter nastaviti površino za odlaganje. Privzet je cel dokument, kar pa meni ni ustrezalo, zato sem zadevo naredil takole:

<DIV ID="dropzone" STYLE="width:100px;height:100px;">Drop image here.</DIV>

Sledila je priprava kode, ki dejansko poskrbi za nalaganje na strežnik. Posebnost te kode je, da vrne rezultat v JSON obliki, saj je widget narejen tako, da omogoča hkratno nalaganje večih datotek (z ustreznim parametrom) in pričakuje rezultate za vse datoteke, ki so bile izbrane/spuščene.

Sam tega nisem izkoristil, kar pomeni, da, tudi če na odložišče spustim več slik, za vsako datoteko ustvari svoj XHR zahtevek in se tako koda za obdelavo naloženih datotek poenostavi.

<?php
if ( isset($_FILES["file"]) && !$_FILES["file"]["error"] ) {
  @move_uploaded_file($_FILES["file"]["tmp_name"], "path/to/upload/".$_FILES["file"]["name"]);
  echo json_encode(array("files"=>array("name"=>$_FILES["file"]["name"]))));
} else {
  echo json_encode(array("files"=>array("error"=>"Upload error.")));
}
?>

Seveda, je moja dejanska koda precej bolj zakomplicirana, ker poskrbim hkrati še za izbiro ustreznega imenika in izdelavo thumbnailov, ter ustrezno posodobim podatkovno bazo, a princip je vendarle tako preprost, kot je opisano zgoraj.

Seveda pa z enostavnimi rešitvami ljudje nismo vedno zadovoljni in tudi sam sem želel, da bi na eni strani imel dve odložišči - eno za galerije in drugo za osnovno sliko besedila. Izkaže se, da se zadeva malce zakomplicira, saj widget ni pripravljen, da bi na eni spletni strani imel dve vnosni polji za nalaganje slik. Tako sem se poslužil lastnosti, da lahko definiram več dropzone-ov in potem v trenutku odlaganja ugotovim, kam je uporabnik odložil datotek in nato kličem ustrezno kodo.

Nekaj debugiranja in na dan sem prišel z naslednjo kodo:

$("#fileupload").fileupload({
  ...
  dropZone: $("#dropzone1,#dropzone2"),
  ...
  add: function(e, data) {
    data.context = $(e.originalEvent.currentTarget);
    switch ( data.context.attr("id") ) {
      case "dropzone1":
        data.url = "upload_file1.php";
        ...
        break;
      case "dropzone2" :
        data.url = "upload_file2.php";
        ...
        break;
    }
    data.submit();
  },
  done: function (e, data) {
    switch ( data.context.attr("id") ) {
      case "dropzone1":
        ...
        break;
      case "dropzone2" :
        ...
        break;
    }
 }
});

Na ta način imam lahko poljubno število odlagalnih površin in vsako ima svojo akcijo, ne glede na to, da imam na strani zgolj eno vnosno polje za izbiro datotek.