Hi community,
I'm creating an APEX application.
I'm trying to write a custom upload process (for some reasons I do not want to use the default file upload process)
Here is my HTML :
<input type="file" id="CoverLoader"/>
<a href="#" onclick="UploadTheFile(0);" />Load File</a>
Then I have two Javascript functions that call separate AjaxCall backs
Function 1 :
function SetFileInfo(FileName, LastModified, MymeType) {
console.log('3-setting file info');
apex.server.process(
'SetFileInfo',
{x01: FileName, x02: LastModified, x03: MymeType},
{
success: function (pData) {
console.log('6-file info set');
},
dataType: "text"
}
);
}
Function 2 :
function CallAjax (Blob) {
console.log('5-uploading blob');
apex.server.process(
'UploadFile',
{f01: Blob},
{
success: function (pData) {
alert(pData);
console.log('7-blob uploaded');
},
dataType: "text"
}
);
}
And the click event handler :
//-----------------------------------------------------------
// Main Functions
//-----------------------------------------------------------
function UploadTheFile(a) {
console.log('1-Upload the file');
var files = document.getElementById('CoverLoader').files;
if (!files.length) {
alert("Merci de choisir un fichier image s'il vous plaît !");
return;
}
var file = files[0];
console.log('2-File selected');
// Set the file informations
SetFileInfo(file.name, file.lastModifiedDate, file.mime);
// Loop to upload the file
ReadBlob(file,0);
}
function ReadBlob(file, Step) {
var StepSize;
var StartByte, EndByte;
var Start, Stop;
var Finished = 0;
// Define the reading size
StepSize = 1000;
StartByte = Step * StepSize ;
EndByte = (Step + 1 ) * StepSize - 1;
if (EndByte > file.size - 1) {Finished = 1;}
Start = parseInt(StartByte) || 0;
Stop = parseInt(EndByte) || file.size - 1;
var Reader = new FileReader();
Reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) {
console.log('4-try to upload to database');
CallAjax(Blob);
console.log('6-uploaded ' + Step);
if (Finished == 0) {
ReadBlob(file, Step +1);
}
}
};
var Blob = file.slice(Start, Stop + 1);
Reader.readAsBinaryString(Blob);
}
Here are the Ajax Callbacks
SetFileInfo :
declare
EventId number := 341;
FileName varchar2(500);
MimeType varchar2(500);
LastModified date;
begin
FileName := apex_application.g_x01;
--LastModified := apex_application.g_x02;
MimeType := apex_application.g_x03;
MY_UPLOADS.CreateFile(EventId, FileName, MimeType, null);
htp.p('ok');
end;
UploadFile
declare
EventId number := 341;
Data_ blob;
l_token VARCHAR2(32000);
l_blob BLOB := empty_blob();
Destination blob;
begin
dbms_lob.createtemporary(l_blob, TRUE, dbms_lob.session);
FOR i IN 1 .. apex_application.g_f01.count
LOOP
l_token := wwv_flow.g_f01(i);
IF length(l_token) > 0
THEN
dbms_lob.append(l_blob,to_blob(utl_encode.base64_decode(utl_raw.cast_to_raw(l_token))));
END IF;
END LOOP;
dbms_lob.createtemporary(Destination, TRUE, dbms_lob.session);
DBMS_LOB.APPEND(Destination, l_blob);
commit;
update My_event set CoverPicture = Destination where id = eventid;
htp.p('15');
end;
When I run the page and I try to upload a file, the file is uploaded, the table column is filled. However when I download the file back to the computer, the content is different from the original. Like the file got corrupted.
Any help please on what I'm doing wrong ?
Cheers,