Jump to content

uploading/inserting images problem

witchy478

By witchy478
in PHP Coding Help

 Share

Recommended Posts

witchy478 Member

witchy478

Posted
Posted

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
}
?>

Link to comment
https://forums.phpfreaks.com/topic/267079-uploadinginserting-images-problem/
Share on other sites
witchy478 Member

witchy478

Posted
  • Author
Posted

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;
    }
})

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.