Discovering the file extension and ensuring its validity when imported from Google Drive

I am facing an issue with a select tag that has 3 options: powerpoint, pdf, and spreadsheet. When uploading from Google Drive, there is no validation in place, so I can give a ppt link to the pdf option and it will still upload. Can someone help me with validating this?

Here is my code:

<div class="row widget-row" ng-if="mediaData.mediaType == 14">
     <div class="form-group">
         <label>Document Type*</label> 
         <select class="form-control" ng-model="mediaData.googleDocType" required>
              <option value="0" >Powerpoint</option>
              <option value="2" id="spreadsheet">Spreadsheet</option>
              <option value="3">PDF</option>
         </select>
     </div>
</div>

<div class="row widget-row" ng-if="mediaData.mediaType == 14">
     <div class="form-group">
           <label>Link *</label> 
           <input type="text" class="form-control" ng-model="mediaData.docLink" required>
     </div>
</div>

And here is the AngularJs code:

case '14' : $scope.googleDocumentObject = new GoogleDocumentObject();
                if(mediaData.googleDocType == 0){
                    $scope.googleDocumentObject.source = mediaData.docLink;
                    $scope.googleDocumentObject.attributes.documentType = 0;
                    $scope.updateProgram("googlePPT",$scope.googleDocumentObject,1,$scope.cssObject);
                }
                else if(mediaData.googleDocType == 1){

                    $scope.googleDocumentObject.source = mediaData.docLink;
                    $scope.googleDocumentObject.attributes.documentType = 1;
                    $scope.updateProgram("googleDocument",$scope.googleDocumentObject,1,$scope.cssObject);
                }
                else{
                    $scope.googleDocumentObject.source = mediaData.docLink;
                    console.log($scope.googleDocumentObject.source);
                    $scope.googleDocumentObject.attributes.documentType = 2;
                    $scope.updateProgram("googleDocument",$scope.googleDocumentObject,1,$scope.cssObject);
                }
                break;

Answer №1

Retrieve the file extension from the provided link by using mediaData.link.split('.').pop(); or implement a custom function with regex. The custom function will output a boolean value to verify its validity based on the mediaData.googleDocType enum.

case '14':
  $scope.googleDocumentObject = new GoogleDocumentObject();
  var isValid = CheckIfValidFile(mediaData);
  if (isValid) {
    //Proceed with upload
  }
  break;

function CheckIfValidFile(mediaData) {
    var ext = mediaData.link.split('.').pop();
    //Alternatively, use the regex method below
    var re = /(?:\.([^.]+))?$/;
    var ext = re.exec(mediaData.link)[1];

    if ((ext === 'ppt' || ext === 'pptx') && mediaData.googleDocType == 0) {
      return true;
    } else if((ext === 'doc' || ext === 'docx') && mediaData.googleDocType == 1) {
      return true;
    } else if(ext === 'pdf' && mediaData.googleDocType == 2) {
      return true;
    }
    return false;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving data using a class in an AJAX form submission

I am attempting to use AJAX to submit an HTML form. Here is my HTML: <form class="lyrics"> <input type="text" value="" id="song" name="song"> <button type="submit" class="btn btn-info lirik">lyrics</button> </form> ...

Tips for updating Angular HTML with data received from Socket.IO

I am currently working on a socket program that is listening and providing log data. The socket is sending the correct data as I can see it in the console. Below is a snippet of my code: export class RoboLogComponent implements OnInit { dataToShow:any @V ...

Simplified user interface for detecting radio button clicks

Currently working on a form that includes radio buttons, where an update function is triggered whenever there is a user input change. The challenge I am facing is how to incorporate user-friendly radio buttons with a larger button area encompassing both t ...

View the picture directly on this page

Currently, I am in the process of creating a gallery and I would like the images to open on top of everything in their original size when clicked by the user. My expertise lies in HTML and CSS at the moment, but I am open to learning JavaScript and jQuery ...

Unable to reach the prototype of the object

I am encountering an issue while attempting to access the object's prototype in a Node.js code. The objective is to send this object through an API so that users can utilize its methods. The problem lies in the fact that the returned object only inclu ...

Guide to connecting two geometric shapes together with the help of three.js

Is there a way to link two spheres together with a line? I'm looking for a solution that mimics two balls connected by a rope or something elastic. Does anyone have any examples to share? ...

Manipulate the visibility of div sections depending on the selected price and category checkboxes using JavaScript

I have a unique div setup where I'm defining data attributes to display a product list. Each div contains data attributes for category (data-category) and price (data-price). I want to be able to show or hide specific divs based on selections made usi ...

Error: Validation error encountered while validating recipe: _listId field is mandatory and must be provided

As a newcomer to node.js, I am attempting to create a cookbook restful API using nodejs. The goal is to have a list of recipes where each recipe is associated with a specific list selected by its id. However, I am encountering an issue while trying to retr ...

React Material UI issue: You cannot render objects as a React child. If you intended to display a group of children, make sure to use an array instead

I am encountering an issue with the code provided below and despite trying various fixes, I am unable to resolve it. componentDidMount() { axios.get('http://localhost:8080/home') .then((response) => { this.setState({ ...

Creating an event emitter instance

I'm intrigued by the process of objects transitioning into event emitters. The documentation showcases code that resembles the following: var EventEmitter = require('events').EventEmitter; function Job(){ EventEmitter.call(this); } I fi ...

Attempting to execute JavaScript within HTML files that have been incorporated using Angular

My website has a menu designed in HTML, and instead of manually adding it to each page (which would make updating changes tedious), I am using Angular to include it dynamically (<div ng-include="menu.html"></div>). I've got some JavaScrip ...

What is the best way to extract data from the ajax.done() function?

My question revolves around the function shown below: $.ajax({ url: "../../getposts.php" }).done(function(posts) { var postsjson = $.parseJSON(posts); }); I am wondering how I can access the variable postsjson outside of the .done() function sco ...

Error message displaying "Invalid ID attribute in HTML 5 input"

On my website, I have a page with multiple items, each containing an HTML5 input field. Whenever a user changes the value of the input, it triggers an AJAX call to the server. The server then responds with JSON data, including an array of items that have ...

What are the advantages of using React JS for a Single Page Application compared to server-side rendering?

Currently, I am faced with a conundrum when it comes to selecting the best approach for a highly scalable project. On one hand, server-side rendering using Node.js with Express (utilizing EJS) to render full HTML pages is an option. On the other hand, ther ...

Show the res.send() method from express.js without replacing the existing html content

Currently, I am in the process of developing a calculator application using express.js. The app needs to handle get requests for an HTML file and post requests that capture user input and provide the response accurately. My challenge lies in showcasing the ...

The color of the letters from the user textbox input changes every second

My task is to create a page where the user enters text into a textbox. When the user clicks the enter button, the text appears below the textbox and each letter changes color every second. I am struggling with referencing this jQuery function $(function() ...

Passing URL parameters from App.js to routes/index.js

I have a URL that looks like this: http://localhost:3000/?url=test In my Express application's app.js file, I'm attempting to extract the "test" parameter from the URL and pass it to my routes/index.js. Currently, I can easily send a static var ...

Troubles encountered with switching npm registry

In my Vue 2.7 project with vuetify, I initially installed dependencies using a custom local npm registry, acting as a proxy to the default npm. As the project has expanded, I've started using git actions to deploy to a development server, with varying ...

How to use jquery and ajax to retrieve an array of data and show it on the screen

I am facing an issue with my ajax request. Actually, I am unsure of how to fetch multiple records. I attempted the following: $rqt = "SELECT a,b,c from table"; $res = mysql_query($rqt); while ($data = mysql_fetch_assoc($res)): $objet = $d ...

Is there a way to identify a change in the URL using JQuery?

My goal is to clear the localStorage when a user navigates to a different page. For instance, if I am currently on . When the user goes to the URL, , I want to clear the localStorage. This is my script using JQuery. $(window).unload(function(){ if ...