javascriptphplaravelelfinder

right elFinder and CKeditor integration to upload files directly


I uses elFinder laravel package file Manager with ckeditor. I follow all Instructions step and all things work except one.

When I click on image button in ckEditor to select (or upload) an Image , on the upload tab after select an image from my computer and click Send it to the Server button NotFoundHttpException in RouteCollection.php line 161 shown and upload fails.

this is ckEditor initialization code :

<textarea name="content_fa" id="fa_post_content" class="form-control"
          rows="10"></textarea>
<script>
    var fa_post_content = CKEDITOR.replace('fa_post_content', {
        toolbar: 'admin_mode',
        filebrowserBrowseUrl : '{{route('elfinder.ckeditor')}}',
        filebrowserUploadUrl : '/elfinder/connector.php?cmd=upload'
    });
</script>

According to This Issue , I add filebrowserUploadUrl option as you see above. but this not work too.

How can I solve this ?


Solution

  • This code (+ DnD upload) using demo site is here.

    CKEDITOR.on('dialogDefinition', function (event) {
        var editor = event.editor,
            dialogDefinition = event.data.definition,
            tabCount = dialogDefinition.contents.length,
            uploadButton, submitButton, inputId,
            elfUrl = editor.config.filebrowserUploadUrl,
            // elFinder configs
            elfDirHashMap = { // Dialog name / elFinder holder hash Map
                image : '',
                flash : '',
                files : '',
                link  : '',
                fb    : 'l1_Lw' // fallback target
            },
            customData = {}; // any custom data to post
    
        for (var i = 0; i < tabCount; i++) {
            uploadButton = dialogDefinition.contents[i].get('upload');
            submitButton = dialogDefinition.contents[i].get('uploadButton');
    
            if (uploadButton !== null && submitButton !== null) {
                uploadButton.hidden = false;
                submitButton.hidden = false;
                uploadButton.onChange = function() {
                    inputId = this.domId;
                }
                submitButton.onClick = function(e) {
                    dialogName = CKEDITOR.dialog.getCurrent()._.name;
                    var target = elfDirHashMap[dialogName]? elfDirHashMap[dialogName] : elfDirHashMap['fb'],
                        name   = $('#'+inputId),
                        input  = name.find('iframe').contents().find('form').find('input:file'),
                        error  = function(err) {
                            alert(err.replace('<br>', '\n'));
                        };
    
                    if (input.val()) {
                        var fd = new FormData();
                        fd.append('cmd', 'upload');
                        fd.append('overwrite', 0); // disable upload overwrite to make to increment file name
                        fd.append('target', target);
                        $.each(customData, function(key, val) {
                            fd.append(key, val);
                        });
                        fd.append('upload[]', input[0].files[0]);
                        $.ajax({
                            url: elfUrl,
                            type: 'POST',
                            data: fd,
                            processData: false,
                            contentType: false,
                            dataType: 'json'
                        })
                        .done(function( data ) {
                            if (data.added && data.added[0]) {
                                var url = data.added[0].url;
                                var dialog = CKEDITOR.dialog.getCurrent();
                                if (dialogName == 'image') {
                                    var urlObj = 'txtUrl'
                                } else if (dialogName == 'flash') {
                                    var urlObj = 'src'
                                } else if (dialogName == 'files' || dialogName == 'link') {
                                    var urlObj = 'url'
                                } else {
                                    return;
                                }
                                dialog.selectPage('info');
                                dialog.setValueOf(dialog._.currentTabId, urlObj, url);
                            } else {
                                error(data.error || data.warning || 'errUploadFile');
                            }
                        })
                        .fail(function() {
                            error('errUploadFile');
                        })
                        .always(function() {
                            input.val('');
                        });
                    }
                    return false;
                }
            }
        } 
    });