I am using react-image-lightbox for carousel in my app. How to make this component identify the type of the content like Video, Images or PDFs,Excels, or Texts. Currently it is working with images only. Please help. Thanks
We need to filter the type according to extension type and then pass it to carousel. For example:
getCrouselItems(documents){
var items=[];
documents.forEach(element => {
switch(CommonUtils.getFileFormat(element)){
case "image":
items.push(AjaxUtils.getImageURL(element));
break;
case "video":
var videoUrl=AjaxUtils.getImageURL(element);
items.push(<video className="attachments" controls><source src={videoUrl}/>
</video>)
break;
case "pdf":
items.push(<img className="attachments" src={pdf}></img>)
break;
case "excel":
items.push(<img className="attachments" src={excel}></img>)
break;
case "word":
items.push(<img className="attachments" src={text}></img>)
break;
case "others":
items.push(<img className="attachments" src={excel}></img>)
break;
default:
}
});
return items;
}