SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    uploading/inserting images problem

    Hi

    I'm using codeigniter 2.1.2 and 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
    Code:
    <?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
    Code:
    <?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
    Code:
    <!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
    Code:
    <?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
    }
    ?>
    this is site.js
    Code:
    $(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
    Code:
    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;
        }
    })

  2. #2
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did what you asked and nothing showed up


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •