Joomla uploading images issue

Question

I installed BT Property component for my Joomla site and when I select multiple of images (more than 3 or 4) which I want to upload for my article, it nothing happens. The images won't upload. I try to change the code but I don't know what the problem is.

This is the code I want to change.

<?php

defined('_JEXEC') or die('Restricted access');
$document = JFactory::getDocument();
$path = $this->params->get('images_path', 'images/bt_property');
?>

<ul class="adminformlist" id="uploading">
    <li><input type="file" name="attachment" id="attachment" multiple /><img id="spinner"
        style="display: none; margin-left: 10px;"
        src="<?php echo JURI::root(); ?>components/com_bt_property/assets/img/spinner.gif">
        <div style="clear: both"></div>
        <div id="btss-message"></div></li>
</ul>
<script type="text/javascript">
(function($){
            var files = [];
            $("#attachment").change(function(event) {
            $.each(event.target.files, function(index, file) {
              var reader = new FileReader();
              reader.onload = function(event) {
                object = {};
                object.filename = file.name;
                object.data = event.target.result;
                files.push(object);
                if(files.length==1){
                    uploadFile(index);
                    $('#spinner').show();
                    $("#btss-message").show();
                }
              };  
              reader.readAsDataURL(file);
            });
          });

          function uploadFile(index){
              $.ajax({url: "index.php?option=com_bt_property&task=properties.upload",
                    type: 'POST',
                    data: {filename: files[index].filename, filedata: files[index].data},
                    success: function(response, status, xhr){
                        uploadHandler(response, status, xhr);
                        if(index == files.length-1){
                            $('#spinner').hide();
                            files = [];
                            $("#attachment").val('');
                            $("#btss-message").delay(1000).slideUp(function(){
                                $("#btss-message").html('');
                            });
                        }else{
                            index++;
                            uploadFile(index);

                        }
                    }
              });
          }
          function uploadHandler(response, status, xhr) {
              var data = jQuery.parseJSON(response);
                      if(data == null){
                          showMessage("<br /><span style=\"color: red;\">Loading Failed</span>");
                      }else{
                          var file = data.files;
                          if (!data.success) {
                              showMessage("<br /><span style=\"color: red;\"> " + data.message +"</span>");
                          }
                          else {

                                var html = '<li>';
                                    html += '<input class="input-default" title="Make default" name="default_image" type="radio" value="'+file.filename+'" />';
                                    html += '<img class="img-thumb" src="<?php echo JURI::root() . $path . '/tmp/' . ($this->params->get('thumbimgprocess', 1) == -1 ? 'original' : 'thumb') . '-'; ?>'+file.filename+'" />';
                                    html += '<input type="hidden" name="image_id[]" value="0" />';
                                    html += '<input type="hidden" name="image_filename[]" value="'+file.filename+'" /><br/>';                                   
                                    html +='<a href="javascript:void(0)" class="edit" onclick="editImage(this)">Edit</a>';
                                    html +='<a href="javascript:void(0)" class="remove" onclick="removeImage(this)" >Remove</a>';
                                    html += '</li>';                                    
                                jQuery('#sortable').append(html);
                                jQuery('#sortable li:last-child ').find('a.edit').data('title', file.title);                                 
                                reNewItem();
                                showMessage('<br />' + file.title + " uploaded successfully!");
                          }

                      }
            }
          function showMessage(msg){
              $("#btss-message").append(msg);
          }

})(jQuery);

 </script>

Is there a way to fix the code? I would be very thankful for any answer.

Answer 1

Your file object is coming up as undefined, and thus you're not able to use file.filename .

Your problem is most likely with this line var file = data.files; - are you sure about data.files ?