File Api should delete preview when button is clicked-CodePudding

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  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 >
                            <div >
                                <!--<input type="file"  id="files" name="uploaded_file[]" accept="image/jpeg,image/gif,image/png,application/pdf" multiple="multiple"/>-->
                                <button type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal">
                                <i ></i>
                                    <!--Dokumente hochladen-->
                                </button>
                                <!-- Modal -->
                                <div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div >
                                    <div >
                                      <div >
                                        <h5  id="exampleModalLabel">Bitte wählen Sie aus, welche Dokumente Sie hochladen möchten.</h5>
                                        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
                                      </div>
                                      <div >
                                      <input type="file"  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 >
                                      <button type="button"  data-bs-dismiss="modal">Weiter</button>
                                      <button type="button" id="clearFiles">Inhalte löschen</button>
                                        <!--<button type="button" >Save changes</button>-->
                                      </div>
                                    </div>
                                  </div>
                                </div>
                            </div>
                        </div>

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

CodePudding user response：

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 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  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').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 = "";
});

<div >
  <div >
    <!--<input type="file"  id="files" name="uploaded_file[]" accept="image/jpeg,image/gif,image/png,application/pdf" multiple="multiple"/>-->
    <button type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal">
      <i ></i>
      <!--Dokumente hochladen-->
    </button>
    <!-- Modal -->
    <div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div >
        <div >
          <div >
            <h5  id="exampleModalLabel">Bitte wählen Sie aus, welche Dokumente Sie hochladen möchten.</h5>
            <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div >
            <input type="file"  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 >
            <button type="button"  data-bs-dismiss="modal">Weiter</button>
            <button type="button" id="clearFiles">Inhalte löschen</button>
            <!--<button type="button" >Save changes</button>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>