Skip to content
Laravel

Common Components

ImageUploader

It is a component within the NetSTI\Uploader plugin which lives in plugins/netsti directory. It is the basic component that used in the uploading images or pdf files on the system. commonly used in OTAS for attachments. To use with model you need firstly to add attachment relationship via $attachOne or $attachMany arrays:

namespace App\Models;
 
use Model;
 
class Post extends Model
{
    //...
    public $attachOne = [
        'image' => \System\Models\File::class,
        //...
    ];
 
    //Or attachMany for multiple attachment
    public $attachMany = [
        'image' => \System\Models\File::class,
        //...
    ];
}

then you need to goto the view you need to render the component into then add these configurations to the Config part, there are two type of rendering: in an already exist model to update or delete the attachment. e.g: posts/show.htm:

[NetSTI\Uploader\Components\ImageUploader image]
placeholderText = "Click or drag images to upload" # the placeholder title
maxSize = 5 # the maximum size in MB.
fileTypes = ".gif,.jpg,.jpeg,.png" # Allowed file types (`note:` `ImageUploader` component can also upload pdf/other docs files if allowed in `filesTypes`)
imageWidth = 100
imageHeight = 100
imageMode = "crop" # how to process the image after it uploaded
modelClass = "App\Models\Post" # the model fully name with namespace, which has the relationship
modelKeyColumn = "image" # the relationship name in the model to link the file to
identifierValue = "{{ :id }}" # the primary key in case of the model already exist, in case of post show will be on the url part: `posts/:id` as parameter
deferredBinding = 0

if it is a new attachment for not existing model yet the config only different for the last line:

[NetSTI\Uploader\Components\ImageUploader image]
placeholderText = "Click or drag images to upload" # the placeholder title
maxSize = 5 # the maximum size in MB.
fileTypes = ".gif,.jpg,.jpeg,.png" # Allowed file types (`note:` `ImageUploader` component can also upload pdf/other docs files if allowed in `filesTypes`)
imageWidth = 100
imageHeight = 100
imageMode = "crop" # how to process the image after it uploaded
modelClass = "App\Models\Post" # the model fully name with namespace, which has the relationship
modelKeyColumn = "image" # the relationship name in the model to link the file to
identifierValue = "{{ :id }}" # the primary key in case of the model already exist, in case of post show will be on the url part: `posts/:id` as parameter
deferredBinding = 0 
deferredBinding = 1

then on PHP Part on onInit hook you need to add binding line to a new instance of post, also on the onSave function when you need to save the model Post you need to pass the session key:

use App\Models\Post;
 
function onInit()
{
    // first image in this image is the name if the component you defined on this config part.
    // second 'image' is the name of the relation you defined on the Post model.
    // They can be different but is is not a good practice because it will lead to a confusion
    $this->image->bindModel('image', new Post());
}
//...
function onSave()
{
    //...
    $post = new Post();
    $post->title = '...';
    //...
    $post->save(); 
    $post->->save(null, post('_session_key')); 
}
 
function onImageUploaded()
{
    //Log the action
}

Last part you need to render the component in the twig part like this:

{{ form_open('onImageUploaded') }}
    {% component 'image' %}
{{ form_close() }}

Once the image uploaded, the handler onImageUploaded will be called and you can make any custom logic after the attachment uploaded like sending an email or logging the action, but is is optional so you can pass none.