Yii2 pjax file upload for use within activeForm

Question

I'm creating a Yii2 activeForm for creating and editing a product, and want the page to manage images as well. I want to be able to upload (add) images for the product, and then have a sortable preview region where the images show up and can be sorted to the right order. My plan is to upload files via ajax/pjax to a temporary folder where the form will pull from to display them in the sortable region, and upon saving the model, the images will be moved/named accordingly.

Initially I'm using Kartik's FileInput widget (which may be unnecessary) and Kartik's Sortable Input for re-ordering the images.

I believe I can handle the file uploading and moving/renaming, my question is how do I upload the images separate from the rest of the form, and then have the ActiveForm pull them into the sortable input area? Additionally, I'll want to be able to delete images from it as well (with a little x in the corner of the thumbnail). I'm familiar with using pjax to wrap grid-views and even using pjax to submit a form to a pjax method (for use inside a modal), but not sure how to use it inside another form and make the other form dynamically load the images.

To clarify, I have a Product that extends ActiveRecord, and a ImageForm that extends Model. I then have ProductController with the following Create action:

public function actionCreate()
{
    $model = new Product();
    $images = new ImageForm();

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(['view', 'id' => $model->id]);
    }

    return $this->render('create', [
        'model' => $model,
        'images' => $images,
    ]);
}

My goal is to be able to upload images (through ImageForm) to a temporary location that is displayed on the Product's create view. However currently, using the upload function in the widget merely reloads the page and the images are gone.

well you can use formModel that extends yii\base\Model to upload the file using the kartik\FileInput I don't see any problem in doing that your normal form will have a separate model which is extended from \yii\db\ActiveRecord, you can use the events provided by FileInput widget to refresh the div in which you want to show the uploaded files or make a separate action in your controller that is called by this event using ajax — Muhammad Omer Aslam
@MuhammadOmerAslam is there a 'yii' way of doing that ajax call, or am I just writing javascript to detect the event? Also, how do I submit just the upload form and not the entire product form? — sharf
if you use the kartik\FileInput you dont have to write the javascript to post the picture it has the option to trigger upload as soon you select the file and as it uses ActiveForm and model so yes it is a yii way of doing the upload it will even show you the validation too from model if it fails. like if size limit increases — Muhammad Omer Aslam
@MuhammadOmerAslam pardon my ignorance, I'm using the fileInput in a $form->field()->widget scenario, would I have to embed another activeForm inside the first to make this work? And once the upload is complete how do I trigger the refresh? Is that custom javascript or is there a way to trigger it otherwise? I'm going to work on it a bit and will update my question as appropriate. — sharf
the FileInput you are using should use the same ActiveForm but a different model object that would be of your UploadForm class i.e $form->field('imagefileName',$uploadModel)->widget() — Muhammad Omer Aslam

Muhammad Omer Aslam Muhammad Omer Aslam · Accepted Answer · 2018-02-04T06:31:14

You can use a separate model for Uploading the image and use the same form with just passing the $uploadForm model object to populate the form field for the file, you can use the kartik\FileInput widget which has the option to upload file via ajax via uploadUrl, you can trigger the upload on the selection of the file automatically via fileUploaded event and once uploaded you have 2 options either you use uploadAsync=>true and use filebatchuploadsuccess which triggers after all files are uploaded or use default setting and use filebatchuploadcomplete wchich will trigger after every file upload. Both of these events provide the list of files that are uploaded but be careful as you are validating the files after they are submitted you should return the response in case of error so that the user is notified for the files that were not uploaded, you can either the files list provided by the events or better use a separate action inside your controller and call it inside the relative success function you are using via an ajax call and populate the list of the uploaded files if you are saving them inside a table query the table to show the names

fileselect : This event is triggered after files are selected in the file input via the file browse button. This is slightly different than the change event in the sense that this will be triggered even if the file browse dialog is canceled.

How you are going to use it

//get filinput object
var $input=$("#input-id");

 $input.on('fileselect', function(event, numFiles, label) {

    //trigger file upload with 1 sec delay
    setTimeout(function() {
    $input.fileinput("upload");
}, 1000);
});

filebatchuploadcomplete: This event is triggered only for ajax uploads and after completion of either the synchronous OR asynchronous ajax batch upload.

Additional parameters available are:

files: the file stack array (or empty object if not available).

extra: the uploadExtraData settings for the plugin (or empty object if not available).

Sample Code

$('#input-id').on('filebatchuploadcomplete', function(event, files, extra) {
    //call the ajax function here to query the files that are uploaded
});

Yii2 pjax file upload for use within activeForm

1 Answers