{"id":5477,"date":"2022-01-13T04:37:42","date_gmt":"2022-01-13T04:37:42","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=5477"},"modified":"2022-01-13T06:01:42","modified_gmt":"2022-01-13T06:01:42","slug":"javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/","title":{"rendered":"Javascript | Check File is viewable or downloadable and take action accordingly"},"content":{"rendered":"

Problem:-<\/strong> We can upload any type of file through PHP. Obviously, we need a web page to view\/download these files later. Sometimes, we apply validation to upload only an image or text or any specific type of file. So, during viewing these files, we are aware that these types of files can be viewable or not on a web page or we need an external library to view such files or some types of files can be downloadable only to view contents of such files. <\/p>\n

But, what could be done if all types of files are allowed to be uploaded through a php web page? There is no restriction on the type of files to be uploaded. Then, we need logic to decide whether a file is viewable or downloadable only. <\/p>\n

Let\u2019s have a look at the following screenshot where a list of all types of uploaded files is displayed:
\nScreenshot 1<\/strong>
\n\"Javascript<\/br>
\nIf file contents can be displayed on HTML div or div container, then it\u2019s ok. For example, image, pdf or text file contents can be easily displayed on any HTML div or bootstrap pop-up modal. The following screenshot shows the image file being opened on the bootstrap modal.<\/p>\n

Screenshot 2<\/strong>
\n\"Javascript<\/br>
\nI have written the following code to display on a pop-up modal using the sweetalert2<\/strong> library. You can use normal html div or bootstrap modal.
\n<div class=\"row\">
\n <div class=\"col-xs-12\">
\n <embed src=\"\/src\/file_path\" frameborder=\"0\" style=\"width:100%;height:500px;\"\/>
\n <\/div>
\n <\/div><\/code>
\nAbove HTML code can be written on the bootstrap modal or any normal div to display the contents of a file.<\/p>\n

But if file contents cannot be displayed on any HTML div or bootstrap modal, then files that are downloadable but cannot be viewable look like as shown in the following screenshot with the above Html code:
\nScreenshot 3<\/strong>
\n\"Javascript<\/br>
\nAs you can see in screenshot 3 the pop-up modal or any HTML<\/a> div is blank and the file is downloading because it can be downloaded only by browser behaviour and cannot be viewable on any web page HTML div. It doesn\u2019t look sound if the modal window or any HTML div is blank. <\/p>\n

So, we need a solution or logic in a way to decide if a file is not viewable and it is only downloadable, then we should not display modal or blank HTML, it should just download only as shown in screenshot 4.
\nScreenshot 4<\/strong>
\n\"Javascript|<\/br>
\nLet\u2019s see how I resolve the blank modal window or blank HTML div issue for downloadable files.
\njQuery.get(file_path, function (response, status, xhr) {
\n if(xhr.getResponseHeader(\"content-type\") === null) {
\n $.notify(\"Invalid File format to read\/view\/download\", \"error\");
\n }
\n else if(xhr.getResponseHeader(\"content-type\") == \"application\/pdf\" ||
\n xhr.getResponseHeader(\"content-type\").indexOf(\"image\") > -1 ||
\n (xhr.getResponseHeader(\"content-type\").indexOf(\"text\") > -1 && xhr.getResponseHeader(\"content-type\") != \"text\/csv\")) {
\n\thtmlContent = `
\n <div class=\"row\">
\n <div class=\"col-xs-12\">
\n <embed src=\"`+file_path+`\" frameborder=\"0\" style=\"width:100%;height:500px;\"\/>
\n <\/div>
\n <\/div>
\n `;
\n Swal.fire({
\n title: \"Files\",
\n html: htmlContent,
\n width: 500
\n });
\n }
\n else {
\n window.open(file_path, '_blank');
\n }
\n }); <\/code><\/p>\n

Let\u2019s have an explanation of the above Javascript code:<\/h2>\n
    \n
  1. if<\/strong> part checks for files that are neither viewable or downloadable and shows an error message<\/li>\n
  2. else if<\/strong> part checks for viewable files.<\/li>\n
  3. The else<\/strong> part downloads the files when files are not viewable on HTML div or container.<\/li>\n<\/ol>\n

    English is a commonly used language in almost all fields today. Having a certification in the English language can enhance your career aspects. StudySection offers both basic level and advanced level English Certification Exams<\/a> to test and certify the English language skills.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

    Problem:- We can upload any type of file through PHP. Obviously, we need a web page to view\/download these files<\/p>\n","protected":false},"author":1,"featured_media":5478,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[752,199],"acf":[],"yoast_head":"\nJavascript | Check File is viewable action accordingly<\/title>\n<meta name=\"description\" content=\"Let\u2019s have an explanation of above Javascript code:- The else part downloads the files when files are not viewable on HTML div or container.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Javascript | Check File is viewable action accordingly\" \/>\n<meta property=\"og:description\" content=\"Let\u2019s have an explanation of above Javascript code:- The else part downloads the files when files are not viewable on HTML div or container.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-13T04:37:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-13T06:01:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/01\/Javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Javascript | Check File is viewable or downloadable and take action accordingly\",\"datePublished\":\"2022-01-13T04:37:42+00:00\",\"dateModified\":\"2022-01-13T06:01:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/\"},\"wordCount\":503,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"File\",\"JavaScript\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/\",\"url\":\"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/\",\"name\":\"Javascript | Check File is viewable action accordingly\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2022-01-13T04:37:42+00:00\",\"dateModified\":\"2022-01-13T06:01:42+00:00\",\"description\":\"Let\u2019s have an explanation of above Javascript code:- The else part downloads the files when files are not viewable on HTML div or container.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Javascript | Check File is viewable or downloadable and take action accordingly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Javascript | Check File is viewable action accordingly","description":"Let\u2019s have an explanation of above Javascript code:- The else part downloads the files when files are not viewable on HTML div or container.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/","og_locale":"en_US","og_type":"article","og_title":"Javascript | Check File is viewable action accordingly","og_description":"Let\u2019s have an explanation of above Javascript code:- The else part downloads the files when files are not viewable on HTML div or container.","og_url":"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2022-01-13T04:37:42+00:00","article_modified_time":"2022-01-13T06:01:42+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/01\/Javascript.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Javascript | Check File is viewable or downloadable and take action accordingly","datePublished":"2022-01-13T04:37:42+00:00","dateModified":"2022-01-13T06:01:42+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/"},"wordCount":503,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["File","JavaScript"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/","url":"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/","name":"Javascript | Check File is viewable action accordingly","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2022-01-13T04:37:42+00:00","dateModified":"2022-01-13T06:01:42+00:00","description":"Let\u2019s have an explanation of above Javascript code:- The else part downloads the files when files are not viewable on HTML div or container.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/javascript-check-file-is-viewable-or-downloadable-and-take-action-accordingly\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Javascript | Check File is viewable or downloadable and take action accordingly"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":377,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5477"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=5477"}],"version-history":[{"count":6,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5477\/revisions"}],"predecessor-version":[{"id":5488,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5477\/revisions\/5488"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/5478"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=5477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=5477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=5477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}