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

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?

CodePudding user response：

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.

CodePudding user response：

Unique file type specifiers A unique file type specifier is a string that describes a type of file that may be selected by the user in an element of type file. Each unique file type specifier may take one of the following forms:

A valid case-insensitive filename extension, starting with a period (".") character. For example: .jpg, .pdf, or .doc. A valid MIME type string, with no extensions.

The string audio/* meaning "any audio file".

The string video/* meaning "any video file".

The string image/* meaning "any image file".

The accept attribute takes as its value a string containing one or more of these unique file type specifiers, separated by commas. For example, a file picker that needs content that can be presented as an image, including both standard image formats and PDF files, might look like this:

<input type="file" accept="image/*,.pdf">

Straight from MDN Docs