A.B.Developer A.B.Developer - 3 years ago 231
PHP Question

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 ?

Answer Source

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;
            }
        }
    } 
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download