basic Image file upload

[LeiHa]

Hello guys.

Just let you know that I'm still learning php, javascript, and Processwire.

This time, I'm trying to do the image upload, and been look through this forum how to do it.

Unfortunately, some of the way people did in this forum are totally not understandable, yet.

What I found out is how this is process.

Hope people like me would find this post and help through creating wonderful website.

I'll only use php and Processwire API because I don't know about the jQuery enough, yet.

1. create form

<form class='forum-form' accept-charset="utf-8" action='./' method='post' enctype='multipart/form-data' >
...

<input type='file' id='attach' name='attach_file' multiple='multiple' accept='image/jpg,image/jpeg,image/gif,image/png' /> // this is the input tag for the image attachment
<input type='submit' name='add_file' value='Add file'/> // this is the submit to upload image attachment before submitting entire form
<input type='submit' name='form_submit' value='Submit'/> // this is the submit to send entire data

...
</form>

I found out that I have to put enctype='multipart/form-data' in order to submit file/image type.

2. To attach some images on the page, I guess, I have to upload those images before submitting form.

PHP code seems very complicated to me, and I've found out that it is somewhat easy to use Processwire class which is WireUpload.

I've made a custom function so that I can reuse and maintaining easily. I've borrowed Soma's code here.(hope this would be fine with him)

private function uploadImage(){
	$upload_path = $this->config->paths->root . 'tmp_uploads/';
	$u = new WireUpload('attach_file');
	$u->setMaxFiles(1);
	$u->setOverwrite(false);
	$u->setDestinationPath($upload_path);
	$u->setValidExtensions(array('jpg', 'jpeg', 'png', 'gif'));
	
	$files = $u->execute();

	if ($u->getErrors()) {	 
		foreach($files as $filename) unlink($upload_path . $filename);
		foreach($u->getErrors() as $e) echo $e;
	} else {
		foreach($files as $filename){

                $upload_path = $this->config->urls->root . 'tmp_uploads/' . $filename;

                $this->session->attach_markup .= $this->attachMarkup($upload_path, $filename);

                $_SESSION['files'][] = $filename;

            }

} }

I've changed temp directory name without a dot.(couldn't create starting a dot in WIndows system).

Also that I found out Processwire API doesn't automatically create a folder, so I just manually create a folder in Windows.

I can change setMaxFiles later, but for the test purpose, set this to 1.

I've decided stick on setting max file upload 1 at a time. If I want to upload more file, simply run this function I guess.

I couldn't figure out how to put array data on the PW session. So, I just used php session code here.

Saving markup output data and each filename on the session for later use.

private function attachMarkup($upload_path, $filename){
	$out = <<< EOS
	<div>
		<span>Existing attachment :</span>
		<a href="$upload_path">
			<img src="$upload_path" width='15' height='15' />$filename
		</a>
		<input type='submit' name='delete' value='Delete' />
	</div>
EOS;
		return $out;

This is the attachMarkup function, which receive uploaded file path and file name to create markup.

if ($this->input->post->add_file){
	$this->uploadImage();
        $attached_file = $this->session->attach_markup;
}

This should upload image file to temp directory.

Whenever 'Add file' button is clicked, run this custom function.

$attached_file has some markup data covering multiple file uploaded.

I can simply use it like this below.

<?php echo $attached_file; ?>

in the middle of html code.

3. Now that I should move this image to the page.

After filled with subject, body, and image files, clicking a submit to send entire form should save all these data on the page.

I've used another custom function called processInput.

private function processInput() {

	switch ($post->type)
	{
		$newPost = new Page;
............................................// all other fields data to save here such as title, name and so on
		$newPost->of(false);
		// put images into the image fields
		if ($_SESSION['files']){
			foreach($_SESSION['files'] as $filename){
				$filename_with_path = $this->config->paths->root . 'tmp_uploads/' . $filename;
				$newPost->forum_images = $filename_with_path; // save image into forum_images field
				unlink($filename_with_path);
				$this->session->remove(attach_markup);
				unset($_SESSION['files']);
			}
		}
		$newPost->save();
	}
}

Because $_SESSION['files'] is the array, I have to use foreach saving each image file onto the page.

Using unlink PHP function to remove files I've uploaded to temp directory.

Same as attach_markup and $_SESSION['files'] data. It is no longer needed anymore.

Once everything are saved correctly, image file data can easily pull out.

foreach ($somepage->images_fld as $img)
echo "<img class='crbox' src='{$somepage->images_fld->url}$img' />";

From the $somepage that has field named 'images_fld', I can pull out url like $somepage->images_fld->url and filename like I did above.

There are some other issues I'm fighting for.

If a user go back out from the form page, now that I have to remove session data and uploaded files.

Thank you.

[horst]

...

All these are not tested and this is my planning code, and should not work I think.

I'm still figuring out what process is missing and finding a working code.

Hi LeiHa,

thanks for sharing this. Also if you say this is your planning code it looks to me to be a real good starting point and I have bookmarked this Post!

[MatthewSchenker]

Greetings LeiHa,

Please report back after you run this and let us know if it works as planned!

I have been working on a similar effort (getting file uploads working in a form with other ffields): http://processwire.com/talk/topic/3105-adding-file-upload-field-to-form-via-api/

I think it would be terrific and very helpful to have a well-documented way to take care of this important action.

Thanks,

Matthew

[LeiHa]

Thanks for all your interest on me.

This is wonderful learning process using Processwire.

I really appreciate it.

I've got here so far because of all of talented people in this forum.

Thank you.