There is input image field without any input image

I am building a WebApp and I am trying to add my own model instance in the place of default image field BUT I didn't find any ImageField.

The Problem

Page is showing ImageField but i didn't find any image field in template.

models.py

class Image(models.Model):
    user = models.ForeignKey(User,on_delete=models.CASCADE)
    file = models.ImageField()

  /* The main module for this is external. */
const elements = document.querySelectorAll('[data-js="filter"]');
if (elements.length) {
  import('https://elements.stoumann.dk/assets/js/css-filter.mjs')
    .then(module => {
    const jsClass = module.default;
    elements.forEach(element => {
      new jsClass(element, element.dataset, presets);
    });
  })
}

const presets = [
  {
  "name": "watercolor",
  "description": "",
  "value": "url('#squiggly-1') brightness(1.3) invert(0.17) saturate(2.6) sepia(0.25)",
  "values": [
    {
      "brightness": 1.3,
      "invert": 0.17,
      "saturate": 2.6,
      "sepia": 0.25,
      "url": "url('#squiggly-1')"
    }
  ]
},
{
  "name": "faded-photo",
  "description": "",
  "value": "blur(0.2px) brightness(1.1) hue-rotate(5deg) opacity(0.9) saturate(1.3) sepia(0.4)",
  "values": [
    {
      "blur": 0.2,
      "brightness": 1.1,
      "hue-rotate": 5,
      "opacity": 0.9,
      "saturate": 1.3,
      "sepia": 0.40
    }
  ]
},
{
  "name": "old-horror",
  "description": "",
  "value": "url('#grain') grayscale(1) sepia(0.5) brightness(1.3) invert(0.8)",
  "values": [
    {
      "url": "url('#grain')",
      "grayscale": 1,
      "sepia": 0.5,
      "brightness": 1.3,
      "invert": 0.8
    }
  ]
},


];

<div data-js="filter"

    >
    </div>

I think that the url in the template named https://elements.stoumann.dk/assets/js/css-filter.mjs is externel` js. BUT how can i make changes in externel js ?

What have i tried:-

I tried to put many links but nothing worked for me.

When i try to replace the link then everything disappears in browser.

Any help would be Appreciated.

If someone knows why it is showing and how can i remove it then Please help, I will really appreciated your Help.

Solution

To add a default image field, you can pass the parameter of previewImage with your image path. Even if you have a external js, it allows you to pass you custom parameters and utilizes it during the constructor execution. Just add the attribute data-preview-image as below or refer link:

 /* The main module for this is external. */
const elements = document.querySelectorAll('[data-js="filter"]');
if (elements.length) {
  import('https://elements.stoumann.dk/assets/js/css-filter.mjs').then(module => {
        debugger;
    const jsClass = module.default;
    elements.forEach(element => {
      new jsClass(element, element.dataset, presets);
    });
  })
}

const presets = [
  {
  "name": "watercolor",
  "description": "",
  "value": "url('#squiggly-1') brightness(1.3) invert(0.17) saturate(2.6) sepia(0.25)",
  "values": [
    {
      "brightness": 1.3,
      "invert": 0.17,
      "saturate": 2.6,
      "sepia": 0.25,
      "url": "url('#squiggly-1')"
    }
  ]
},
{
  "name": "faded-photo",
  "description": "",
  "value": "blur(0.2px) brightness(1.1) hue-rotate(5deg) opacity(0.9) saturate(1.3) sepia(0.4)",
  "values": [
    {
      "blur": 0.2,
      "brightness": 1.1,
      "hue-rotate": 5,
      "opacity": 0.9,
      "saturate": 1.3,
      "sepia": 0.40
    }
  ]
},
{
  "name": "old-horror",
  "description": "",
  "value": "url('#grain') grayscale(1) sepia(0.5) brightness(1.3) invert(0.8)",
  "values": [
    {
      "url": "url('#grain')",
      "grayscale": 1,
      "sepia": 0.5,
      "brightness": 1.3,
      "invert": 0.8
    }
  ]
},


];

<div data-js="filter" data-preview-image="https://img.icons8.com/cute-clipart/2x/google-logo.png">
    </div>

Note: A complete example with your external js is available on codepen, you can refer the link: https://codepen.io/stoumann/pen/MWeNmyb