File upload - How do you create alternate image sizes and display a thumb in the table view?

rmeetin

Using the default file upload code I set up both the uploader in the popup editor and the image to view in table view. It works well enough with small images but with large ones it can drag the performance down substantially. Aside from performance there is need for alternate image sizes (perhaps even cropped images) for some situations.

This is the controller/php code I have in place:

Field::inst( 'image' )
  ->setFormatter( Format::ifEmpty( null ) )
  ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/images/gallery_images/__ID__.__EXTN__' )
  ->db( 'files', 'id', array(
    'filename'    => Upload::DB_FILE_NAME,
    'filesize'    => Upload::DB_FILE_SIZE,
    'web_path'    => Upload::DB_WEB_PATH,
    'system_path' => Upload::DB_SYSTEM_PATH
   ) )
   ->validator( Validate::fileSize( 50000000, 'Files must be smaller that 50M' ) )
   ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
)

Depending on the ID it will create an image, $id.$ext, say 25.jpg. I will want to create an 80px wide thumb and convert to jpg if not already in jpg format and call it 25.T.jpg. I will be something similar for larger and medium size images. The php code I use in my regular scripts is something like:

$img = "../images/gallery_images/$image.$ext"; // uploaded, raw image
$T = "../images/gallery_images/$image.T.jpg"; // 80px (width)
system("convert '$img' -resize 80x -quality $quality -strip '$T'");

That would get me the images I need. In table view, I will need to change the function to display the newly created thumb rather than the original (which could get > 10MB). This code:

    data: "image",
    render: function ( file_id ) {
      return file_id ?
      '<img src="'+editor.file( 'files', file_id ).web_path+'"/>' :
      null;
      },
      defaultContent: "No image",
      title: "Image"
    },

web_path will no longer work, I think it will need to be replace with my path + 'image' + .jpg

'<img src="'+editor.file( 'files', file_id ).web_path+'"/>' 

something like:

'<img src="'+editor.file( 'files', file_id )."../../images/gallery_images/+image+jpg'"/>' 

Tx

allan

To create thumbnails on upload you would need to use a custom upload action - then move the full quality file to wherever you need it (similar to the example shown in the link).

Then for your renderer, you could do something like:

var url = editor.file( 'files', file_id ).web_path;

url = url.replace('.jpg', 'image.jpg');

...

Not sure I've got that exactly right for your use case, but that's how it could be done. Depending on what you've got in the database you might also be able to construct the url - for example if you have the file name, use that from the file() method's returned object).

Allan

rmeetin

This, javascript, is beyond me, sorry, so I forwarded this to a guy who is helping.

rmeetin

I got some help with this, however I ran into a new problem with a simple version of file upload. This error:

{"fieldErrors":[],"error":"Unknown upload field name submitted","data":[],"ipOpts":[],"cancelled":[]}

I'm doing this with a simple upload very similar to your simple file upload example.

colin

Hi @rmeetin ,

The error is suggesting the field name isn't correct - it would be worth verifying the client is sending the correct field to the server, and those fields are the same as in the DB.

Hope that helps,

Cheers,

Colin

rmeetin

I went through it inside and out and it wasn't the field name. It seemed to be related to the data in the 'image' field. Anytime there is a mismatch between the data in that and the files table it seems to result in a disconnect and either the table doesn't load or loads and you cannot edit a field.

If there is a straggler in the image field of the primary table and no corresponding entry in the files table I have to run a couple manual mysql statements to get things right again.

mysql> update products set pdf=NULL,image=NULL;
mysql> truncate table files;

In my case I added a secondary upload for pdf files (modified the upload function) and added a secondary field called pdf in the primary table to keep images vs pdf docs separate.

Also there was a breakdown because I tried adding file upload to a FAQ table. It took a while before I figured out that I could not use the same general 'files' table. So I renames original files to product_files and added a new faq_files and updated the upload scripts. We'll see if this is the final solution.

colin

Excellent, glad it's coming together. Thanks for the update.