How to add 2 attachments to a record created trough a force.com site without surpassing viewstate limit

Question

I am working on a force.com site visualforce page where I create a record and want to add 2 required attachments in the same visualforce page. When I add the first attachment I reach the viewstate limit when I check for 2 attachments. I understood that this is not possible and can be solved with javascript. I have a VFP with javascript, when I try to use this as site page I need an sessionId but this seems not to be supported since version 31. So is there any way to make this work.

Visualforce

<apex:page standardController="Career__c"  extensions="SiteFormAttachment" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" >
    <script type="text/javascript">__sfdcSessionId = '{!$Api.Session_Id}';</script>
    <script src="../../soap/ajax/48.0/connection.js" type="text/javascript"></script>
    <title>Upload Files using XMLHttpRequest - Minimal</title>
    <form id="form1" enctype="multipart/form-data" method="post">
        <div class="row">
            <label for="fileToUpload">Select a File 1 to Upload</label><br />
            <input type="file" name="fileToUpload" id="fileToUpload1" onchange="fileSelected()"/>
        </div>

        <div class="row">
            <label for="fileToUpload">Select a File 2 to Upload</label><br />
            <input type="file" name="fileToUpload" id="fileToUpload2" onchange="fileSelected()"/>
        </div>
        <div class="row">

            <input type="button" onclick="CreateObjSF()" value="Upload" />
        </div>
    </form>
    <script language="JavaScript">
    var ids='';
    function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
        if (file) {
            var fileSize = 0;
            if (file.size > (36 * 1024 * 1024)) {
                alert('File too large, greater than 36MB');
                return;
            }
            if (file.size > 1024 * 1024)
                fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            else
                fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

            document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
            document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
            document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
        }
    }
    function CreateObjSF() {
        sforce.connection.sessionId = '{!sessionId}';
        var objectSF         = new sforce.SObject('Career__c');
        objectSF.Name        = 'Test123';
        objectSF.Function__c    = false;
        objectSF.Country__c = 'filetype';
        objectSF.Area__c       = 'filecontent';
        objectSF.Job_Posting__c = 'a011X000001EoLJQA0';
        objectSF.Status__c = 'New';
        objectSF.RecordTypeId = '0121t000000QZWUAA4';;

        var results = sforce.connection.create([objectSF]);
        for (var i = 0; i < results.length; i++) {
            if (results[i].getBoolean("success")) {
                alert('New Career record created: ' + results[i].id);
                this.ids=results[i].id;
                uploadFile(results[i].id);
            }
            else {
                alert('Failed:' + results[i]);

            }
        }
    }
    function uploadFile() {

        alert('LETS UPLOAD: ');
        var file = document.getElementById('fileToUpload1').files[0];
        alert(file.name);
        var reader = new FileReader();
        reader.onload = loaded;
        reader.onerror = errorHandler;
        reader.readAsDataURL(file); 
    }
    function uploadContentVersion(filename, filecontent,parentId) {
        alert('TRY content: ' + filename);
        var contentVersion          = new sforce.SObject('ContentVersion');
        contentVersion.pathOnClient = filename;
        contentVersion.origin       = 'H'; 
        contentVersion.VersionData  = filecontent;
        var results = sforce.connection.create([contentVersion]);
        for (var i = 0; i < results.length; i++) {
            var condoc =  sforce.connection.query("SELECT Id, ContentDocumentId FROM ContentVersion WHERE Id = '"+ results[i].id +"'")

            if (results[i].getBoolean("success")) {

                var contentDocumentLink          = new sforce.SObject('ContentDocumentLink');
                contentDocumentLink.ContentDocumentId =condoc.records.ContentDocumentId;
                contentDocumentLink.LinkedEntityId = this.ids;
                contentDocumentLink.ShareType = 'I'; // Inferred permission
                console.log(contentDocumentLink)
                var results2 = sforce.connection.create([contentDocumentLink]);
                console.log(results2);

                alert('New ContentVersion record created:' + results[i].id);

            }
            else {
                alert('Failed:' + results[i]);

            }
        }
    }
    function loaded(evt) {
        for (var i = 1; i < 2; i++) {
            var filename = document.getElementById('fileToUpload' + [i]).files[0].name;
            var fileContent = String(evt.target.result);
            fileContent = fileContent.substr(fileContent.indexOf(',') + 1);
            uploadContentVersion(filename, fileContent);  
        }
    }
    function errorHandler(evt) {
        if (evt.target.error.name == 'NotReadableError') {
            alert('File could not be read');
        }
        else {
            alert(evt.target.error);
        }
    }
    </script>
</apex:page>

Answer 1

For the view state error, the variable on the controller can be declared transient.

For e.g.

VF page

<apex:inputfile value="{!blobFile}" filename="test" id="imgContract" />

Controller

public transient Blob blobFile {get; set;}