HTML equivalent of apex:inputFile?

You can use standard HTML input tags to achieve this, and the AJAX Toolkit to actually upload the attachments.

Here is a basic example.

First you need somewhere to select your files and something to start off the upload:

<input id="file-input" type="file" name="file"/>
<input type="button" value="Upload" onclick="uploadFile();"/>

Then you need to initilise the AJAX Toolkit:

<script type="text/javascript">
    var __sfdcSessionId = '{!GETSESSIONID()}';
</script>
<script src="/soap/ajax/29.0/connection.js" type="text/javascript"></script>

Then on the JavaScript side of things you'll want to add this function to an onClick event somewhere (perhaps an Upload button), or even to the input onChange event if you want an instant upload:

function uploadFile()
{       
    var input = document.getElementById('file-input');
    var parentId = // Your ID here, I suggest using a merge field to get this

    var filesToUpload = input.files;

    for(var i = 0, f; f = filesToUpload[i]; i++)
    {
        var reader = new FileReader();     

        // Keep a reference to the File in the FileReader so it can be accessed in callbacks
        reader.file = f; 

        reader.onerror = function(e) 
        {
            switch(e.target.error.code) 
            {
                case e.target.error.NOT_FOUND_ERR:
                    alert('File Not Found!');
                    break;
                case e.target.error.NOT_READABLE_ERR:
                    alert('File is not readable');
                    break;
                case e.target.error.ABORT_ERR:
                    break; // noop
                default:
                    alert('An error occurred reading this file.');
            };
        };     

        reader.onabort = function(e) 
        {
            alert('File read cancelled');
        };

        reader.onload = function(e) 
        {
            var att = new sforce.SObject("Attachment");
            att.Name = this.file.name;
            att.ContentType = this.file.type;
            att.ParentId = parentId;

            att.Body = (new sforce.Base64Binary(e.target.result)).toString();

            sforce.connection.create([att],
            {
                onSuccess : function(result, source) 
                {
                    if (result[0].getBoolean("success")) 
                    {
                        console.log("new attachment created with id " + result[0].id);
                    } 
                    else 
                    {
                        console.log("failed to create attachment " + result[0]);
                    }
                }, 
                onFailure : function(error, source) 
                {
                    console.log("An error has occurred " + error);
                }
            });
        };

        reader.readAsBinaryString(f);
    }
}

 <label>Select file: <input type="file" name="imagefile" accept="image/jpeg, image/png"> 
 </label>       
 <input type="submit" value="upload">

You can create a VF component to render the tags multiple times on your page. Bob Buzzard has a great blog article about this with sample code

http://bobbuzzard.blogspot.co.nz/2011/01/uploading-multiple-attachments-via.html

Tags:

Html

Upload

Apex