Currently using apex:inputfile in vf page to upload image which have a hard limit of 10MB And my requirement is finding a workaround to increase the limit to 100MB.
Approach I am trying is created an lwc using it is working fine on lightning tab but when I include the lwc inside my visualforce The UI is present it open the file select window but not showing the the upload progress window which have a done button the file upload succesfully only when we click on done button on progress window. if it sound confusing below is the image of window we are missing This window wont appear when i try to upload from visualforce.
<apex:page Controller="LoginController" action="{!LoginTimeCheck}" sidebar="false" showHeader="false">
<apex:includeLightning />
<style>
#SearchId {
margin-left: 0%;
margin-right: 0;
}
#serachbtnId {
margin-top: 0 !important;
}
</style>
<div id="CaseForm" class="container">
<h3 style='margin-left: 6.3rem;font-family: halcom !important;'>SUMMARY</h3><br/><br/>
<apex:form id="theform">
<div class="row">
<div style='margin-left: 6.3rem'>
<label>Attach File</label>
<!--<apex:inputFile value="{!file}" id="fileupload" fileName="{!UploadedfileName}"/>-->
<div id="fileUploaderContainer" />
</div>
<hr/>
<div style='margin-left: 6.3rem'>
<apex:commandButton id="theButton" styleClass="registerbutton" value="Create" action="{!saveCaseRecord}" onclick="on();" status="status"/>
<input type="button" class="cancelbtn" value="Cancel" onclick = 'setTimeout(function() { location.reload() }, 1)'/>
</div>
</apex:form>
</div>
</apex:outputPanel>
<script>
// Create and initialize the LWC component with the recordId from the controller
document.addEventListener('DOMContentLoaded', function () {
$Lightning.use('c:fileUploaderApp', function() {
$Lightning.createComponent('c:fileUploader',
{ recordId: '{!theSelectedCaseId}' },
'fileUploaderContainer',
function(cmp) {
console.log('LWC Component added in VF page');
}
);
});
});
function on() {
document.getElementById('{!$Component.theform.theButton}').value = 'Processing...';
document.getElementById("overlay").style.display = "block";
}
</script>
<footer id='footer'>
<apex:include pageName="SiteFooter"></apex:include>
</footer>
</apex:page>