Photo Filter Website: Getting the Photos to Filter

Common ways to get photos into your app:

1. Upload from User’s Computer

Allow users to select a photo file from their device using an <input type="file"> element.

Example: Uploading and Displaying User’s Photo for Filtering

How This Works:

User clicks the upload input and selects a photo.
JavaScript reads the file and converts it to a data URL.
The <img> element’s src is set to this URL, showing the photo.
Now you can apply CSS filters or other effects to the loaded photo.

2. Use URLs or API to Load Photos

You can allow users to input a URL of an image or fetch images from online APIs (like Unsplash API) — then set those URLs to the image’s src.

3. Drag and Drop (Advanced)

Allow users to drag an image file onto a drop zone — read the file with similar FileReader logic.

Full Mini Example with Upload + Filter Sliders

html

<input type="file" id="upload" accept="image/*" aria-label="Upload a photo" />

<br /><br />

<img id="photo" alt="Your uploaded photo will appear here" style="max-width: 100%; display: none; border-radius: 8px;" />
<div class="filters" style="margin-top:20px; max-width: 600px;">

  <label>Brightness

    <input type="range" id="brightness" min="0" max="200" value="100" />

  </label>

  <br />

  <label>Contrast

    <input type="range" id="contrast" min="0" max="200" value="100" />

  </label>

  <br />

  <label>Grayscale

    <input type="range" id="grayscale" min="0" max="100" value="0" />

  </label>

  <br />

  <label>Sepia

    <input type="range" id="sepia" min="0" max="100" value="0" />

  </label>

</div>
<script>

  const uploadInput = document.getElementById('upload');

  const photo = document.getElementById('photo');
  const filters = {

    brightness: 100,

    contrast: 100,

    grayscale: 0,

    sepia: 0

  };
  function updateFilters() {

    const filterString = `

      brightness(${filters.brightness}%)

      contrast(${filters.contrast}%)

      grayscale(${filters.grayscale}%)

      sepia(${filters.sepia}%)

    `;

    photo.style.filter = filterString;

  }
  uploadInput.addEventListener('change', (event) => {

    const file = event.target.files[0];

    if (file) {

      const reader = new FileReader();

      reader.onload = function(e) {

        photo.src = e.target.result;

        photo.style.display = 'block';

        updateFilters();

      };

      reader.readAsDataURL(file);

    }

  });

document.querySelectorAll('input[type="range"]').forEach(input => { input.addEventListener('input', e => { filters[e.target.id] = e.target.value; updateFilters(); }); }); </script>

Summary

Use <input type="file"> to let users upload photos.
Use FileReader API to read files and convert to image source URLs.
Once loaded, apply your CSS filters dynamically.
Optionally, enhance UX with drag-and-drop or URL input features.