Image upload form

[demon101]

With following implementation image file upload works correctly only for drag-n-drop, but for usual file selection it sent request to server, but nothing insert to bbcode

img : {
          modal: {
            tabs: [
              {
                title: CURLANG.modal_img_tab1,
                input: [
                  {param: "SRC",title:CURLANG.modal_imgsrc_text,validation: '^http(s)?://.*?\.(jpg|png|gif|jpeg)$'}
                ]
              },
              { //The second tab
                title: CURLANG.modal_img_tab2,
                html: '<div id="imguploader"><form id="fupform" class="upload" action="{img_uploadurl}" method="post" enctype="multipart/form-data" target="fupload"><input type="hidden" name="iframe" value="1"/><input type="hidden" name="idarea" value="' + this.id + '" /><div class="fileupload"><input id="fileupl" class="file" type="file" name="img" /><button id="nicebtn" class="wbb-button">' + CURLANG.modal_img_btn + '</button> </div> </form> </div><iframe id="fupload" name="fupload" src="about:blank" frameborder="0" style="width:0px;height:0px;display:none"></iframe></div>'
              }
            ],
            onLoad: this.imgLoadModal,
            onSubmit: function() {}
          },
          transform : {
            '<img src="{SRC}" />':"[img]{SRC}[/img]"/*,
             '<img src="{SRC}" ssswidth="{WIDTH}" height="{HEIGHT}"/>':"[img {WIDTH}x{HEIGHT}]{SRC}[/img]"*/
          }
        },

[AlexeyKosov]

The same issue, did anybody fix that?

[demon101]

For fix have replaced upload form code by https://blueimp.github.io/jQuery-File-Upload/

[gibigate]

The same issue, did anybody fix that?

[alexndlm]

Maybe this help https://github.com/Dreamlex/wysibb

[gibigate]

@alexndlm doesn't work link button and insert url of image, but upload image work perfect

[gibigate]

just uncomment line //this.wbbInsertCallback(cmd,params);

[mnkblog]

to fix this issue find the code below in jquery.wysibb.js :

this.$modal.find("#fupform").bind("submit",$.proxy(function(e) { $(e.target).parents("#imguploader").hide().after('<div class="loader"><img src="'+this.options.themePrefix+'/'+this.options.themeName+'/img/loader.gif" /><br/><span>'+CURLANG.loading+'</span></div>').parent().css("text-align","center"); },this))

and change it to:

                this.$modal.find("#fupform").bind("submit",$.proxy(function(e) {

                    this.$loader = $('<div class="loader"><img src="'+this.options.themePrefix+'/'+this.options.themeName+'/img/loader.gif" /><br/><span>'+CURLANG.loading+'</span></div>');
                    $(e.target).parents("#imguploader").hide().after(this.$loader).parent().css("text-align","center");
                    //upload progress
                    var uploadProgress = $.proxy(function(e) { 
                        var p = parseInt(e.loaded/e.total*100, 10);
                        this.$loader.children("span").text(CURLANG.loading+': '+ p+'%');

                    }, this);
                    var xhr = jQuery.ajaxSettings.xhr(); 
                    if (xhr.upload) {
                        xhr.upload.addEventListener('progress', uploadProgress, false);
                    }
                    e.preventDefault();
                    var ufile = $("#fileupl")[0].files[0];
                    var fData = new FormData();
                    fData.append('img', ufile);
                    if (this.options.extraParams) { //check for extraParams to upload
                        $.each(this.options.extraParams,function(k,v) {
                            fData.append(k, v);
                        });
                    }
                    $.ajax({
                        type: 'POST',
                        url: this.options.img_uploadurl,
                        data: fData,
                        processData: false,
                        contentType: false,
                        xhr: function() {return xhr},
                        dataType: 'json',
                        success: $.proxy(function(data) {
                            if (data && data.status==1) {
                                console.log("image uploaded");

                                this.$txtArea.insertImage(data.image_link,data.thumb_link);

                                this.closeModal();
                                this.updateUI();
                            }else{
                                //this.error(data.msg || CURLANG.error_onupload);
                                console.log('error');
                                this.$loader.find(".upl-error").remove().end().append('<span class="upl-error">'+CURLANG.error_onupload+'</span>').addClass("wbbm-brdred");
                            }
                        },this),
                        error: $.proxy(function (xhr, txt, thr) {
                            //this.error(CURLANG.error_onupload)
                            this.$loader.find(".upl-error").remove().end().append('<span class="upl-error">'+CURLANG.error_onupload+'</span>').addClass("wbbm-brdred");
                        },this)
                    });
                    return false;
                },this))

It's very imperfect way to fix this issue, but it worked for me, and just wanted to share it with you.