File extension validation using javascript in MVC

-
This is article which demonstrate the validation of allowed file extension for upload of files in MVC using javascript. In this article i have used validation for valid image format like Jpeg, Jpg,Gif and png image format. If users ties to upload any other file apart from above mentioned file then the javascript function will shows proper message to user to select appropriate files.

 I have used html input file control for uploading of files in MVC application.

 following is the html code for it.


<body>
    <div style="height:50px; padding-bottom:20px;">
      @using (@Html.BeginForm("Create","FileUpload",FormMethod.Post,new{ enctype = "multipart/form-data"}))
{

<input type="file" id="file1" name="sdf" style=" margin-top:0px;" onchange="if( CheckExtention(this.value) ) {parent.ShowHideImage(true);this.form.submit();}" />



}
  
    </div>
</body>

and following is the javascript code to implement the validation


<script type="text/javascript">
  

    function CheckExtention(file)
    {
 var ext=  file.substr(file.lastIndexOf('.'),4).toLowerCase();
 
    if(ext!='.jpg' && ext!='.png' && ext!='.jpeg' && ext!=".gif")
    {
        alert('Only Jpg,png,Jpeg,or gif format allowed');
        
        var file = document.getElementById("file1");
        file.value = "";
        return false;

    }
    else 
    {
        return true;
    }

    }

</script>

I hope all you guys understood the concept.

Kindly let me know if you have any queries

Comments

Post a Comment

Popular posts from this blog

Use Chroma DB vector database in RAG application using llama index & Deepseek R1 local model

-
Image
 In previous article I have explained how to install Deepseek R1 model locally and create the RAG application using the locally downloaded models step by step. In this article I will explain Step-by-step to use the Chroma DB vector database in RAG application using llama index & Deepseek R1 local model with Ollama. Chroma DB is open source vector db which can be used to store the vector embeddings of documents and query the embeddings based on user query. I have used the same example used in previous article and added only Chroma DB integration code.   Prerequisites for this example is as follows: Visual studio code Python Ollama  Open visual studio code and create the file with name "sample.py". Now in visual studio code and go to terminal menu and click on New terminal link it will open new terminal. In terminal enter below command to install the LlamaIndex library, Chroma DB library, LlamaIndex Ollama and  LlamaIndex embedding Ollama library in your mac...
Read more

I have created an application to extract text from image using AI

-
Image
 In this article, I am going to demonstrate how text is getting extracted from image file using Gemini AI model. Also, will explain how the application is developed with the help of chat GPT and some custom code.     Very first i gone to chatGPT application and added below prompts so that my application structure i can get the application code to start with. Following is the screenshot of the prompt i have written and answer given by chatGPT.    I have copied the code given by chat gpt and modified as per my requirement that means i got 70 to 80 percentage code to develop the application. Following are the Prerequisites required for development of this application : Visual studio code Python Api Key of Gemini can be obtain from https://aistudio.google.com    Open visual studio code and create the file with name " imagetextextractapp .py". Now in visual studio code and go to terminal menu and click on New terminal link it will open new terminal. In t...
Read more

Download DeepSeek R1 Model Locally free | AI RAG with LlamaIndex, Local Embedding and Ollama

-
Image
In this article I will explain Step-by-step to locally download and use the DeepSeek R1 Model with Ollama for free! and also explain how to set up AI-powered Retrieval Augmented Generation (RAG) using the nomic-embed-text:latest  embedding model and run the DeepSeek R1 Model locally via Ollama .   Prerequisites for this example is as follows: Visual studio code Python Ollama  Open visual studio code and create the file with name "sample.py". Now in visual studio code and go to terminal menu and click on New terminal link it will open new terminal. In terminal enter below command to install the LlamaIndex library and LlamaIndex Ollama and  LlamaIndex embedding Ollama library in your machine. pip install llama-index llama-index-llms-ollama llama-index-embeddings-ollama Create the folder named "doc" in root directory of the application as shown in below image and store the documents you want to query.   To get Ollama models list you can visit ollama ...
Read more

Understanding the Singleton Design Pattern in C#

-
Image
The Singleton design pattern is one of the most widely used creational design patterns. It ensures that a class has only one instance while providing a global point of access to it. This is particularly useful when exactly one object is needed to coordinate actions across the system. In this blog post, we will explore the Singleton pattern in C#, understand why it’s useful, and review various implementations including thread safety and the usage of the Lazy<T> class. We will also look at how each of these approaches works with example code. Why Use the Singleton Pattern?   The primary purpose of the Singleton pattern is to control object creation by limiting the number of instances to just one. Some of the common use cases include: Configuration management: A centralized configuration object that needs to be accessed across different parts of the application. Logging: Logging systems should have a single instance for maintaining a consistent log throughout the application. C...
Read more

Create Chat bot application using Python, Streamlit and Gemini AI

-
Image
In this article I am going to explain creating chat bot application using Python, Streamlit library and Gemini AI. In this chat bot application application will be self host with specific port on computer ad can be accessible from browser.     following Prerequisites required for development of this application : Visual studio code Python Api Key of Gemini can be obtain from https://aistudio.google.com    Open visual studio code and create the file with name "chatbot.py". Now in visual studio code and go to terminal menu and click on New terminal link it will open new terminal. In terminal enter below command to install the Google generative AI library and steamlit library in your machine.   pip install google-generativeai langchain-google-genai streamlit   Now copy below code and paste in the " chatbot .py" file. import streamlit as st import google.generativeai as genai genai.configure(api_key="enter your key obtain from aistudio.google.com...
Read more