JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>
    <br /><br /><br /><br />
<form id="form">
  <h3>
  
  </h3>
    <div class="input-container">
        <label class="input-label">Invert</label>
        <input id="invert" name="invert" type="text" value=".5" placeholder="invert: .5"/>
    </div>
    <div class="input-container">
        <label class="input-label">Sepia</label>
        <input id="sepia" name="sepia" type="text" value="1" placeholder="sepia: 1"/>
    </div>
    <div class="input-container">
        <label class="input-label">Saturate</label>
        <input id="saturate" name="saturate" type="text" value="5" placeholder="saturate: 5"/>
    </div>
    <div class="input-container">
        <label class="input-label">Hue Rotate</label>
        <input id="hue-rotate" name="hue-rotate" type="text" value="175" placeholder="hue-rotate: 175"/>
    </div>
    <input type="submit" />
</form>

<div id="output-container">
    Output CSS Filter:
    <input type="text" id="output-code" />
</div>

CSS

.image {
        width: 150px;
        height: 150px;
    }
    
    #output-container {
      margin-top: 50px;
    }
    
    input#output-code {
      width: 100%;
    }

JavaScript

const submitForm = (event) => {
            const svg = document.getElementById('svg');
            const formElement = document.getElementById('form');
            const invert = formElement.querySelector('#invert').value;
            const sepia = formElement.querySelector('#sepia').value;
            const saturate = formElement.querySelector('#saturate').value;
            const hueRotate = formElement.querySelector('#hue-rotate').value;
            svg.style.cssText = 'filter: invert(' + invert + ') sepia(' + sepia + ') saturate(' + saturate + ') hue-rotate(' + hueRotate + 'deg)';
            document.getElementById('output-code').value = svg.style.cssText;
            event.preventDefault();
            
        }
        const onFileUpload = (evt) => {
            var files = evt.target.files; // FileList object

            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0, f; f = files[i]; i++) {

             // Only process image files.
             if (!f.type.match('image.*')) {
               continue;
             }

             var reader = new FileReader();

             // Closure to capture the file information.
             reader.onload = (function(theFile) {
               return function(e) {
              // Render SVG.
                const svg = document.getElementById('svg');
                let originalImage = document.getElementById('originalImage');

                const image = svg ? svg : document.createElement('img');
                originalImage = originalImage ? originalImage : document.createElement('img');

                image.src = e.target.result;
                image.id = 'svg';
                image.className = 'image';
                image.title = encodeURIComponent(theFile.name);
                image.style.cssText = 'filter: \'\'';

                originalImage = image.cloneNode(true); // clone image
                originalImage.id = 'original-image';

               ...