File Api should delete preview when button is clicked

Question

I'm trying to build a file upload and would like the preview to be cleared after clicking on the grey "Clear Content" button (it's in German). The file input element empties itself but the preview does not update itself.

Here is my Code:

function handleFileSelect(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 thumbnail.
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb" src="', e.target.result,
                          '" title="', escape(theFile.name), '" style=" height: 100px; max-width: 150px; border: 1px solid #000; margin: 10px 5px 0 0;"/>'].join('');
        document.getElementById('list').insertBefore(span, null);
      };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

My HTML Modal from Bootstrap 5

<div class="form-check">
  <div class="input-group">
      <!--<input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg,image/gif,image/png,application/pdf" multiple="multiple"/>-->
      <button type="button" class="btn btn-outline-send" data-bs-toggle="modal" data-bs-target="#exampleModal">
      <i class="fas fa-upload fa-2x"></i>
          <!--Dokumente hochladen-->
      </button>
      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Bitte wählen Sie aus, welche Dokumente Sie hochladen möchten.</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            <input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg, image/jpg, image/gif, image/png, application/pdf" multiple="multiple" value=""/>
            <output id="list"></output>
            <small>
                <strong>
                    <br>
                    Hinweis: Es können <u>maximal 19</u> Dateien aufeinmal versendet werden! <br>Unterstützte Dateiformate: PDF, JPG und PNG
                  </strong>
              </small>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-outline-send" data-bs-dismiss="modal">Weiter</button>
            <button type="button" id="clearFiles">Inhalte löschen</button>
              <!--<button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

And a picture of how it looks at the moment example Image

Answer 1

I added an event listener for the Inhalte löschen button:

// To clear the images
document.querySelector("#clearFiles").addEventListener("click", function(){
  document.querySelector("#list").innerHTML = "";
});

Notice that I also changed the .insertBefore(span, null); in favour of .append(span). So now the images are append INTO the #list div instead of BEFORE it. It makes it way easier to clear the whole content of #list.

function handleFileSelect(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 or PDF files.
    if (!f.type.match('image.*') && !f.type.match('pdf')) {
      console.log(f.type)
      continue;
    }
    
    // A flag to know if the file is an image or a PDF
    let source_is_image = true;
    if(!f.type.match('image.*')){
      source_is_image = false;
    }

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        
        // Based on the flag, decide to use the image or the PDF logo
        var file = source_is_image ? e.target.result : "https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg";
        
        span.innerHTML = ['<img class="thumb" src="', file, '" title="', escape(theFile.name), '"/>'
          ].join('');
        document.getElementById('list').append(span);
      };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

// To clear the images
document.querySelector("#clearFiles").addEventListener("click", function(){
  document.querySelector("#list").innerHTML = "";
});

/* This can be in the CSS instead of inline style */
.thumb{
  height: 100px;
  max-width: 150px;
  border: 1px solid #000;
  margin: 10px 5px 0 0;
}

<div class="form-check">
  <div class="input-group">
    <!--<input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg,image/gif,image/png,application/pdf" multiple="multiple"/>-->
    <button type="button" class="btn btn-outline-send" data-bs-toggle="modal" data-bs-target="#exampleModal">
      <i class="fas fa-upload fa-2x"></i>
      <!--Dokumente hochladen-->
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Bitte wählen Sie aus, welche Dokumente Sie hochladen möchten.</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <input type="file" class="form-control" id="files" name="uploaded_file[]" accept="image/jpeg, image/jpg, image/gif, image/png, application/pdf" multiple="multiple" value="" />
            <output id="list"></output>
            <small>
              <strong>
                <br>
                Hinweis: Es können <u>maximal 19</u> Dateien aufeinmal versendet werden! <br>Unterstützte Dateiformate: PDF, JPG und PNG
              </strong>
            </small>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-send" data-bs-dismiss="modal">Weiter</button>
            <button type="button" id="clearFiles">Inhalte löschen</button>
            <!--<button type="button" class="btn btn-primary">Save changes</button>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>