function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jared KremerJared Kremer 

HTML Input FIle -> Javascript -> to SF Attachment or Richtext Field

Hello, 

 

So I have an interesting issue. Im trying to get an image from a <input type="file" /> and not an <apex:input />. Reasons behind this is a front end framework that lives on top of the platform and that we are not using controllers and pages as the controller -> page model. 

 

What I have thus far is 

 

getImage: function(options) {
			if (document.getElementById("Vendor_Image__c").files.length === 0) {
				return;
			}
			oFReader = new FileReader();
			rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
			var that = this;
			var oFile = document.getElementById("Vendor_Image__c").files[0];
			if (!rFilter.test(oFile.type)) {
				flashMessage({
					message: 'The File type you are trying to add for the image is not supported.'
				});
				return;
			}
			oFReader.onload = function(oFREvent) {
				$("#vendor-image").html('<image src="' + oFREvent.target.result + '" alt="No Preview" />');

				oFReader.onload = function(oFREvent) {
					that.model.set({
						_Vendor_Image__c: oFREvent.target.result
					});
				}
				oFReader.readAsBinaryString(oFile);
			};


			oFReader.readAsDataURL(oFile);
		},

 

 

This does a great job handling the front end UI but the backend is different. 

 

Using Apex Remove Actions:

I have made 2 attempts, 1 being that I have tried a rich text field and putting the base64 inside of it. But I easily break the max character count even though 1MB pictures are allowed. 

 

Likewise, the second approach I run into Visualforce Remoting Error "input to long":

 

Visualforce Remoting Exception: Input too long. [0, 1000000]

 But I can fit smaller images in such as around a 200KB file, but my attempts at a 900KB file fails. Have tried as a Blob and String to send the data to a remote action to create a SF attachment instead of a rich text field. 

 

Any ideas for how I could keep this in JS and get the data back into SF? 

 

Thanks in Advance! 

JayNicJayNic

Hmm... Off the top of my head: you could try an apex action function to pass a string param, and convert to blob....

 

VF code:

<apex:actionfunction name="af_submitImage" action="{!submitImage}" >
    <apex:param name="imageData" value="" assignTo="{!imageData}"/>
</apex:actionfunction>

 You can call this via javascript with "af_submitImage(myString)"

 

Your controller could use the blob.valueOf() method to parse the string to a storable file

 

public string imageData {get;set;}

public void submitImage(){
    Attachment a = new Attachment(
        parentId = myObject.id,
        title = "myTitle",
        body = blob.valueOf(imageData)
        
    );
    insert a;
}

 

 

I didn't test this code, so I migh tbe missing some parameters, but you get the general idea