Question

Using the following HTML input and Javascript, a user can add up to 3 files to a page.

Code for the file upload input:

    <input id="my_file_element" type="file" name="file_1" >
    <input type="submit">
Files:
<div id="files_list"></div>
<script> 
    var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 3 );
    multi_selector.addElement( document.getElementById( 'my_file_element' ) );
</script>

JavaScript in the HTML Header:

<script language="javascript"> 

    function MultiSelector( list_target, max ){

    this.list_target = list_target;

    this.count = 0;

    this.id = 0;

    if( max ){
        this.max = max;
    } else {
        this.max = -1;
    };

    this.addElement = function( element ){


        if( element.tagName == 'INPUT' && element.type == 'file' ){

            element.name = 'file_' + this.id++;


            element.multi_selector = this;

            element.onchange = function(){

                var new_element = document.createElement( 'input' );
                new_element.type = 'file';

                this.parentNode.insertBefore( new_element, this );

                this.multi_selector.addElement( new_element );

                this.multi_selector.addListRow( this );

                this.style.position = 'absolute';
                this.style.left = '-1000px';

            };

            if( this.max != -1 && this.count >= this.max ){
                element.disabled = true;
            };

            this.count++;

            this.current_element = element;

        } else {
            alert( 'Error: not a file input element' );
        };

    };

    this.addListRow = function( element ){


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


        var new_row_button = document.createElement( 'input' );
        new_row_button.type = 'button';
        new_row_button.value = 'Delete';

        new_row.element = element;


        new_row_button.onclick= function(){

            this.parentNode.element.parentNode.removeChild( this.parentNode.element );

            this.parentNode.parentNode.removeChild( this.parentNode );


            this.parentNode.element.multi_selector.count--;

            this.parentNode.element.multi_selector.current_element.disabled = false;

            return false;
        };

        new_row.innerHTML = element.value;

        new_row.appendChild( new_row_button );

        this.list_target.appendChild( new_row );

    };

};
    </script>

How do I get the blob files (up to 3) inserted into Oracle DB using Pl/SQL?

Answer 1

What a can of worms. I’ve looked around a bit, and all i can tell you is that what you want to do is not easy at all. There are several problems you’ll have to work around. But, if you are interested, a brave person made a plugin available with multi-file upload (at a price).

The main issue is that Apex has no way of handling file uploads through AJAX. From the documentation of the plugin you can glean some info: files are processed in chunks, to be reconstructed at the end. In IE (and non-html5 browsers (and IE9 also has no FileReader object)) the files are processed one by one through a seperate page and through an iframe. Presumably, this page has a file browse item. I believe files will also be uploaded right away.

Another way would perhaps be through apex listener. Although here you’ll have to figure out even more to get this to work.

However, when you say ‘upload files (up to 3)’, does this mean that you can only upload up to 3 files max? In that case, why don’t you create 3 file browse items, which you then dynamically show/hide? Save yourself the trouble of trying to mimic the multi-file plugin.

If you do want, the best route would perhaps be the use of an extra page, especially when using IE.

In HTML5 browsers you could try the FileReader object in javascript, read the file and encode it, then process it in chunks and put it back together serverside through plsql. For more info on that, check Reading local files in javascript and Html5 File Upload with Progress.