Throw error pop up message when upload file limit exceeded than 5MB

Hello,

I am writing a code. where i am uploading a logo. Now my issue is when my image size is more than 5 mb then it shows error message seperated like this "Maximum view state size limit (135KB) exceeded. Actual view state size for this page was 156.812KB". I want that it should throw eeror pop up message on the same window

public with sharing class DocumentController {
public Feedback_Main__c feedbackmain{get;set;}
public ID folderid{get;set;}
public Blob file{get;set;}

public DocumentController() {
feedbackmain = new Feedback_Main__c();
Organization org =[select Id,InstanceName from Organization limit 1];

//List<String>AcutalBaseUrl =BaseUrl.split('.');
//system.debug('AcutalBaseUrl'+AcutalBaseUrl[0]);
}

public PageReference Manage(){
PageReference pg = new PageReference('apex/SBAddQuestionPage');
pg.setRedirect(true);
return pg;
}

public PageReference saveAndRedirect() {
Id OrgId = UserInfo.getOrganizationId();
Folder FolderObj = [Select Id From Folder Where Name = 'Survey Builder' limit 1];
Document d= new Document();

d.name = 'LOGO';
d.body=file; // body field in document object which holds the file.
d.IsPublic = true;
d.ContentType ='image/png';
d.Type = 'png';

d.folderid = FolderObj.Id; //folderid where the document will be stored insert d;
if (Document.SObjectType.getDescribe().isCreateable())
{
try{
     insert d;
     }
    catch (DMLException e)   {
                          // catch (System.LimitException e) {
                             ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'File Size is more than 5MB'));
                           return null;
                        }

}
Organization org =[select Id,InstanceName from Organization limit 1];
//(Sandbox)feedbackmain.Image__c = '<img src="https://c.cs41.content.force.com/servlet/servlet.ImageServer?id='+d.id+'&oid='+OrgId+'"></img>';
feedbackmain.Image__c = '<img src="https://c.'+org.InstanceName+'.content.force.com/servlet/servlet.ImageServer?id='+d.id+'&oid='+OrgId+'"></img>';

system.debug('++++++++++D ID+++++++++++'+feedbackmain.Image__c);
insert feedbackmain; // This takes care of the details for you.
PageReference redirectPage = Page.SBAddQuestionPage;
redirectPage.setRedirect(true);
return redirectPage;
}

}

VF Page:
<apex:page controller="DocumentController" sidebar="false" showHeader="false" standardStylesheets="true" docType="html-5.0">
<apex:form >
<apex:pageMessages ></apex:pageMessages>
<html>
<head>

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Create Survey</title>
<apex:stylesheet value="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900"/>
<apex:stylesheet value="{!$Resource.SurveyMaster}"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"/ >





<script>


function CheckFbName(ReceiveInputID){
    var inputValue = document.getElementById(ReceiveInputID).value;
    if(inputValue.length==0 || inputValue == ''){
        alert("Please enter Survey Name.");
        $(".NextOne").click(function(){
            $(".NameDiv").show();
            $(".HeaderFooterDiv").hide();
            $(".ContactDiv").hide();
            return false;
        });
    }
    else
        $(".NextOne").click(function(){
        $(".NameDiv").hide();
        $(".HeaderFooterDiv").show();
        $(".ContactDiv").hide();
        return false;
    });
}

function myFunction() {
    window.open("https://cs41.salesforce.com/apex/AddQuestionPage");
}

</script>
<style>
.lookupIcon {
background-image: url('{!$Resource.LookupIcon}') !important;
height:30px !important;
width:30px !important;
position:absolute !important;
top:6px !important;
right:-25px !important;
}

.lookupIconOn {
background-image: url('{!$Resource.LookupIcon}') !important;
height:30px !important;
width:30px !important;
position:absolute !important;
top:6px !important;
right:-25px !important;
}

@import url(http://fonts.googleapis.com/css?family=Nunito:300);

body { font-family: "Nunito", sans-serif; font-size: 24px; }
a    { text-decoration: none; }
p    { text-align: center; }
sup { font-size: 36px; font-weight: 100; line-height: 55px; }

.button
{
    text-transform: none;
    letter-spacing: 0px;
    text-align: center;
    color: #0C5;
    font-size: 20px;
    font-family: "Nunito", sans-serif;
    font-weight: 300;
    position: absolute;
    top: 11px;
    right: 0;
    bottom: 0;
    left: 56.6%;
    padding: 10px 0;
    width: 236px;
    height: 43px;
    background: #00a1e1;
    border: 1px solid #00a1e1;
    color: #FFF;
    overflow: hidden;
    transition: all 0.5s;
    float: right !important;
    border-radius: 20px;
}

.button:hover, .button:active
{
text-decoration: none;
color: #00a1e1;/*#0C5*/
border-color: #00a1e1;
background: #FFF;
}

.button span
{
display: inline-block;
position: relative;
padding-right: 0;

transition: padding-right 0.5s;
}

.button span:after
{
content: ' ';
position: absolute;
top: 0;
right: -18px;
opacity: 0;
width: 10px;
height: 10px;
margin-top: -10px;

background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-top: none;
border-right: none;

transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(-135deg);
}

.button:hover span, .button:active span
{
padding-right: 30px;
}

.button:hover span:after, .button:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: #00a1e1;
right: 10px;
top: 70%;
}
</style>
</head>
<body>
<header class="mainHeader">
    <div class="container clear">
        <a href="/apex/SBIndex" class="logo"><img src="{!$Resource.MainLogo}" alt=""/></a>
        <div class="nav">
            <ul>
                <li><a href="/apex/SBIndex" class="home"><img src="{!$Resource.HomeIcon}" alt=""/></a></li>
                <li><a href="/apex/SBQuestionBank">Question Bank</a></li>
                <li class="active"><a href="/apex/SBCreateSurvey">Create Survey</a></li>
                <li><a href="/apex/SBSendSurvey">Send Survey</a></li>
                <li><a href="/apex/SBREPORT">Report</a></li>
            </ul>
        </div>
    </div>
</header>
<section class="page-name">
    <div class="container clear">
        <h2>Create Survey</h2>
    </div>
</section>
<section class="bodyContainer">
    <div class="container clear">
        <div class="white-box">
            <div class="mainForm">
                
                <a href="/apex/SBAddQuestionPage" class="button"><span>View Existing Surveys</span></a>
                <hr />
                <div class="formFeild">
                    <label>Please enter the name for survey:</label>
                    <div class="feild">
                        <apex:inputText value="{!feedbackmain.Feedback_Name__c}" html-placeholder="Enter name for the survey" id="FbName" required="true" rendered="true"/>
                    </div>
                </div>
                <div class="formFeild">
                    <label>Upload Logo (5 MB Max. size):</label>
                    <div class="feild">
                        <apex:inputfile value="{!file}" ></apex:inputfile>
                  
                    </div>
                </div>
                <div class="formFeild">
                    <label>Header Text:</label>
                    <div class="feild">
                        <apex:inputTextarea value="{!feedbackmain.Header_Text__c}" html-placeholder="Header Text"/>
                    </div>
                </div>
                <div class="formFeild">
                    <label>Footer Text:</label>
                    <div class="feild">
                        <apex:inputTextarea value="{!feedbackmain.Footer_text__c}" html-placeholder="Footer Text"/>
                    </div>
                </div>
                <div class="formFeild">
                    <label>Survey Owner:</label>
                  <div class="feild">
                    <apex:inputField value="{!feedbackmain.Feedback_Taken_by_Contact__c}" required="true"/>
                        
                    </div>
                </div>
                <div class="formFeild">
                    <label> </label>
                    <div class="feild">
                       <apex:commandButton value="Save" action="{!saveAndRedirect}" style="display: inline-block !important; padding:3px 15px !important; line-height:35px !important; color:#fff !important; font-size:15px !important; background:#75C181 !important; border-radius:35px !important; margin-bottom:15px !important; min-width:125px !important; text-align:center !important;"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<footer class="main-footer">
    <ul>
        <li><a href="#" style="font-size: 17px;">Privacy Policy</a></li>
        <li><a href="#" style="font-size: 17px;">Terms of Services</a></li>
    </ul>
    <div class="copyright" style="font-size: 17px;">© 2016 Survey Builder, All rights reserved. </div>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
</apex:form>
</apex:page>

October 6, 2016
·
Answer
·
Like
1
·
Follow
3

Thota Rakesh 1
Hi satakshi,

I really don't know how to catch the uploaded file error using apex (server-side), but I've avoided that limitation using javascript (client-side) before the form is submitted in order to notify the user about the limitation.

This is an example

Visualforce Page

<apex:page standardController="document" > <apex:form styleClass="js-wrapp"> <apex:inputFile value="{!document.body}" filename="{!document.name}"/ > <apex:commandButton value="Save" action="{!save}"/> </apex:form> <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" /> <script> function getIEFileSize(file){ var myFSO = new ActiveXObject("Scripting.FileSystemObject"), filepath = file.value, thefile = myFSO.getFile(filepath); return thefile.size; } $(function(){ $('form.js-wrapper').submit(function(){ var isOk = true; $('input[type=file]').each(function(){ if(typeof this.files[0] !== 'undefined'){ var file = this.files[0], size = typeof ActiveXObject !== 'undefined' ? getIEFileSize(file) : file.fileSize || file.size; isOk = 5242880 > size; if(!isOk){ alert(this.files[0].name +' file is bigger than 5MB'); } return isOk; } }); return isOk; }); }); </script> </apex:page>

Kindly mark it as solved if it helps you,

Best Regards,
Rakesh.T

October 17, 2016
·
Like
0
·
Dislike
0

Andy on Cloud
Hi,

SFDC has limitations everywhere except their SOAP API (has less limitation but still has some). To do this, all you need to do is to use any JavaScript framework such as jQuery that makes calls to standard SFDC SOAP API (or REST if you prefer). In that case, the image size is only limited by the size that can be stored on SFDC (depends on where you store) and the timeout of connection.

Good Luck,

Andy

October 20, 2016
·
Like
0
·
Dislike
0

Harisa Hashimuddin
Hi,

Can you try declaring the 'file' variable in you controller as 'Transient'? This has helped for me.

For your reference: https://developer.salesforce.com/forums/?id=906F00000008mc6IAA

Please mark this answer, if this has solved your issue.

Best,

May 18, 2017
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Throw error pop up message when upload file limit exceeded than 5MB

You need to sign in to do that.