Is there a way in which when I upload a image it'll redirect to another tab and my page redirects there on uploading image?

Question

So basically what I'm trying to do is that I'm making a component like WordPress uploading images. When I upload an image my tab section automatically changes to the second tab on uploading and it'll stack there in my images gallery 'div'.I have uploaded the image to another tab section but redirecting isn't performed I have to click other tab to see the uploaded image and the rest of the images aren't showing the style I added on the active image is also not getting.

HTML Reference

JS for Reference

// gallery start
let files = [], // will be store images
form = document.querySelector(".browse-area"),
container = document.querySelector(".img-container"),
text = document.querySelector(".inner"),
browse = document.querySelector(".select"),
input = document.querySelector(".browse-area input");

browse.addEventListener("click", () => input.click());

 // input change event
input.addEventListener("change", () => {
let file = input.files;

for (let i = 0; i < file.length; i++) {
    if (files.every((e) => e.name !== file[i].name)) files.push(file[i]);
}

// form.reset();
showImages();
});

 const showImages = () => {
 let images = "";
 files.forEach((e, i) => {
    images += `
            
            
                
            
        `;
 });

 container.innerHTML = images;
 };

 const delImage = (index) => {
 files.splice(index, 1);
 showImages();
  };

 // drag and drop
 form.addEventListener("dragover", (e) => {
 e.preventDefault();

 form.classList.add("dragover");
 text.innerHTML = "Drop images here";
 });

 form.addEventListener("dragleave", (e) => {
 e.preventDefault();

 form.classList.remove("dragover");
 text.innerHTML =
    'Drag & drop image here or Browse';
  });

  form.addEventListener("drop", (e) => {
  e.preventDefault();

  form.classList.remove("dragover");
  text.innerHTML =
    'Drag & drop image here or Browse';

  let file = e.dataTransfer.files;
  for (let i = 0; i < file.length; i++) {
    if (files.every((e) => e.name !== file[i].name)) files.push(file[i]);
   }

  showImages();
  });
  // gallery end

Result

Is there a way in which when I upload a image it'll redirect to another tab and my page redirects there on uploading image?

0 Answers