How can I change the FileUpload default images?

Hi all,

In the FileUpload component I can choose between “Person” and “Org” to display as a default if no file has been uploaded yet.

I now want to change these default to some of my own images. What is the best way to achieve this?

I saw that these photos are stored here “/resource/skuid__DefaultPhotos/Profile.jpg”, but I cannot find them in the static resources.

Do I need to do this with a script?

Thanks for your help.

TLDR: I want to change some the FileUpload default photos.

I’m also interested in this. I used this CSS:

.nx-attachmentimage-image { content:url(""); }

But this overrides the image when its been uploaded, too. I did not see a different class thats applied when the image is uploaded vs blank

I’m under the impression that “person” and “org” are from salesforce rather than Skuid. We don’t house those two on our end so we’re not able to set a default other than those two.

Being able to do so would be nice. Would you like me to change this status from Question to Idea so that our design team has easier visibility to potentially add this as an enhancement in future Skuid releases?


As Thimo mentioned above, it looks like the default pictures are coming from the Skuid managed package: “/resource/skuid__DefaultPhotos/Profile.jpg”. I’m curious if anyone else in the community has done this successfully. Like I said above, I’m able to use CSS to change the placeholder, but that also overrides the image when uploaded. There is something with displaying the actual file that I am not seeing. 

skuid__DefaultPhotos is labeled DefaultPhotos in the salesforce “Static Resource” page. I know of no way to delete it or replace it.

An enhancement request for this has been created internally here at skuid. I would love to be able to put in a new one for default as well. Right now, I know of no way to accomplish this declaratively. The only way around it I’m aware of is what Craig mentioned above but that does have limitations like overriding the image that has been uploaded. You might be able to create something in Java script that activates the CSS if it detects org or profile… 

Stephen, using JS is a great idea. I hadn’t thought of that prior. I was able to make this work with two snippets. A pageload snippet to set the new default image if the upload field is blank, and another snippet fired by update model action on the image field to remove the background image CSS.

On a related note, there doesn’t appear to be a way to set the Id of the file upload component. I was able to go into the XML and grab it for my jQuery, but being able to set that Id and add a CSS class on the component would be nice :slight_smile:

Would you mind putting your snippets here for other people to glean the great functionality?

Sure. I actually changed it from page load to in-line snippet and condensed it down to one snippet based on some renderings I was doing on the page. Add the CSS class:

var params = arguments[0], if (!guest.Couple_Picture__c){ $('#sk-3tJr6G-251').addClass('pictureUpload'); } else { $('#sk-3tJr6G-251').removeClass('pictureUpload');} 

 CSS Class:

.pictureUpload .nx-attachmentimage { content:url(""); }

Thank you!