CODEWITHSUNDEEP
javascriptreactjs
jamesrogers
jamesrogers

Reputation: 97

Is there a way to check if file is an image or a video when mapping over an array?

I am working on my Portfolio, and currently i am mapping over an array to create a list of projects that contain multiple images as a Slider(Swiper) Component.

Now what i need would be the possibility to also include videos instead of an image. So i think i might need something that checks if the passed file is an image or a video and then selects the fitting html tag ( / ) Is there a simple way to achieve this?

My Code sample (reduced to relevant parts):

Mapping over a Project Component to generate projects:

{allData.map((project) => (
  <Project id={project.id} text={project.title} vids={project.videos} imgs={project.images} description={project.info} />
))}

Passing the data to the Project Component:

const Project = ({ text, vids, imgs, description }) => {
                        {imgs.map(e => (
                            <SwiperSlide>
                                <div className="image-container">
                                    <img className="image-center" src={e} />
                                    
                                </div>
                            </SwiperSlide>
                        ))}
                        
                        {vids.map(video => (
                            <SwiperSlide>
                                <video src={video} />
                            </SwiperSlide>
                        ))}

What the array looks like:

import img1 from './img/1.jpg';
import img2 from './img/2.jpg';
import img3 from './img/3.jpg';
import video1 from './video/1.mp4';

const allData = [
    {
        id:1,
        images: [img1, img2, img3]
        title: 'Example-title',
    },
    {
        id:2,
        images: [img3]
        videos: [video1]
        title: 'Example-title',
    }
export default allData

Can someone please help me out with this?

Upvotes: 0

Views: 5147

Answers (2)

Ishaili Paul
Ishaili Paul

Reputation: 1

const videoExtensions = ['.mpg', '.mp2', '.mpeg', '.mpe', '.mpv', '.mp4'] //you can add more extensions
const imageExtensions = ['.gif', '.jpg', '.jpeg', '.png'] // you can add more extensions

let status

const isImage = (v) => {
  imageExtensions.map((e) => {
    status = v.includes(e);
  })
  return status
};
const isVideo = (v) => {
  videoExtensions.map((e) => {
    status = v.includes(e);
  })

  return status
};

// To use
console.log(isImage("https://gist-cdn.azureedge.net/videos/20233/94044102-46bf-4a15-a674-48e63fdac6bf.mp4"))

console.log(isVideo("https://gist-cdn.azureedge.net/videos/20233/94044102-46bf-4a15-a674-48e63fdac6bf.mp4"))

Upvotes: 0

Krushal Sonani
Krushal Sonani

Reputation: 11

Try This:

 const isImage = ['.gif','.jpg','.jpeg','.png']; //you can add more
 const   isVideo =['.mpg', '.mp2', '.mpeg', '.mpe', '.mpv', '.mp4'] // you can add more extention
    
//merge image and video in single array

const Project = ({ text, files, description }) => {
                        {files.map(e => (
                            <SwiperSlide>
                                <div className="image-container">
                                   { isImage?.includes(e) && <img className="image-center" src={e} />  }
                                      {isVideo?.includes(e) && <video src={e} />  }
                                </div>
                            </SwiperSlide>
                        ))}
}

Thanks.

Upvotes: 1

Related Questions