Search code examples
javascriptflow-js

Unassign browse button on the flow.js HTML5 upload component

With the flow.js component we can assign a browse button like this:

flow.assignBrowse(document.getElementById('browseButton'));

We can assign a drop area like this:

flow.assignDrop(document.getElementById('dropTarget'));

We can also unassign a drop area like this:

flow.unAssignDrop(document.getElementById('dropTarget'));

My first question is how to unassign a browse button ?

My second question is how to know (natively) if a browse button is already defined ?

I can't see any info on that in the documentation.

Thanks.

Solution

  • How to unassign browse?

    There is no built-in way, but you just need to reverse what assignBrowse is doing, which basically adds an input similar to the following to the element you select:

    <input type="file" multiple="multiple" style="visibility: hidden; position: absolute; width: 1px; height: 1px;">

    To revert that, you could assign an ID to that input, which you can basically do by providing to assignBrowse (which takes the following params: domNodes, isDirectory, singleFile, attributes) an [{"id":"myId"}] array in place of the attributes param so that you can target it later and destroy that element:

    function myUnassign(){
    document.getElementById("myId").remove()
}

    How to know (natively) if a browse button is already defined ?

    By checking if the input element exists. Similar approach to the one above, check if an element with a previously assigned ID exists already.