How to target two FilePond instances with different styles?

General Web Dev
1

I want to have different style for 2 FilePond instances in same component (ReactJS).

In `editprofile.scoped.scss` I’m using:

.filepond--root, .filepond--root .filepond--drop-label  {     
    width: 331px;   
    height: 222px;  
}

To set it like square, and different dimensions.

passport picture uploads

and I need it to be rounded and smaller

I can’t have both active, as one would be bigger, and another smaller… All other fields work as expected.



// for passport picture
.filepond--root,
.filepond--root .filepond--drop-label  {
    width: 331px;
  height: 222px;

} 


// for profile picture
.filepond--root,
.filepond--root .filepond--drop-label  {
    width: 90px;
  height: 90px;
  font-size: 8pt;

} 

 
 {/* for passport picture */}
<FilePond
                    type="file"
                    onupdatefiles={setFiles}
                    allowMultiple={false}
                    maxFiles={1}
                    server={server}
                    name="image"
                    labelIdle='Drag & Drop passport picture or <span class="filepond--label-action">Browse</span> <br/>(mandatory !)'
                    accept="image/png, image/jpeg, image/gif"
                    dropOnPage
                    dropValidation
                    allowPaste={true}
                    allowReplace={true}
                    credits={""}
                    allowFileEncode={true}
                    allowFileTypeValidation={true}
                    allowImagePreview={true}
                    allowImageCrop={true}
                    allowImageResize={true}
                    allowImageTransform={true}
                    imagePreviewHeight={222}
                    imageCropAspectRatio="1:1"
                    imageResizeTargetWidth={100}
                    imageResizeTargetHeight={100}
                    stylePanelLayout="compact"
                    styleLoadIndicatorPosition="center bottom"
                    styleProgressIndicatorPosition="center bottom"
                    styleButtonRemoveItemPosition="center  bottom"
                    styleButtonProcessItemPosition="center bottom"
                    imageEditAllowEdit={false}
                  />




 {/* for profile picture */}
 <FilePond
                    type="file"
                    onupdatefiles={setFiles}
                    allowMultiple={false}
                    maxFiles={1}
                    server={server}//TODO, different one, for profile pic upload
                    name="image"
                    labelIdle='Drag & Drop profile picture or <span class="filepond--label-action">Browse</span> <br/>(optional)'
                    accept="image/png, image/jpeg, image/gif"
                    dropOnPage
                    dropValidation
                    allowPaste={true}
                    allowReplace={true}
                    credits={""}
                    allowFileEncode={true}
                    allowFileTypeValidation={true}
                    allowImagePreview={true}
                    allowImageCrop={true}
                    allowImageResize={true}
                    allowImageTransform={true}
                    imagePreviewHeight={100}
                    imageCropAspectRatio="1:1"
                    imageResizeTargetWidth={100}
                    imageResizeTargetHeight={100}
                    stylePanelLayout="compact circle"
                    styleLoadIndicatorPosition="center bottom"
                    styleProgressIndicatorPosition="center bottom"
                    styleButtonRemoveItemPosition="center  bottom"
                    styleButtonProcessItemPosition="center bottom"
                    imageEditAllowEdit={false}
                  />
2

Unfortunately, your two links each give similar information…

3

Not sure why you’re seeing that. The links go to two images (on Stackoverflow). Anyway, here they are:

xlTD6OiI

65rk0cxB

4

Well that is odd, I tested the links in Firefox, prior to my post.
Testing in Firefox after yours, the links now work.

When this sort of oddity happens I just assume that the browser
unfortunately allowed a gremlin into the works. :rolleyes:

1 Like