This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

blubcow
blubcow

Batch Upload Image and Create Model.

Upload multiple images at once, and create one model for each of them.

The model must have an attachment (in attributes "attachMany" OR "attachOne").

Frontend HTML upload button:

Use it in a toolbar for example

<button type="button" class="btn btn-primary oc-icon-upload" data-control="upload" data-url="<?= Backend::url('vendor/plugin/mymodel/onBatchUploadCreate') ?>">
       Upload Image & Create
</button>

JavaScript Upload Code

make sure "dropzone" from october js framework is loaded

this.$el.find('[data-control="upload"]').each(function(){
    var postUrl = $(this).data('url');
    if(postUrl && (postUrl != '')){
        var uploaderOptions = {
                    clickable: $(this).get(0),
                    method: 'POST',
                    url: $(this).data('url'),
                    paramName: 'file_data',
                    createImageThumbnails: false,
                    headers: {},
                    previewsContainer: t.$el.find('[data-control="upload-ui"] .upload-preview').get(0)
                    // fallback: implement method that would set a flag that the uploader is not supported by the browser
          };

          t.dropzone = new Dropzone($(this).get(0), uploaderOptions);
          t.dropzone.on('addedfile', t.proxy(t.uploadFileAdded));
          t.dropzone.on('totaluploadprogress', t.proxy(t.uploadUpdateTotalProgress));
          t.dropzone.on('queuecomplete', t.proxy(t.uploadQueueComplete));
          t.dropzone.on('sending', t.proxy(t.uploadSending));
          t.dropzone.on('error', t.proxy(t.uploadError));
          t.dropzone.on('success', t.proxy(t.uploadSuccess));
    }   
});

controllers/MyModelController.php

PHP Code for the uploaders AJAX request

public function onBatchUploadCreate()
{
        try {
            // SAVE THE MODEL
            $model = $this->formCreateModelObject();

            $this->formBeforeSave($model);
                $this->formBeforeCreate($model);

            $modelsToSave = $this->prepareModelsToSave($model, [
                'name' => 'testname',
                'slug' => 'testslug'
            ]);
            foreach ($modelsToSave as $modelToSave) {
                $modelToSave->save(null, FormHelper::getSessionKey());
            }

            $this->formAfterSave($model);
                $this->formAfterCreate($model);

            // UPLOAD THE IMAGE
            // FileUpload -> checkUploadPostback
            try {
                        if (!Input::hasFile('file_data')) {
                            throw new ApplicationException('File missing from request');
                    }

                    $uploadedFile = Input::file('file_data');

            // SAVE FILE & RELATION
            $this->putUploadIntoField($uploadedFile, $model);
            }
            catch (Exception $ex) {
            Response::make($ex->getMessage(), 406)->send();
            die();
            }

        // OUTPUT
               return Response::make('success');
        }
        catch (Exception $ex) {
               Response::make($ex->getMessage(), 406)->send();
               die();
        }
}

protected function putUploadIntoField($uploadedFile, $model)
{
    $validationRules = [
            'max:'.File::getMaxFilesize(),
            'extensions:jpg,gif,png,mp3,mp4,mov'
        ];

        $validation = Validator::make(
            ['file_data' => $uploadedFile],
            ['file_data' => $validationRules]
        );

        if ($validation->fails()) {
            throw new ValidationException($validation);
        }

        if (!$uploadedFile->isValid()) {
            throw new ApplicationException('File is not valid');
        }

    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        //  the name of our attachment relation ist static, "feature_files"
        // change it to your attachment name
        $fileRelation = $model->feature_files();

        $file = new File();
        $file->data = $uploadedFile;
        $file->is_public = $fileRelation->isPublic();
        $file->save();

    $fileRelation->save($file);

    return true;
}

Last updated

amdad
amdad

Thank you for share! That was what I looking for :)

1-2 of 2

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.