memory leak

[syk0t1k]

Hi,

i like the way your plugin works, but I have noticed that there is a memory leak in it (try loading up a 10mb file 3 or so times in visual studio).

(after 3 uploads of 10mb)
Also, is there a chance that there can be a way to hook up events to let a client know whether the plugin is busy with a render? also, is there a way to disable rendering?

[rexblack]

Thanks for trying the filepicker-component and reporting an issue.
I just implemented several callbacks that you can interact with and included some examples. Please have a look at the readme.md.
The delay between user selection and rendering preview is caused by the load-process of the HTML5-FileReader implementation. You could now react to this by providing a change- and renderThumbnail-callback. Note that the renderThumbnail-callback is called for every image that has been loaded.
I'll have to make further investigations to examine the issue with uploading large files. Unfortunately i'm pretty busy at the moment but I'll promise to do so as soon as possible.

[syk0t1k]

Hi,

Thanks for your timely response. I will get your latest code and run the same tests and get back to you on my findings.

[syk0t1k]

Hi,

I just wanted to let you know that, for some reason, when i run my code with your plugin in Chrome it works great with the previewing, but when i run it in IE (my version is 11) the preview becomes unresponsive until it finishes processing the (large) file.

Hope that helps

[rexblack]

Thank you very much,
i'll debug it in ie. But i'll need a few days to find time to do it, because i got some other urgent work to do today and tomorrow. Please understand.
Best Regards, Rafael

[syk0t1k]

No problem at all :)

[syk0t1k]

Hi,

I know you are busy, but when you get the chance, can I ask if you know a way of detecting if a user is browsing using (any version of) IE? I am not that jscript savvy since i work mostly with backend systems so please excuse my (probably bad) javascript noted below. And yes I am specifically using bootstrap (is there a way to not need to do this with bootstrap, if not then that's cool I can use the script below to accomplish what i need).

The reason I am asking is because IE 11 does not have "MSIE" in the user agent name as it shows up as Mozzila (the rest [lower versions] seem to work fine). I would like to use this in order to display a message if they are using IE that the preview might take a while to render (as noted in my previous post). And no,

document.all

does not work :(.

I figured I can use that just in the interim until the preview issue with IE is resolved (and I thought maybe if you really had to, you could put that kind of message into the plugin itself to let the user know)..

Currently I have extended your extended exposed functions to render the ui as such:

                       renderUI: function (element, button, input, preview) {

if (!ui) {

ui = document.createElement('div');

var group = document.createElement('div');

$(group).addClass("input-group");

$(button).addClass("btn btn-info input-group-addon");

group.appendChild(button);

$(input).addClass("form-control");

$(input).attr("disabled", "disabled");

group.appendChild(input);

ui.appendChild(group);

if (document.all == null) { //test for MSIE x.x;

var warning = document.createElement('div');

$(warning).addClass("class='warning'");

warning.innerHTML = "Please note that when using Internet Explorer that preview rendering can take longer than expected.";

ui.appendChild(warning);

}

ui.appendChild(preview);

element.parentNode.insertBefore(ui, element);

}

Any pointers as to how I can play around with that (time permitting on your side of course).

On a side-note. I had to use that in order to make the preview show below the button click instead of above it (to me it just sounds/looks logical). Is there a way the plugin can be set up to show the preview at the bottom or top of the file select button based on a setting? The reason I ask i because the client/user could get confused when the picture goes above the the actual file click button as such (my update using the l renderUI used):

Also, when I use it like that, then the browser does not render correctly on chrome:

Any help on my queries will be greatly appreciated :)

[rexblack]

Hi,
i'm sorry, at this time i cannot go into detail, test your code and fix the issues. surely you're also in a hurry to get it work for your project. be sure that i'll get back to you very soon. hopefully i can continue working on another project tomorrow that's also using the filepicker.

Very briefly, please let me point out that one of the leading lines when developing the plugin was to make the rendered markup completely configurable to make it work with several frameworks out of the box as well as allow for flexible ui. This purpose is fulfilled by a javascript json-/string-/dom-template-engine called mugine.js which is written on my own. This is why the render-callback is not the recommended way to customize markup.
Please have a look at the source-code of the plugin. Quite at the bottom of the file you find the predefined style-templates that may give you a starting point for developing your own markup:

'bootstrap': {
      ui: [
        { element: '#{ preview }' },
        {
          className: 'input-group',
          childNodes: [{
            element: '#{ button }',
            className: 'btn btn-default',
            wrap: '<div class="input-group-btn"></div>',
            innerHTML: '<i class="glyphicon glyphicon-upload"></i> <%= element.getAttribute("data-label") %>'
          }, {
            element: '#{ input }',
            className: 'form-control',
            placeholder: '#{ element.placeholder }'
          }]
        }, { element: '#{ element }' }
      ],
      thumbnail: {
        wrap: '<div class="thumbnail"></div>'
      }
    }

In your case you may want to move { element: '#{ preview }' } in the ui-section from the top to the bottom of the list. You may attach this data directly to the style-option of the plugin. More information about the template-engine here: mugine.js. Also run the examples for both projects.

Detecting IE11 is an issue. Sorry for not having tested this yet, but this post provides some useful information and possible detection solutions: http://stackoverflow.com/questions/17907445/how-to-detect-ie11
Best regards,
Rafael

[syk0t1k]

Hi Rafael,

I just wanted to let you know that the issue I was experiencing was definitely IE related. I have since resolved what the problem was (using a different library). But I can tell you that it has to do with preloading the image you want to upload. I think it might be Moxie in that regard. Hopefully you have more information on what is causing the issue at hand but suffice to say I can now upload severla files well over 10MB each to my app and it all works fine.

Cheers,
Glen