0

I'm attempting to upload a file through a VF command link and action function [working on old unmanaged package :-( ]. For multiple rows in pageblocktable. I am having trouble deciding the id for each upload. Following is what I tried. Currently, only the first content version upload works, not working for any other upload.

JS

   <script>
    var maxStringSize = 6000000;
    var attachmentList;
    var j;
    function uploadMe(ele)
    {
        input = document.getElementById('fileinput');
        var varName =  ele.getAttribute("accesskey");
        attachmentList = input.files;
        console.log("attachmentList",attachmentList);
        console.log("varName",varName);//
        if(j == undefined) 
        j = 0;   
        var file;
        if(j < attachmentList.length)
        {
            file = attachmentList[j];
            var name = file.name;
            var reader = new FileReader();  
            reader.onload = function(e) {  
             var attachmentbodybase64 = reader.result.replace(/^data:.+;base64,/, '');//console log will print : ZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzB.....
                console.log(attachmentbodybase64.length);
                if(attachmentbodybase64.length > maxStringSize )
                alert("File size is too large to handle");
                else
                {
                    j++;
                    //saveFileAF(attachmentbodybase64, name);
                    saveFileAF(attachmentbodybase64, name, varName);
                }
            }
             reader.readAsDataURL(file);
        }
        else
        {
            console.log('this is end');
            
        }
        
     }
</script>

Following is the vf

 <apex:pageBlockSectionItem >
 <input type= "file" Id= "fileinput"/>
   <apex:commandButton onclick="uploadMe(this);return false;" value="Upload" accesskey="{!wrapperTask.position}"/>
 </apex:pageBlockSectionItem>
 </apex:column>

Action function:

        <apex:actionFunction name="saveFileAF" action="{!upload}" reRender="dm">
            <apex:param name="base64File" value="" assignTo="{!base64}"/>
            <apex:param name="fileName" value="" assignTo="{!fileName}"/>
            <apex:param name="taskPos" value="" assignTo="{!taskPosition}"/>
        </apex:actionFunction>

Apex:

public void upload() {
    
    system.debug('@@fileName' +this.fileName);
    system.debug('@@this.refId'+this.refId);

    ContentVersion cv = new ContentVersion();
    cv.Title = this.filename;
    cv.PathOnClient = this.fileName;
    cv.VersionData = EncodingUtil.base64decode(this.base64);
    cv.IsMajorVersion = true;
    Database.SaveResult sr=Database.insert(cv);         
    
    system.debug('@@cv id' +cv.Id); //gives me the id of content version
    system.debug('@@taskPosition id' +this.taskPosition);//gives me the 0th position of the upload from accesskey.
    
    mapTaskPositionContentId.put(cv.Id,this.taskPosition);//printing this gives me (qwqwe18digitID, 0), zero being the position of the upload file.        
  
}

Here's the UI of the vf upload I trying to upload:

enter image description here

What am I doing wrong? Any suggestion will be appreciated. Thanks!

1

Only the first row file gets uploaded because of this line in your JS:

input = document.getElementById('fileinput');

All rows have the same id for input-file element and so the first one gets picked.

I modified the code a bit to have an index in the id attribute and pass it as a parameter in the JS function.

VF Code:

<apex:form>
   <apex:pageBlock >
      <apex:variable value="{!0}" var="index"/>
      <apex:pageBlockTable value="{! accounts }" var="a">
         <apex:column>
            <apex:outputText>
               <apex:variable value="{!index + 1}" var="index" />
               {!index}
            </apex:outputText>
         </apex:column>
         <apex:column>
            <input type= "file" Id= "fileinput{!index}"/>
            <apex:commandButton onclick="uploadMe('{!index}');" value="Upload"/>
         </apex:column>
      </apex:pageBlockTable>
   </apex:pageBlock>
</apex:form>

JS Code:

<script>
var maxStringSize = 6000000;
var attachmentList;
var j;

function uploadMe(index) {
    var fileId = 'fileinput' + index //Add index to identify row no.
    input = document.getElementById(fileId);
    attachmentList = input.files;
    console.log("attachmentList", attachmentList);
    if (j == undefined)
        j = 0;
    var file;
    if (j < attachmentList.length) {
        file = attachmentList[j];
        var name = file.name;
        var reader = new FileReader();
        reader.onload = function (e) {
            var attachmentbodybase64 = reader.result.replace(/^data:.+;base64,/, ''); //console log will print : ZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzB.....
            console.log(attachmentbodybase64.length);
            if (attachmentbodybase64.length > maxStringSize)
                alert("File size is too large to handle");
            else {
                j++;
                //saveFileAF(attachmentbodybase64, name);
                saveFileAF(attachmentbodybase64, name, varName);
            }
        }
        reader.readAsDataURL(file);
    } else {
        console.log('this is end');

    }

}
</script>

See if this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.