How can I change the FileUpload default images?

  • 2
  • Question
  • Updated 2 years ago
  • Answered
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.


Photo of Thimo

Thimo

  • 1,280 Points 1k badge 2x thumb

Posted 3 years ago

  • 2
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
I'm also interested in this. I used this CSS:

.nx-attachmentimage-image {
    content:url("https://imageURLHere.com");
}

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
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
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?
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
Stephen,

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. 
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
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... 
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
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 :)
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Would you mind putting your snippets here for other people to glean the great functionality?
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
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("https://img.clipartfest.com/...");
}
(Edited)
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Thank you!