There is input image field without any input image

Question

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.

wahab memon · Accepted Answer · 2021-04-03T13:44:23.390

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

BUT how can i add my `model instance` at the place of `ImageField` ? My instance name is **file** — Lars, Apr 03 '21 at 16:44
Where have you defined this model? Is there any sample to which i can refer? — wahab memon, Apr 03 '21 at 16:48
I want to use the filters and save it into `DataBase` and i can only do that with access the models image instance in html. — Lars, Apr 03 '21 at 16:54
Okay, so this you have done in python as well, am not well versed with that. I think you need to update your tags and provide python it it and it would be better if you update the description about how to bind your model with imageField or the input file type. — wahab memon, Apr 03 '21 at 17:07
Well Thanks for your Time and Help. And also do you know any tutorial or github code that have `image filter and effects` ? Thanks Again. — Lars, Apr 03 '21 at 17:10

There is input image field without any input image

1 Answers1