Image management in custom module

[SoccerGuy3]

I have created a module for a client that allows them to insert real estate listings into a larger 'global' database (external to PW). The module works great for the text (address, city, property info, etc), but I am getting stuck wrapping my head around the images. The customer wants to upload a lot of images (think 20-30 in some cases). Currently (see code below) I am allowing 8 images to be uploaded, which works fine - BUT not the way it should.

Let me explain. The form is a simple file upload dialog (you know, "click here to choose file"). What's missing is the ability to display what has been uploaded previously (when they come back to edit a listing), the ability to delete an image previously uploaded and the ability to replace images. The images are currently stored in a special folder at: site/assets/files/_listings and saved as "listingID-1", "listingID-2", "listingID-3", etc.

I tried reading the code for the inputimagefield tag, but that just got me more confused (new to this level of using processwire). I am looking for some pointers or help in moving this forward if anyone is willing!

What I think would be great would be functionality like you get on pages using the images field. That would give the client the ability to add, delete, drag-n-drop, change the order, delete, etc. But I have no clue how you implement something like that inside a module.

What I have now (in part, obviously this is a much larger file):

The input part:

		//Add Property Description
		$f = $this->modules->get("InputfieldTextarea");
		$f->label = 'Property Description';
		$f->attr('name','prop_desc');
		$f->columnWidth = 100;
		$f->required = false;
		$f->value = $row['description'];
		$form->add($f);

		//Add pictures
		for ($x = 1; $x <= 8; $x++) {
			$f = $this->modules->get("InputfieldFile");
			$f->label = 'Property Picture #'.$x.' Import';
			$fieldName = 'prop_pix_'.$x;
			$f->attr('name',$fieldName);
			$f->extensions = 'jpg jpeg png gif';
			$f->maxFiles = 1;
			$f->descriptionRows = 0;
			$f->columnWidth = 25;
			$f->overwrite = true;
			$f->required = false;
			$f->destinationPath = $dPath;
			$form->add($f);
			}

		$f = $this->modules->get('InputfieldSubmit');
		$f->attr('name', 'submit_save');
		$f->attr('value', $this->_('Save'));
		$f->addClass('head_button_clone');
		$f->icon = 'save';
		$form->add($f);

The "saving" part:

			//Process photos

			function convertImage($originalImage, $outputImage, $quality) {
			    // jpg, png, gif or bmp?
			    $exploded = explode('.',$originalImage);
			    $ext = $exploded[count($exploded) - 1];

			    if (preg_match('/jpg|jpeg/i',$ext))
			        $imageTmp=imagecreatefromjpeg($originalImage);
			    else if (preg_match('/png/i',$ext))
			        $imageTmp=imagecreatefrompng($originalImage);
			    else if (preg_match('/gif/i',$ext))
			        $imageTmp=imagecreatefromgif($originalImage);
			    else if (preg_match('/bmp/i',$ext))
			        $imageTmp=imagecreatefrombmp($originalImage);
			    else
			        return 0;

			    // quality is a value from 0 (worst) to 100 (best)
			    imagejpeg($imageTmp, $outputImage, $quality);
			    imagedestroy($imageTmp);
				unlink($originalImage);

			    return 1;
			}

			for ($i = 1; $i <= 8; $i++) {
				if($form->get('prop_pix_'.$i)->value > '') {
					$uploadedFile = $form->get('prop_pix_'.$i)->value;
					//ensure image is jpg image and delete original upload
					convertImage($target_dir.$uploadedFile,$target_dir.$propNum.'-'.$i.'.jpg',70);
				}
			}

Any pointers or references to the correct tags would be much appreciated.

[Pixrael]

Check this: https://mediamanager.kongondo.com/

[SoccerGuy3]

While that looks really cool, I don't see how it applies to my situation. I need the photo management within the same screen as the data...

[dragan]

Well, instead of creating 8 InputfieldFile fields with maxFiles=1, why not just create one InputfieldImage field? Not sure about customizing your special file path for storing though - usually PW stores files/images under site/assets/files/page-id/ ...

[SoccerGuy3]

Wow! Is it really that easy? I changed the maxFiles to 0 and was able to upload 10 photos in the one dialog at the same time. But it only listed the first file in the window. Saving worked, although it didn't give them the formatted name I would desire, but I am sure I can address that.

Is there an input type/setting that would allow the use of the image type you normally find on a page with drag and drop and previews of the uploads?

[dragan]

I've never tried, but a quick search suggests you can do this:

 

[Robin S]

On 7/13/2019 at 11:38 AM, SoccerGuy3 said:

But I have no clue how you implement something like that inside a module.

Why not use pages and proper Fieldtype fields to store the data? Seems like it would be much easier, and anything out-of-the-ordinary that you want to show within your Process module you could show within Page Edit by hooking the render of a markup inputfield, or by using one of the runtime field modules from kongondo, bernhard, kixe, or me.

[SoccerGuy3]

On 7/20/2019 at 10:02 PM, Robin S said:

Why not use pages and proper Fieldtype fields to store the data? Seems like it would be much easier, and anything out-of-the-ordinary that you want to show within your Process module you could show within Page Edit by hooking the render of a markup inputfield, or by using one of the runtime field modules from kongondo, bernhard, kixe, or me.

I can't use pages (would have been much easier if I could!) as the data has to be stored in an outside database so that it can be merged with other data.

[Robin S]

On 7/13/2019 at 11:38 AM, SoccerGuy3 said:

I have created a module for a client that allows them to insert real estate listings into a larger 'global' database (external to PW).

Does the module need to read data back from the external database and display it in an interface for editing, or is PW only used for creating new data and inserting it into the database?

Because if it's the latter you could still use Page Edit as the interface for data creation. You'd use a saveReady hook to get, prep and insert the data from the page into the external database, then clear out the page ready for new data. Maybe you'd add an extra submit button to Page Edit ("Send to database") so that the normal save buttons can be used to temporarily save data locally and only the "Send" button finally inserts and clears the data when the user is ready.

[SoccerGuy3]

1 hour ago, Robin S said:

Does the module need to read data back from the external database and display it in an interface for editing, or is PW only used for creating new data and inserting it into the database?

Because if it's the latter you could still use Page Edit as the interface for data creation. You'd use a saveReady hook to get, prep and insert the data from the page into the external database, then clear out the page ready for new data. Maybe you'd add an extra submit button to Page Edit ("Send to database") so that the normal save buttons can be used to temporarily save data locally and only the "Send" button finally inserts and clears the data when the user is ready.

Yes, the data has to be editable. It is real estate data, so things change (price, description, etc).

[bernhard]

I think this would be a perfect use case for RockTabulator. Just get your external data, transform it into an array of objects and let RockTabulator do the rest. Finally add some links to a custom process module that shows an edit form (similar to a regular pw page edit) and save back that data to the original database.

You can add all kinds of presentation helpers, colorizations, filters, sorting etc. or even charts (see https://processwire.com/talk/topic/17207-custom-office-management-crmcontrolling-software/ as an example).

I'd be happy to assist you with that job - maybe you want to sponsor further development of RockTabulator, which is completely free and open sourced to the community...

See also http://tabulator.info/examples/4.3