Why do I get HTTP Error when trying to upload with uploadify

Question

I chose gallerycms to build my own gallery but when I try to make it as module into my codeigniter cms I get this error HTTP Error. I don't know why I see this error although I was copying all controllers, models, views, core files and I still get this error.

NOTICE: uploadify work good with Gallerycms but when I want to add it into my cms as a module I get this error:

error capture

error from chrome console firebug code

<script type="text/javascript">
$(document).ready(function() {
$('.btn-group > a').tooltip();
$('#upload-btn').hide();
$('#new-images').hide();
$('a.img-fancy').fancybox();
$('.image-delete-btn').click(function() {
deleteUrl = $(this).attr('action');
});
$('#image-modal').on('show', function() {
$('#image-modal-delete-btn').attr('href', deleteUrl);
});
$("#sortable").sortable({
handle : '.drag-handle',
update : function () {
var order = $('#sortable').sortable('serialize', { key : 'order_num[]' });
$.ajax({
url : 'http://localhost/gallery/album/reorder?' + order,
type : 'GET',
cache : false,
success : function(response) {
$('#reorder-feedback').show();
$('#reorder-feedback').html('<a class="close" data-dismiss="alert">x</a><strong>Changed image order successfully.</strong>');
},
error : function(jqXHR, textStatus, errorThrown) {
alert('An error occured when ordering the images.');
}
});
}
});
$( "#sortable" ).disableSelection();
$('#file_upload').uploadify({
'uploader' : 'http://localhost/gallery/webroot/flash/uploadify.swf',
'script' : 'http://localhost/gallery/api/upload/3',
'cancelImg' : 'http://localhost/gallery/webroot/images/cancel.png',
'folder' : '/webroot/uploads',
'auto' : false,
'multi' : true,
'fileExt' : '*.jpg;*.jpeg;*.gif;*.png',
'fileDesc' : 'Image files',
'sizeLimit' : 2097152, // 2MB
'wmode' : 'opaque',
'onSelect' : function(event, ID, fileObj) {
$('#upload-btn').show();
},
'onCancel' : function(event, ID, fileObj) {
$('#upload-btn').hide();
},
'onError' : function(event, ID, fileObj, errorObj) {
},
'onComplete' : function(event, ID, fileObj, response, data) {
var fileName = response;
$('#upload-btn').hide();
$('#new-images').show();
$.ajax({
url : 'http://localhost/gallery/album/resize/3/' + response,
type : 'POST',
cache : false,
success : function(response) {
if (response !== 'failure') {
var new_image = '<li><img src="http://localhost/gallery/webroot/uploads/' + response + '" /><br />' + response + '</li>';
$('#new-image-list').append(new_image);
} else {
var fail_message = '<li>Thumbnail creation failed for: ' + fileObj.name + '</li>';
$('#new-image-list').append(fail_message);
}
},
error : function(jqXHR, textStatus, errorThrown) {
alert('Error occurred when generating thumbnails.');
}
});
}
});
});
</script>

api controller

/** * Handles image uploads. * * @param type $album_id */

  public function upload($album_id)
  {
    $config = array();
    $config['upload_path']    = './webroot/uploads/';
    $config['allowed_types']  = 'gif|jpg|png';
    $config['max_size']       = '2048'; // 2MB
    $config['remove_spaces']  = TRUE;
    $config['encrypt_name']   = TRUE;
    $config['overwrite']      = FALSE;
    $this->load->library('upload', $config);
    if ( ! $this->upload->do_upload('Filedata'))
    {
      header('HTTP/1.1 500 Internal Server Error');
      exit();
    }
    else
    {
      $upload_info = $this->upload->data();

      $album_config = $this->config_model->get_by_album_id($album_id);

      // Insert file information into database
      $now = date('Y-m-d H:i:s');
      $order_num = $this->image_model->get_last_order_num($album_id);
      if (empty($order_num))
      {
        $order_num = 0;
      }
      $order_num++;
      $image_data = array(
      'album_id'       => $album_id,
      'uuid'           => $this->create_uuid(),
      'name'           => $upload_info['file_name'],
      'order_num'      => $order_num,
      'caption'        => '',
      'raw_name'       => $upload_info['raw_name'],
      'file_type'      => $upload_info['file_type'],
      'file_name'      => $upload_info['file_name'],
      'file_ext'       => $upload_info['file_ext'],
      'file_size'      => $upload_info['file_size'],
      'path'           => $config['upload_path'],
      'full_path'      => $upload_info['full_path'],
      'published'      => $album_config->auto_publish,
      'created_at'     => $now,
      'updated_at'     => $now,
      );

      $image_id = $this->image_model->create($image_data);


      $this->album_model->update(array('updated_at' => $now), $album_id);

      echo $image_id;
    }
  }




}

views/images.php

<?php
$includes = array(
    'js' => array('jquery-ui-1.8.18.custom.min.js', 'swfobject.js', 'jquery.uploadify.v2.1.4.min.js', 'fancybox/jquery.fancybox-1.3.4.pack.js'), 
    'css' => array('uploadify.css', 'fancybox/jquery.fancybox-1.3.4.css'));
?>
<?php $this->load->view('album/inc/header', $includes); ?>

<?php if (isset($flash)): ?>
<div class="alert alert-success"><a class="close" data-dismiss="alert">x</a><strong><?php echo $flash; ?></strong></div>
<?php endif; ?>

<div class="w100" style="margin-bottom: 10px;">

  <ul class="pager">
    <li class="previous">
        <a href="<?php echo base_url('album'); ?>">&larr; Back to albums</a>
    </li>
  </ul>
  <div class="well">
    <h4 style="margin-bottom: 10px;">Upload images for album: <?php echo $album->name; ?></h4>
    <input id="file_upload" type="file" name="file_upload" />
    <p id="upload-btn" style="margin:10px 0;">
      <a href="javascript:$('#file_upload').uploadifyUpload()" class="btn btn-primary btn-large">Upload Files</a>
    </p>
    <div id="new-images">
      <h4>Uploaded Images</h4>
      <p><a class="btn" href="<?php echo site_url("album/images/$album->id"); ?>" style="margin: 10px 0;"><i class="icon-refresh"></i> Refresh</a></p>
      <ul id="new-image-list"></ul>
      <div class="clear"></div>
    </div>
  </div>
</div>

<div id="reorder-feedback" class="alert alert-success" style="display: none;"></div>

<span class="left w75">
  <?php 
  $total_file_size = 0;
  $total_images = 0;
  $img_url = '';
  ?>
  <?php if (isset($images)): ?>
  <ul id="sortable">
    <?php foreach ($images as $image): ?>
    <?php 
    $total_file_size += $image->file_size; 
    $total_images++;
    $img_url = base_url() . 'webroot/uploads/' . $image->file_name;
    ?>
    <li id="image_<?php echo $image->id; ?>" class="ui-state-default" style="height: <?php echo $config->thumb_height + 10; ?>px">
      <div class="drag-handle" style="height: <?php echo $config->thumb_height + 5; ?>px"></div>
      <div class="image-container">
        <a class="album-images img-fancy thumbnail" href="<?php echo $img_url; ?>" title="<?php echo $image->caption; ?>">
          <img src="<?php echo base_url() . 'webroot/uploads/' . $image->raw_name . '_thumb' . $image->file_ext . '?r=' . rand(); ?>" alt="<?php echo $image->caption; ?>" />
        </a>
      </div>
      <div class="info" style="left: <?php echo $config->thumb_width + 50; ?>px">
        File name: <?php echo $image->name; ?><br />
        Caption: 
          <?php if (empty($image->caption)): ?>
            <a href="<?php echo site_url("image/edit/$album->id/$image->id"); ?>">Create one</a>
          <?php else: ?>
            <?php echo $image->caption; ?> 
          <?php endif; ?>
          <br />
        <?php /* Comments: <?php echo $image->comments; ?><br /> */ ?>
        File size: <?php echo $image->file_size; ?> KB<br />
      </div>
      <div class="btn-group">
        <a href="<?php echo $img_url; ?>" class="btn img-fancy" rel="tooltip" data-original-title="Preview"><i class="icon-zoom-in"></i></a>
        <a href="<?php echo site_url("image/download/$image->id"); ?>" class="btn" title="Download" rel="tooltip" data-original-title="Download"><i class="icon-download-alt"></i></a>
        <a href="<?php echo site_url("image/edit/$album->id/$image->id"); ?>" class="btn" title="Edit" rel="tooltip" data-original-title="Edit"><i class="icon-pencil"></i></a>
        <?php /* <a href="<?php echo site_url("image/comments/$album->id/$image->id"); ?>" class="btn" title="Comments" rel="tooltip" data-original-title="Comments"><i class="icon-comment"></i></a> */ ?>
        <?php if ($image->published == 1): ?>
        <a href="<?php echo site_url("image/unpublish/$album->id/$image->id"); ?>" class="btn btn-success" title="Published" rel="tooltip" data-original-title="Published"><i class="icon-ok icon-white"></i></a>
        <?php else: ?>
        <a href="<?php echo site_url("image/publish/$album->id/$image->id"); ?>" class="btn" title="Unpublished" rel="tooltip" data-original-title="Unpublished"><i class="icon-ok"></i></a>
        <?php endif; ?>
        <a href="#image-modal" class="btn btn-danger image-delete-btn" title="Delete" rel="tooltip" action="<?php echo site_url("image/remove/$album->id/$image->id"); ?>" data-toggle="modal" data-original-title="Delete"><i class="icon-remove icon-white"></i></a>
      </div>
    </li>
    <?php endforeach; ?>
  </ul>
  <?php endif; ?>
</span>
<span class="right w20">
  <div class="well sidebar-nav">
    <ul class="nav nav-list">
      <li class="nav-header"><?php echo $album->name; ?></li>
      <li><a href="<?php echo site_url("album/edit/$album->id"); ?>"><i class="icon-pencil"></i>Rename</a></li>
      <li><a href="<?php echo site_url("album/configure/$album->id"); ?>"><i class="icon-cog"></i>Configure</a></li>
      <li class="nav-header">Info</li>
      <li>Images: <?php echo $total_images; ?></li>
      <li>Album file size: <?php echo round($total_file_size / 1024, 2); ?> MB</li>
    </ul>
  </div>
</span>
<div class="clear"></div>

<div class="modal hide fade" id="image-modal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Delete Image</h3>
  </div>
  <div class="modal-body">
    <p><strong>Are you sure you want to delete this image?</strong></p>
  </div>
  <div class="modal-footer">
    <a id="image-modal-delete-btn" href="#" class="btn btn-danger">Delete</a>
    <a href="#" class="btn" data-dismiss="modal">Cancel</a>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
  $('.btn-group > a').tooltip();
  $('#upload-btn').hide();
  $('#new-images').hide();

  $('a.img-fancy').fancybox();

  $('.image-delete-btn').click(function() {
    deleteUrl = $(this).attr('action');
  });

  $('#image-modal').on('show', function() {
    $('#image-modal-delete-btn').attr('href', deleteUrl);
  });

  $("#sortable").sortable({
    handle : '.drag-handle',
    update : function () { 
      var order = $('#sortable').sortable('serialize', { key : 'order_num[]' }); 
      $.ajax({
        url          : '<?php echo base_url(); ?>album/reorder?' + order,
        type         : 'GET',
        cache        : false,
        success      : function(response) {
          $('#reorder-feedback').show();
          $('#reorder-feedback').html('<a class="close" data-dismiss="alert">x</a><strong>Changed image order successfully.</strong>');
        },
        error        : function(jqXHR, textStatus, errorThrown) {
          alert('An error occured when ordering the images.');
        }
      });
    }
  });

  $( "#sortable" ).disableSelection();


  $('#file_upload').uploadify({
    'uploader'       : '<?php echo base_url(); ?>webroot/flash/uploadify.swf',
    'script'         : '<?php echo base_url(); ?>album/api/upload/<?php echo $album->id;  ?>',
    'cancelImg'      : '<?php echo base_url(); ?>webroot/images/cancel.png',
    'folder'         : '/webroot/uploads',
    'auto'           : false,
    'multi'          : true,
    'fileExt'        : '*.jpg;*.jpeg;*.gif;*.png',
    'fileDesc'       : 'Image files',
    'sizeLimit'      : 2097152, // 2MB
    'wmode'          : 'opaque',
    'onSelect'       : function(event, ID, fileObj) {
      $('#upload-btn').show();
    },
    'onCancel'       : function(event, ID, fileObj) {
      $('#upload-btn').hide();
    },
    'onError'        : function(event, ID, fileObj, errorObj) {

    },
    'onComplete'     : function(event, ID, fileObj, response, data) {
      var fileName = response;
      $('#upload-btn').hide();
      $('#new-images').show();
      $.ajax({
        url          : '<?php echo base_url(); ?>album/resize/<?php echo $album->id; ?>/' + response,
        type         : 'POST',
        cache        : false,
        success      : function(response) {
          if (response !== 'failure') {
            var new_image = '<li><img src="<?php echo base_url(); ?>webroot/uploads/' + response + '" /><br />' + response + '</li>';
            $('#new-image-list').append(new_image);
          } else {
            var fail_message = '<li>Thumbnail creation failed for: ' + fileObj.name + '</li>';
            $('#new-image-list').append(fail_message);
          }
        },
        error        : function(jqXHR, textStatus, errorThrown) {
          alert('Error occurred when generating thumbnails.');
        }
      });
    }
  });
});
</script>

David Hammen · Accepted Answer · 2012-11-12 16:07:41Z

2

I am not sure if this will help or not.

I ran into the same problem before, then I realized when I uploaded the files to the server, I was logged in as root user so the file owner is root. The solution was to remove all uploaded files, then upload again using other user.

Now it's working well.

Hope that's work for you.

edited Nov 12, 2012 at 16:07

David Hammen

33.3k9 gold badges64 silver badges110 bronze badges

answered Nov 12, 2012 at 15:46

Hadi Budiman

211 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

user1080247 · Accepted Answer · 2012-12-19 08:09:55Z

0

the problem with files extensions so i replaced this code

$config['allowed_types']  = 'gif|jpg|png';

with

 $config['allowed_types']  = '*';

then i selected only extension i prefered from jquery code

'fileExt' : '*.jpg;*.jpeg;*.gif;*.png',

answered Dec 19, 2012 at 8:09

user1080247

1,1965 gold badges21 silver badges54 bronze badges

Comments

Musa · Accepted Answer · 2013-03-30 16:45:52Z

0

You can modify mime in application/config/mimes.php

Change:

'jpeg'  =>  array('image/jpeg', 'image/pjpeg'),
'jpg'   =>  array('image/jpeg', 'image/pjpeg'),
'jpe'   =>  array('image/jpeg', 'image/pjpeg'),
'png'   =>  array('image/png',  'image/x-png'),

To

'jpeg'  =>  array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),
'jpg'   =>  array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),
'jpe'   =>  array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),
'png'   =>  array('image/png',  'image/x-png', 'application/octet-stream'),

It's should work :)

edited Mar 30, 2013 at 16:45

Musa

97.9k17 gold badges123 silver badges144 bronze badges

answered Mar 30, 2013 at 16:27

hongphu8790

113 bronze badges

Comments

Haso Keric · Accepted Answer · 2012-10-30 13:29:35Z

-1

You did not provide us a detailed error. HTTP Error could mean many things.

1. Check your Firebug Console or Chrome Console for the Ajax POST and see what it returns. 2. Make sure the folder the uploads save to is writable (CHMOD Permissions).

One thing that catches my eye is:

$config['upload_path']    = './webroot/uploads/';

it looks like you have copy pasted this, make sure you give it a proper upload path.

answered Oct 30, 2012 at 13:29

Haso Keric

2711 silver badge5 bronze badges

1 Comment

user1080247 Over a year ago

this code work very good but when i copy it into my cms it is give me this error...and i work on localhost

Collectives™ on Stack Overflow

Why do I get HTTP Error when trying to upload with uploadify

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related