Minimizing image files when uploading via Editor

Minimizing image files when uploading via Editor

icefieldicefield Posts: 45Questions: 19Answers: 1
edited April 2020 in Editor

This is not a question, but some example code demonstrating how one can go about minimizing the size of PNG or JPG files when uploading via the Editor. Perhaps this will help someone in the future trying to achieve something similar.

To minimize an image, I use the API available at tinypng.com. You'll need a license from them to use their API. Cost is minimal. (Note - I'm not affiliated with them in anyway, other than a user of their API.)

Here's how to do this using a custom upload action with the Editor's upload method:

        $data = Editor::inst($db, 'Activity', '_id')
            ->fields(
                Field::inst('Activity._idImage')
                    ->setFormatter(Format::ifEmpty(0))
                    ->upload(

                        // custom upload method to compress image file
                        Upload::inst( function( $file, $id ) use ( $db, $uniqueId ) {

                            // get the file extension and the location of where we're storing compressed image file
                            $extension = pathinfo($file['name'])['extension'];
                            $webPath = '/files/events/' . $uniqueId . '/activities/' . $id . '.' . $extension;
                            $systemPath = Utilities::documentRoot() . $webPath;

                            // compress file
                            $source = \Tinify\fromFile($file['tmp_name']);
                            $source->toFile($systemPath);

                            // get compressed file size
                            $fileSize = filesize($systemPath);

                            // delete original uploaded file
                            unlink($file['tmp_name']);

                            // manually store file info in table
                            $db->update(
                                'UploadedFile',
                                [
                                    'fileName' => $file['name'],
                                    'fileExtension' => $extension,
                                    'fileSize' => $fileSize,
                                    'webPath' => $webPath,
                                    'systemPath' => $systemPath
                                ],
                                [ "_id" => $id ]
                            );

                            return $id;
                        })

                        // create file record in table
                        // when using custom upload action, webPath and systemPath cannot be used here
                        // see https://datatables.net/forums/discussion/comment/107184/#Comment_107184
                        ->db('UploadedFile', '_id', array(
                            'fileName' => Upload::DB_FILE_NAME,
                            'fileExtension' => Upload::DB_EXTN,
                            'fileSize' => Upload::DB_FILE_SIZE,
                            'webPath' => '',      // Upload::DB_WEB_PATH, 
                            'systemPath' => '', // Upload::DB_SYSTEM_PATH,
                            '_idEvent' => $idEvent
                        ))
                        ->validator(Validate::fileSize( 102400, 'Files must be smaller than 100K bytes.'))
                        ->validator(Validate::fileExtensions(array('png', 'jpg'), "Please upload an image (png or jpg)."))
                    ),
                    // other fields here

Hope that helps anyone that may try to achieve something similar.

Replies

  • colincolin Posts: 15,143Questions: 1Answers: 2,586

    Nice, thanks for sharing,

    Colin

This discussion has been closed.