# Figure out which year we're gong to save the image to (assume if after 18th December, Cast Off has already happened, and it's next year
    $year = date('Y');
    if ( date('m') == 12 && date('d') > 18 ) $year += 1;

    #JHtml::_('jquery.framework', false);
?>
{/source}

Cast-Off {source}<?php print $year; ?>{/source} Photo Competition Image Upload 3

Thanks for your entry to the Photo Competition.  To enter the competition, you just need to complete the following form, to upload your picture.

Only one entry per person, per category.

Your entries

Your Name: 

{source}

<input type=text id=username name=username value="<?php print $user->name; ?>" disabled />

<input type=hidden id=event name=event value=”castoff-photo”> 

<input type=hidden id=submitter name=submitter value=”<?php print $user->name; ?>” required />

<input type=hidden id=joomlaid name=joomlaid value="<?php print $user->id; ?>" required />

<input type=hidden id=secureToken name=secureToken value="wesGTHf458905KJDFBNgbk" required/>

<input type=hidden id=year name=year value="<script>print `${year}`;</script>" required/>

<style>
    .imageclass { 
        border: 3px inset purple;
    }
    .heading {
        color: red; 
        text-size: larger;
    }
    .upload_group {
        border: 1px solid red; 
        padding: 4px; 
        margin: 2px; 
    }
</style>

<script>

year = <?php print $year; ?>;

function makeString(t) {

    try {

        if (t == undefined)

            return (“”);

        else

            return (t);

        } catch (err) {

            return (err);

        }

}

function formBuilder(element) {

    //var divContent = “”;    

    try {

        // This Try block is for the generic content for the form, irrespective of whether the user has uploaded an image

        var categoryFolder = element.rootFolder + “/” + element.folder;

       var divContent = ‘\<form id=”‘ + element.folder + ‘”\>’;

        divContent += ‘\<div id=”div_’ + element.folder + ‘” class=upload_group>’;

        divContent += ‘\<p class=heading\>’ + element.title + ‘\<</p\>>’;

        divContent += ‘\<p>${element.description}\</p>’;

        // Obtain the user’s uploaded image (if there is one)

        var myImage = makeString(element.userContent.basename);

        var myTitle = makeString(element.userContent.title);

        var myNote = makeString(element.userContent.description);

        var myImagePath = ‘${categoryFolder}/${myImage}_small.jpg’;

        // Build the form content

        divContent += ‘\<p id=imgContainer_’ + element.folder + ‘>\<img id=img_’ + element.folder + ‘ src=${myImagePath}         alt=”‘ + element.title + ‘ photo not yet uploaded” title=”‘ + myTitle + ‘” class=imageclass><br>’;

        divContent += ‘\<p>File: \<input type=file accept=”image/*” id=file_’ + element.folder + ‘ name=file_’ + element.folder + ‘  value=”xx’ + element.basename + ‘”>\</u>\</p>’;

        dirContent += ‘\<p>Title: \<input type=text id=title_’ + element.folder + ‘ name=title_’ + element.folder + ‘  placeholder=”‘ + element.title + ‘” value=”‘ + myTitle + ‘”>\</u>\</p>’;

        divContent += ‘\<p>Note: \<textarea id=”note_’ + element.folder + ‘” name=”note_’ + element.folder + ‘” placeholder=”‘ + element.title + ‘” rows=3 cols=40>’;
        divContent += myNote;
        divContent += ‘\<\/textarea\>\<\/p\>’;

        divContent += ‘\<p>\<input type=button value=”Click here to save your ‘ + element.title + ‘ changes” onClick=”doUpload(\’ ‘ + element.folder + ‘\’)”></p>’;

        divContent += ‘\</form>’;

        //alert( xxx);

    } catch (err) {
        alert(element.folder + ‘ – Error: ‘ + err);
    }

    divContent += “\</div>”;
    //alert( divContent);

    return (divContent);

}

function init(year) {
    // Get a list of folders where we can have photos 
    
    content = {}; 
    var joomlaid = jQuery('#joomlaid').val();
    var myURL = `/bin/getCastOffPhotoFolders.php?year=${year}&joomlaid=${joomlaid}`;

    //alert( myURL);
   jQuery.ajax( myURL,{
        type: 'GET',
        dataType: 'JSON',
        data: content, 
        async: false, 
        processData: false, 
        contentType: false,
        success: function( response, status, jqXHR ){ 
            var folder = response.rootFolder;
            var details = response.details;
            var divContent = "";

            response.details.forEach( function (element, index, array) {
               //divContent = "Hello"; //formBuilder( element );

               content = jQuery('#myUploads').append( divContent )

           });

      },
        error: function (xhr, desc, err) {
            // We expect JSON to come back with all messages, errors, etc
            alert ("Unexpected error: " + desc + " " + err );
        }

   });

}
/* 

function doUpload(formName) {

   var xEvent = jQuery( '#event').val();
   var xUsername = jQuery( '#username').val() ;
   var xSecureToken = jQuery( '#secureToken ').val();
   var xTitle = jQuery( '#title').val();
   var xNotes = jQuery( '#notes').val();
   var xFilename = jQuery( '#fileToUpload').val();

   if ( xEvent == "" || xUsername =="" || xSecureToken == "" || xTitle == "" || xFilename == "") {
      alert( "Required information is missing.\n"
       + "Event: " + xEvent + "\n"
       + "Username: " + xUsername + "\n"
       + "Token: " + xSecureToken + "\n"
       + "Filename: " + xFilename + "\n"
       + "Event: " + xEvent + "\n"
       + "Please confirm your information." );
      return;
    }

     myFrm = document.getElementById(formName);

     alert (myFrm);
    let content = new FormData(myFrm);

    // Upload the form

     jQuery.ajax( 
          { url: '/bin/fileUpload.php', 
             enctype: "multipart/form-data",
             type: 'POST', 
             dataType: 'JSON',
             data: content, 
             async: true, 
             processData: false, 
             contentType: false,  
             success: function( response, status, jqXHR ){ 
               //alert( "Response: " + response + "\nStatus: " + status ); 

                 //alert( response.imageMediumResolution );

                 if ( response.error != "" ) {
                     alert ( "Error saving file: " + response.error + "\n\nPlease email info\@gxsa.org.uk" );
                     return;
                 }

                 var d = new Date();
               var n = d.getTime();
                 

                 jQuery('#myCategory').text( response.category);
               jQuery('#myTitle').html( response.title );
               jQuery('#myNotes').html( response.notes );
               jQuery('#myAuthor').html( response.author );

                 //html =  '<img width=100% style="border:2px solid slateGray;" src="' + response.imageMediumResolution + '?n=' + n + '" alt="' + response.basename + '" title="' + response.basename + '" >';

                 html =  `<img width=100% style="border:2px solid slateGray;" src="${response.imageMediumResolution}"?n=${n} alt="${response.basename}" title="${response.basename}" >`;
               jQuery('#myImage').html( html );

             }, 
            error: function (xhr, desc, err) {
               // We expect JSON to come back with all messages, errors, etc
               console.log("Description");
               console.log( desc );
               console.log("Error");
               console.log( err);
               alert( "Error on ajax call: " + err + " " + desc + "\n" + content + "\n\nCheck your file size < 2MB, then email info\@gxsa.org.uk"); 
            } 
        });
    //alert ("Sent"); 
} 

*/ 
 
function clearImage() {

/*
    $('#myCategory').html("");
    $('#myImage').html("");
    $('#myCaption').html("");
    $('#myAuthor').html("");
    $('#myNotes').html("");

*/

}

<script>

{/source}