Porting my blog for the second time, editing part 4

This is post #49 of my series about how I port this blog from Blogengine.NET 2.5 ASPX on a Windows Server 2003 to a Linux Ubuntu server, Apache2, MySQL and PHP. A so called LAMP. The introduction to this project can be found in this blog post https://www.malmgren.nl/post/Porting-my-blog-for-the-second-time-Project-can-start.aspx.

Now it is time to get the images right. At this point editing posts with existing images is fine really but what about adding images, how is that supposed to work?

While I am working on this perhaps I can manipulate the of pasting images from clipboard correctly? As it is now the result is that when pasting images they are added to the editor as a base64 encoded block of text. That is inconvenient.

One step at a time. So first of all I tried to get a grip of this through the documentation provided by CKeditor. Found this page:

http://docs.ckeditor.com/#!/guide/dev_file_browser_api

Already here there was a disconnect. Could not get anything to adjust. I initialized my editor in the document.ready function but that did not fly. Then I found this page:

http://www.elated.com/articles/adding-wysiwyg-editor-to-your-site/

And it suggested this form:

≺textarea class="ckeditor" id="myEditor" name="myEditor" cols="100" rows="20"≻≺?php echo $content; ?≻≺/textarea≻≺br≻
≺script type = "text/javascript"≻
	CKEDITOR.replace( 'myEditor', {
			uiColor: '#9AB8F3',
			height: 160,
			filebrowserBrowseUrl: '/browser/browse.php?type=Files',
			filebrowserUploadUrl: '/uploader/upload.php?type=Files'
	});	
≺/script≻

It worked! It is actually amazing that the fantastic CKEditor documentation website fails to inform me how to get the very basic setup to work. Either I missed it totally, or the site actually don't mention it because it is so fundamental that it needs not explanation. Well, I had to have it explained to be able to continue.

Then I went back to the documentation of CKEditor on the browse and the upload and the suggestions they give were so totally not working. At all.

So then I found someone else that had got image upload to work and linking into proper documentation at the CKEditor site:

http://www.technoblogging.com/blog/How-to-add-image-browse-and-image-upload-button-in-ckeditor/95

Wohoo.

So I downloaded these php programs and started modifying them according to my taste. Especially the iaupload.php, the imgbrowse.php has to wait.

When I ran these I got some vague error messages. Based on this I made the conclusion I had to check the error messages on Apache. Ran this in the console: tail /var/www/site/log/error.log

I found this error: move_uploaded_file(): Unable to move '/tmp/...

So I searched for this error and came to the conclusion I had to set proper user rights in a downloads folder somewhere on the web server.

At this point I had to have better information about how to set up the upload in a secure way. Found this link: http://www.mysql-apache-php.com/fileupload-security.htm Then I read this article: http://www.radinks.com/upload/config.php

So far I could conclude that Apache is running on my web server via a user called www-data. That user needs to have proper access to the upload directory for upload to start working. My confusion here was that there are two upload directories and that the upload php program is calling a move commando to move the file in to the final place. Should I set the proper rights on the first location or just the second location?

After some hesitation I decided I had to concentrate on my own upload directory, the second directory. What happened to the file before was something I would concentrate on later if needed. So here was an article explaining how to change the owner of the upload directory: http://superuser.com/questions/581194/setting-correct-permissions-for-uploading-files

And here was my command:

chown www-data:www-data /var/www/jensblog/public_html/media

And... IT WORKED!

So now I got the images into the media folder and the editor gave back a link to the image. Now what?

As you might recall I have a clever handling of images in my blog. At this point it did not feel so clever anymore but just a hassle to be honest. A short recap on my image handling. There is a table URL and it holds information about the URLs used in the blog. Then there is a many-to-many connection between Post and URL. So when I add an image that image needs to be inserted into this structure. So well, I had to make this.

$_strID = "";
if (preg_match("/media\/(.+?)$/i", $_strURL, $match))
{
	$_strFileName = $match[1];
	$query = GetQueryWithData(1, "select ID from URL where FileName = ?", $_strFileName);
	$result = $mysqli-≻query($query) or die("Error query.." . mysqli_error($mysqli));
	if ($row = mysqli_fetch_array($result))
	{
		// Available in the database already.
		$_strID = $row['ID'];
	}
	else
	{
		// Media was not available. Add it. http://www.jens.malmgren.nl/post/Porting-my-blog-for-the-second-time-editing-part-4.aspx
		$query = GetQueryWithData(0,
			"INSERT INTO URL (	TagName,	Width,		Height,			IsLocalURL,	Style,		IsFileContent, 	FileName  )" .
			"VALUES 		 (	?,			?,			?,				?,			?,			?, 				?         )",
			$_strTag,	$_strWidth,	$_strHeight,	1,			$_strStyle,	1,				$_strFileName);
		$result = $mysqli-≻query($query) or die("Error query.." . mysqli_error($mysqli));
		$_strID = $mysqli-≻insert_id;
		
		$query = GetQueryWithData(1, "INSERT PostURL (PostID, URLID) SELECT Post.ID, ? FROM Post WHERE Post.Slug = ?", $_strID, $ip_strSlug);
		$result = $mysqli-≻query($query) or die("Error query.." . mysqli_error($mysqli));
	}
}

So this is how far I got on this project this time. There are many things still to fixed before I can call it finished. For example it is slightly annoying when the image is huge. I think it is possible to change the upload in such way that it will automatically create a downsized thumbnail image and present image as a combination a thumb nail linking to a big image. That would be fantastic.

Then we still have the paste issue and how about the browse? Browse images has to wait.

But all this is for the next time.