InputfieldImage ajax upload on file select

[renobird]

Hello all,

Before I go building something, I thought I'd ask here for existing solutions or opinions.

I have a large group of users who are stuck using IE9 (and will be for some time), so the drag/drop image upload doesn't work for them.

Not a problem, they don't see the "drag and drop files here" label.

Many of these users have requested that the "browse" button auto upload images once they are selected. The reason for this is that in order to work with the images (sort/add captions) etc, they have to go to the top/bottom of the page to hit save and then scroll back to the images field to keep working.

My questions:

Have any of you done this already — If so, do you mind sharing?

Are there pitfalls to this idea that I'm just too dense to see at the moment?

[Soma]

ufff, just thinking... would a onchange on the file input with triggering the save button help as workaround? 

Maybe bombined with a add hash to form action url to jump to image field? Kinda hacky but should work fine.

$('#ProcessPageEdit #Inputfield_images').on("change", function(e){
    $("#ProcessPageEdit").attr("action", $("#ProcessPageEdit").attr("action") + "#Inputfield_images");
    $("#submit_save").trigger("click");
});

[renobird]

Thanks Soma,

That could work. I was thinking there might be a way to trigger the ajax upload that happens on the drag/drop — just on input change instead.

I haven't spend much time looking it yet, thought I'd post here for thoughts first.

If that turns out to be too complicated, your method above will do the trick for sure.

[Soma]

In other browsers drag and drop works on the input button to add files ( without ajax ), if that works in IE it's almost like the html5. Haven't tested on IE9. A polyfill? https://github.com/Jahdrien/FileReader caugh.. dependencies, I don't know...