TypeError: $file.fileupload is not a function.

[mikebronner]

Similar or same as #294 -- but that issue is closed and a fix isn't detailed. What happens is that as soon as I click on the image icon to upload an image, the following error is thrown in the browser console:

TypeError: $file.fileupload is not a function. (In '$file.fileupload($.extend(true, {}, this.options.fileUploadOptions, fileUploadOptions))', '$file.fileupload' is undefined)

        // Only add progress callbacks for browsers that support XHR2,
        // and test for XHR2 per:
        // http://stackoverflow.com/questions/6767887/
        // what-is-the-best-way-to-check-for-xhr2-file-upload-support
        if (new XMLHttpRequest().upload) {
            fileUploadOptions.progress = function (e, data) {
                $.proxy(that, 'uploadProgress', e, data)();
            };

            fileUploadOptions.progressall = function (e, data) {
                $.proxy(that, 'uploadProgressall', e, data)();
            };
        }

// this next line appears to be the culprit
        $file.fileupload($.extend(true, {}, this.options.fileUploadOptions, fileUploadOptions));

        $file.click();

My browserify implementation:

global.MediumEditor = require('medium-editor');
require('medium-editor-insert-plugin')($);

And the javascript on the page:

    <script>
            $(document).ready(function () {
                var titleEditor = new MediumEditor('.title-editable', {
                    buttonLabels: 'fontawesome',
                    toolbar: {
                        buttons: ['bold', 'italic', 'underline']
                    }
                });
                // var imageEditor = new MediumEditor('.image-editable', {
                //     buttonLabels: 'fontawesome',
                //     toolbar: {
                //         buttons: []
                //     }
                // });
                var bodyEditor = new MediumEditor('.body-editable', {
                    buttonLabels: 'fontawesome',
                });
                // $('#featuredImage').cropper({
                    // aspectRatio: 1/2,
                    // movable: false,
                    // zoomable: false,
                    // rotatable: false,
                    // scalable: false
                // });
                $('.body-editable').mediumInsert({
                    editor: bodyEditor,
                    addons: {
                        images: {
                            deleteMethod: 'DELETE',
                            deleteScript: '{{ route('genealabs.laravel-weblog.images.destroy', $post->id) }}',
                            fileDeleteOptions: {
                                dataType: 'json',
                                data: {
                                    _token: '{{ csrf_token() }}'
                                }
                            },
                            fileUploadOptions: {
                                url: '{{ route('genealabs.laravel-weblog.images.store') }}',
                                type: 'POST',
                                acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                                formData: [
                                    {
                                        name: '_token',
                                        value: '{{ csrf_token() }}'
                                    }
                                ]
                            }
                        }
                    }
                });
// [...]

And here the HTML:

            <div id="post-content" class="body-editable" data-placeholder="Tell your story...">{!! $post->content !!}</div>

Any ideas how to work around this? Nothing I've tried seems to fix the issue.

Update: it seems if I don't browserify the npm package, but include all the dependencies manually, it works. This leads me to believe that the dependencies of the npm package aren't configured correctly for browserifying it.

[linkesch]

I use webpack instead of browserify, so I didn't check it. Did you find out what was wrong? Can you submit a pull request?

This is the place to look at: https://github.com/orthes/medium-editor-insert-plugin/blob/0de3f910136803347d63664a1a9b1fe15852c1bc/src/wrappers/start.js

[mikebronner]

I was able to get it to work using webpack.