uploading/inserting images problem

witchy478 · August 14, 2012

Hi

I was busy doing a tutorial called How to Upload Files with CodeIgniter and AJAX, I did everything like it said but it's not uploading or saving the content.

this is the upload controller

<?php

class Upload extends CI_Controller 
{

public function __construct()
{
	parent::__construct();
	$this->load->model('files_model');
	$this->load->database();
	$this->load->helper('url');
}

public function index()
{
	$this->load->view('upload');
}

public function upload_file()
{
	$status = "";
	$msg = "";
	$file_element_name = 'userfile';

	if (empty($_POST['title']))
	{
		$status = "error";
		$msg = "Please enter a title";
	}

	if ($status != "error")
	{
		$config['upload_path'] = './files/';
		$config['allowed_types'] = 'gif|jpg|png|doc|txt';
		$config['max_size']	= 1024 * 8;
		$config['encrypt_name'] = TRUE;

		$this->load->library('upload', $config);

		if (!$this->upload->do_upload($file_element_name))
		{
			$status = 'error';
			$msg = $this->upload->display_errors('', '');
		}
		else
		{
			$data = $this->upload->data();
			$file_id = $this->files_model->insert_file($data['file_name'], $_POST['title']);
			if($file_id)
			{
				$status = "success";
				$msg = "File successfully uploaded";
			}
			else
			{
				unlink($data['full_path']);
				$status = "error";
				$msg = "Something went wrong when saving the file, please try again.";
			}
		}
		@unlink($_FILES[$file_element_name]);
	}
	echo json_encode(array('status' => $status, 'msg' => $msg));
}

public function files()
{
	$files = $this->files_model->get_files();
	$this->load->view('files', array('files' => $files));
}

public function delete_file($file_id)
{
	if ($this->files_model->delete_file($file_id))
	{
		$status = 'success';
		$msg = 'File successfully deleted';
	}
	else
	{
		$status = 'error';
		$msg = 'Something went wrong when deleteing the file, please try again';
	}
	echo json_encode(array('status' => $status, 'msg' => $msg));
}

}

This is my files_model

<?php

class Files_Model extends CI_Model {

public function insert_file($filename, $title)
{
	$data = array(
		'filename'		=> $filename,
		'title'			=> $title
	);
	$this->db->insert('files', $data);
	return $this->db->insert_id();
}

public function delete_file($file_id)
{
	$file = $this->get_file($file_id);
	if (!$this->db->where('id', $file_id)->delete('files'))
	{
		return FALSE;
	}
	unlink('./files/' . $file->filename);	
	return TRUE;
}

public function get_files()
{
	return $this->db->select()
			->from('files')
			->get()
			->result();
}

public function get_file($file_id)
{
	return $this->db->select()
			->from('files')
			->where('id', $file_id)
			->get()
			->row();
}

}

This is my upload view

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="<?php echo base_url()?>js/site.js"></script>
<script src="<?php echo base_url()?>js/ajaxfileupload.js"></script>
<link href="<?php echo base_url()?>css/style.css" rel="stylesheet" />
</head>
<body>
<h1>Upload File</h1>
<p class="error"></p>
<form method="post" action="<?php echo site_url('/upload/upload')?>" id="upload_file">
	<label for="title">Title</label>
	<br />
	<input type="text" name="title" id="title" value="" />
	<br />
	<label for="userfile">File</label>
	<br />
	<input type="file" name="userfile" id="userfile" size="20" />
	<br />
	<input type="submit" name="submit" id="submit" />
</form>
<h2>Files</h2>
<div id="files"></div>
</body>
</html>

This is my files view

<?php
if (isset($files) && count($files))
{
?>
	<ul>
		<?php
		foreach ($files as $file)
		{
			?>
			<li class="image_wrap">
				<a href="#" class="delete_file_link" data-file_id="<?php echo $file->id?>">Delete</a>
				<strong><?php echo $file->title?></strong>
				<br />
				<?php echo $file->filename?>
			</li>
			<?php
		}
		?>
	</ul>
</form>
<?php
}
else
{
?>
<p>No Files Uploaded</p>
<?php
}
?>

witchy478 · August 14, 2012

I forgot to add my js files

this is site.js

$(function() {
$('#upload_file').submit(function(e) {
	e.preventDefault();
	$.ajaxFileUpload({
		url 			:'./upload/upload_file/', 
		secureuri		:false,
		fileElementId	:'userfile',
		dataType		: 'json',
		data			: {
			'title'				: $('#title').val()
		},
		success	: function (data, status)
		{
			if(data.status != 'error')
			{
				$('#files').html('<p>Reloading files...</p>');
				refresh_files();
				$('#title').val('');
			}
			alert(data.msg);
		}
	});
	return false;
});

refresh_files();

$('.delete_file_link').live('click', function(e) {
	e.preventDefault();
	if (confirm('Are you sure you want to delete this file?'))
	{
		var link = $(this);
		$.ajax({
			url			: './upload/delete_file/' + link.data('file_id'),
			dataType	: 'json',
			success		: function (data)
			{
				if (data.status == "success")
				{
					link.parents('li').fadeOut('fast', function() {
						$(this).remove();
						if ($('#files li').length == 0)
						{
							$('#files').html('<p>No Files Uploaded</p>');
						}
					});
				}
				else
				{
					alert(data.msg);
				}
			}
		});
	}
});
});

function refresh_files()
{
$.get('./upload/files/')
.success(function (data){
	$('#files').html(data);
});
}

and this is ajaxfileupload.js


jQuery.extend({


    createUploadIframe: function(id, uri)
{
		//create frame
            var frameId = 'jUploadFrame' + id;
            var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
		if(window.ActiveXObject)
		{
                if(typeof uri== 'boolean'){
				iframeHtml += ' src="' + 'javascript:false' + '"';

                }
                else if(typeof uri== 'string'){
				iframeHtml += ' src="' + uri + '"';

                }	
		}
		iframeHtml += ' />';
		jQuery(iframeHtml).appendTo(document.body);

            return jQuery('#' + frameId).get(0);			
    },
    createUploadForm: function(id, fileElementId, data)
{
	//create form	
	var formId = 'jUploadForm' + id;
	var fileId = 'jUploadFile' + id;
	var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');	
	if(data)
	{
		for(var i in data)
		{
			jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
		}			
	}		
	var oldElement = jQuery('#' + fileElementId);
	var newElement = jQuery(oldElement).clone();
	jQuery(oldElement).attr('id', fileId);
	jQuery(oldElement).before(newElement);
	jQuery(oldElement).appendTo(form);



	//set attributes
	jQuery(form).css('position', 'absolute');
	jQuery(form).css('top', '-1200px');
	jQuery(form).css('left', '-1200px');
	jQuery(form).appendTo('body');		
	return form;
    },

    ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout		
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime()        
	var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
	var io = jQuery.createUploadIframe(id, s.secureuri);
	var frameId = 'jUploadFrame' + id;
	var formId = 'jUploadForm' + id;		
        // Watch for a new set of requests
        if ( s.global && ! jQuery.active++ )
	{
		jQuery.event.trigger( "ajaxStart" );
	}            
        var requestDone = false;
        // Create the request object
        var xml = {}   
        if ( s.global )
            jQuery.event.trigger("ajaxSend", [xml, s]);
        // Wait for a response to come back
        var uploadCallback = function(isTimeout)
	{			
		var io = document.getElementById(frameId);
            try 
		{				
			if(io.contentWindow)
			{
				 xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
                	 xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;

			}else if(io.contentDocument)
			{
				 xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
                	xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
			}						
            }catch(e)
		{
			//jQuery.handleError(s, xml, null, e);
			console.log('ERROR', s, xml, null, e);
		}
            if ( xml || isTimeout == "timeout") 
		{				
                requestDone = true;
                var status;
                try {
                    status = isTimeout != "timeout" ? "success" : "error";
                    // Make sure that the request was successful or notmodified
                    if ( status != "error" )
				{
                        // process the data (runs the xml through httpData regardless of callback)
                        var data = jQuery.uploadHttpData( xml, s.dataType );    
                        // If a local callback was specified, fire it and pass it the data
                        if ( s.success )
                            s.success( data, status );
    
                        // Fire the global callback
                        if( s.global )
                            jQuery.event.trigger( "ajaxSuccess", [xml, s] );
                    } else {
                        //jQuery.handleError(s, xml, status);
					console.log('ERROR', s, xml, status);
				}
                } catch(e) 
			{
                    status = "error";
				console.log('ERROR', s, xml, status, e);
                    //jQuery.handleError(s, xml, status, e);
                }

                // The request was completed
                if( s.global )
                    jQuery.event.trigger( "ajaxComplete", [xml, s] );

                // Handle the global AJAX counter
                if ( s.global && ! --jQuery.active )
                    jQuery.event.trigger( "ajaxStop" );

                // Process result
                if ( s.complete )
                    s.complete(xml, status);

                jQuery(io).unbind()

                setTimeout(function()
								{	try 
									{
										jQuery(io).remove();
										jQuery(form).remove();	

									} catch(e) 
									{
										console.log('ERROR', s, xml, null, e);
										//jQuery.handleError(s, xml, null, e);
									}									

								}, 100)

                xml = null

            }
        }
        // Timeout checker
        if ( s.timeout > 0 ) 
	{
            setTimeout(function(){
                // Check to see if the request is still happening
                if( !requestDone ) uploadCallback( "timeout" );
            }, s.timeout);
        }
        try 
	{

		var form = jQuery('#' + formId);
		jQuery(form).attr('action', s.url);
		jQuery(form).attr('method', 'POST');
		jQuery(form).attr('target', frameId);
            if(form.encoding)
		{
			jQuery(form).attr('encoding', 'multipart/form-data');      			
            }
            else
		{	
			jQuery(form).attr('enctype', 'multipart/form-data');			
            }			
            jQuery(form).submit();

        } catch(e) 
	{		
		console.log('ERROR', s, xml, null, e);	
            //jQuery.handleError(s, xml, null, e);
        }

	jQuery('#' + frameId).load(uploadCallback	);
        return {abort: function () {}};	

    },

    uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if ( type == "script" )
            jQuery.globalEval( data );
        // Get the JavaScript object, if JSON is used.
        if ( type == "json" )
            eval( "data = " + data );
        // evaluate scripts within html
        if ( type == "html" )
            jQuery("<div>").html(data).evalScripts();

        return data;
    }
})

Sign In

uploading/inserting images problem

Recommended Posts

witchy478

Link to comment

Share on other sites

witchy478

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information