passing the firing element attributes

[sunchaser]

hi, how can i pass in parameter the ID of the firing item? i tried with

'slot': $(this).attr('id')

but it prints 'undefined'.

I need to know the slot so i can rename properly the image.

$('input[type="file"]').ajaxfileupload({
  'action': '/pim/index.php/annuncio/carica_immagine',
  'params': {
    'slot': $(this).attr('id')
  },
  'onComplete': function(response) {        
            console.log(response);      
            if ( response.success == false )
                $('#error').append(response.error);
            //$('#slot-'+response.position + '.fakeupload').append("<img id='img-"+response.position+"' src='" + '/pim/' + response.thumbnail+"'/>"             
            console.log( '#slot-'+response.position + '.fakeupload');
             $('#slot-'+response.position + ' .fakeupload').css('background', 'url(/pim/' + response.thumbnail + ') top left no-repeat' ); 

  },
  'onStart': function() {
    if(false) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
  });
});

[jfeldstein]

What's your HTML look like?

~ J

On Wed, May 9, 2012 at 9:55 AM, sunchaser < [email protected]

wrote:

hi, how can i pass in parameter the ID of the firing item? i tried with

'slot': $(this).attr('id')

but it prints 'undefined'.

I need to know the slot so i can rename properly the image.

$('input[type="file"]').ajaxfileupload({ 'action': '/pim/index.php/annuncio/carica_immagine', 'params': { 'slot': $(this).attr('id') }, 'onComplete': function(response) { console.log(response); if ( response.success == false ) $('#error').append(response.error); //$('#slot-'+response.position + '.fakeupload').append("<img id='img-"+response.position+"' src='" + '/pim/'

• response.thumbnail+"'/>" console.log( '#slot-'+response.position + '.fakeupload'); $('#slot-'+response.position + ' .fakeupload').css('background', 'url(/pim/' + response.thumbnail + ') top left no-repeat' );

  }, 'onStart': function() { if(false) return false; // cancels upload }, 'onCancel': function() { console.log('no file selected'); } }); });

---

Reply to this email directly or view it on GitHub: https://github.com/jfeldstein/jQuery.AjaxFileUpload.js/issues/7

[sunchaser]

Thank you for your reply, here is the html; I think a possible workaround would be to set a hidden field slot_id in each div?

<?php echo html::script('media/js/ajax-uploader/jquery.ajaxupload.js'); ?>

<style>
.imageblocks
{
width:320px;
height:130px;
border:0px solid #c00;
}

.fakeupload {
    width:60px;
    height:60px;    
    border:0px;
    background: url('/pim/media/images/template/imgPlaceholder.jpg') top left no-repeat;
}

.realupload {
    position:absolute;
    top:0;
    right:0;

    /* start of transparency styles */
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    /* end of transparency styles */

    z-index:2; /* bring the real upload interactivity up front */
    width:60px;
    height:60px;
}

.realupload:hover
{
cursor:pointer;
}

.imageblock
{
position:relative;
width:60px;
height:60px;
border:1px solid #999;
float:left;
margin-left:2px;
margin-bottom:2px;  
}

#error
{
color:#c00;
font-weight:bold;
}

</style>

<script type="text/javascript">
$(document).ready(function() {

$('input[type="file"]').ajaxfileupload({
      'action': '/pim/index.php/annuncio/carica_immagine',
      'params': {
        'slot': $(this).attr('id')
      },
      'onComplete': function(response) {        
                console.log(response);      
                if ( response.success == false )
                    $('#error').append(response.error);
                //$('#slot-'+response.position + '.fakeupload').append("<img id='img-"+response.position+"' src='" + '/pim/' + response.thumbnail+"'/>"             
                console.log( '#slot-'+response.position + '.fakeupload');
                 $('#slot-'+response.position + ' .fakeupload').css('background', 'url(/pim/' + response.thumbnail + ') top left no-repeat' ); 

      },
      'onStart': function() {
        if(false) return false; // cancels upload
      },
      'onCancel': function() {
        console.log('no file selected');
      }
    });
});
</script>


<h3>Carica foto e piantine dell'immobile.</h3>
<p>
La dimensione massima &egrave; 5 MB e l' unico formato accettato è JPG.</h3>
</p>

Todo:
<br>
1. Croppare ?<br>
2. Aggiungere comando: delete<br>
3. Aggiungere gestione errori<br>
4. Salvare l' immagine a seconda della posizione cliccata (ora &egrave; sempre 1)
</p>

<br/>
<div class='imageblocks'>
<div class='imageblock'id='slot-1'>
    <div >
        <input type="text" class='fakeupload' id='fakeupload' name="fakeupload" />
    </div>
    <input type="file" name="Filedata" id="realupload" class="realupload"/>
</div>
<div class='imageblock'id='slot-2'>
    <div >
        <input type="text" class='fakeupload' id='fakeupload' name="fakeupload" />
    </div>
    <input type="file" name="Filedata" id="realupload" class="realupload"/>
</div>
<div class='imageblock'id='slot-3'>
    <div >
        <input type="text" class='fakeupload' id='fakeupload' name="fakeupload" />
    </div>
    <input type="file" name="Filedata" id="realupload" class="realupload"/>
</div>
<div class='imageblock'id='slot-4'>
    <div >
        <input type="text" class='fakeupload' id='fakeupload' name="fakeupload" />
    </div>
    <input type="file" name="Filedata" id="realupload" class="realupload"/>
</div>
<div class='imageblock'id='slot-5'>
    <div >
        <input type="text" class='fakeupload' id='fakeupload' name="fakeupload" />
    </div>
    <input type="file" name="Filedata" id="realupload" class="realupload"/>
</div>
</div>

<div id='error'></div>

</pre>

[sunchaser]

I checked your code, and it seems the params attribute is used to add hidden fields in the form you wrap.

I would be interested in knowing how can i pass an attribute of the file input i click, in the meantime i solved the problem doing this:

Added name filedata-2. 2 is the number of the slot:

    <input type="file" name="filedata-2" id="realupload" class="realupload"/>

in the server code:

list( $name, $position) = explode('-', key( $_FILES )); 
$a = new Utilita_Model(); $response = $a -> uploadimage( 'annuncio', $_FILES, true, $utente -> id, 909, $position );