Unable to Replace background image for image grid

[sanoj26692]

I want to replace default base64 image with backgroundImage base64

here is the script i use

   var upload = new FileUploadWithPreview('myUniqueUploadId', {
            maxFileCount: 4,
            text: {
                chooseFile: 'Maximum 4 Images Allowed',
                browse: 'Add More Images',
                selectedCount: 'Files Added',
            },
            images: {
                baseImage: backgroundImage,
            },
        })

but it doesn't work, How do i display backgroundImage

[John Datserakis]

Hello,

In your example I can't see exactly where you're initializing you backgroundImage base64 image, so I can't say for sure that there's not a problem with that base64 string.

I can say that we have a really nice example in the ./example folder where we load a .svg as the baseImage for an input. You can see this live in the demo page on the right box (just remove the preloaded images and you'll see the baseImage). Take a look at the ./example folder code to see exactly how that is coded.

My advice would be for you to first set up the baseImage using a local image option, like a local .png or .svg, then, once you have that working correctly and you know everything is set up well, you can work on getting the base64 version to work, as it should really not require any further updates.

Let me know if you still have trouble, thank you.

[sanoj26692]

Instead of using external file is the any inbuilt solution. Or can i use CSS like using background-color: ?
because i tried this

 const importedBaseImage = require('./download.svg'),
                    var upload = new FileUploadWithPreview('myUniqueUploadId', {
                        maxFileCount: 4,
                        text: {
                            chooseFile: 'Maximum 4 Images Allowed',
                            browse: 'Add More Images',
                            selectedCount: 'Files Added'
                        },
                        images: {
                            baseImage: importedBaseImage,
                        },
                    });

i get error here var upload = new FileUploadWithPreview('myUniqueUploadId', {

saying Uncaught SyntaxError: Unexpected token 'var'

[John Datserakis]

Hello, no - at the moment you cannot use a background-color for this.

In your example, I think you need to remove the , after the first line - that's why you're getting the error message. So, make it like this, it should work:

const importedBaseImage = require('./download.svg');
var upload = new FileUploadWithPreview('myUniqueUploadId', {
  maxFileCount: 4,
  text: {
    chooseFile: 'Maximum 4 Images Allowed',
    browse: 'Add More Images',
    selectedCount: 'Files Added'
  },
  images: {
    baseImage: importedBaseImage,
  },
});

[sanoj26692]

Tried above method and got this error,

car.php:377 Uncaught ReferenceError: require is not defined
(anonymous) @ car.php:377

after little research found this https://stackoverflow.com/questions/45723462/javascript-error-uncaught-referenceerror-require-is-not-defined

is there any solution without using external library ?

[John Datserakis]

I think has to do with an error in the formatting of your javascript in your .php file. Check your script tags as that may help. I'll close this for now, thanks.