Thursday, 31 March 2011

AJAX File Upload


Ok, so I looked into this a while ago, and had all the idea's in my head, but just never got around to putting something together.

Some of the newer HTML5 File API's allow you to access the file contents (base64 is what we like) - by using the FileReader object. Unfortunately, not all browsers have support for it, so you would not be able to use it accross the board. There are a lot of resources on the topic. If interested, check out: http://www.html5rocks.com/tutorials/file/dndfiles/ and https://developer.mozilla.org/en/Using_files_from_web_applications. There is another plugin out there, which supports ajax uploads with IE, but unfortunately it's commercial; which is another reason I was keen to get this happening.

So anyway, I've created a demo of this - which you can check out at: http://apex.oracle.com/pls/apex/f?p=45448:afu

I used the following table to get started:


CREATE TABLE PLUGIN_BLOB 
(
  ID NUMBER NOT NULL 
, MIME_TYPE VARCHAR2(200) 
, FILENAME VARCHAR2(200) 
, DATA BLOB 
, SOME_FK NUMBER 
, CONSTRAINT PLUGIN_BLOB_PK PRIMARY KEY 
  (
    ID 
  )
  ENABLE 
);

create sequence plugin_blob_seq;

CREATE OR REPLACE TRIGGER BI_PLUGIN_BLOB before
  INSERT ON "PLUGIN_BLOB" FOR EACH row BEGIN IF inserting THEN IF :NEW."ID" IS NULL THEN
  SELECT PLUGIN_BLOB_SEQ.nextval INTO :NEW."ID" FROM dual;
END IF;
END IF;

I wont get to deep in to the nitty gritty, but basically, when you set it up, you specify some fields (most of which you can tell is from the table defined above):


At the moment, it has attributes to specify that the table has a foreign key column; I was also going to return the primary key from the insert statements into a page item (declared in an attribute), but I was having some issues in that no settings were available in the page item once I got to 9 attributes - so I let it pass for now. It might be that my development box is still on 4.01.00.03 - I will sus it out sometime later, or someone else can pickup from where i've left off ;-) The other thing is the fact that I've hard coded the button style and label, which may like to be customized.

So, if you want to test that the foreign key insertion is working properly, just set a number value to P6_SOME_FK through the URL, and it too will be populated - at least I hope so ;-)

I've attached one file thus far - which is the plugin export file. File: item_type_plugin_ts_ajaxfileupload.sql

This little project also gave me the opportunity to learn more about the apex.ajax.clob object - I saw someone post about Carls blog on the OTN forums, that contained the information about it; Pretty handy to know! See: http://carlback.blogspot.com/2008/04/new-stuff-4-over-head-with-clob.html