Ensure the correct file extension is chosen when selecting a file for the 'file_field' and display any error messages using Ruby on Rails

I am currently using Ruby on Rails 3 and Prototype, and I need to be able to check the file extension when a file is selected with file_field. I only want to allow files with extensions of .doc or .pdf, any other extensions should display an error.

In my view file, I currently have the file_field set up like this:

page.event.observe('file_field_id', 'change') do |element|
  # Need code here to check the file extension
  # If it's not '.doc' or '.pdf', show an error in the 'error_id'
end

After selecting a file, I need to verify that the file has either a .doc or .pdf extension. If not, I want to set and display an error message in the error_id.

How can I achieve this?

UPDATE: I specifically require the use of the Prototype framework. Is this possible?

javascriptruby-on-railsrubyajaxprototype

Answer №1

Use regular expressions in JavaScript to extract the file extension.

var extens = (/[.]/.exec(myFile)) ? /[^.]+$/.exec(myFile) : undefined;

Here, myFile represents the file's address or path. This code snippet isolates the text after the last period in the string. You can then add conditionals for further control:


if(extens == "doc" || extens == "pdf") {
       // your logic here
} else {
       errorId = ...
}

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

Experiencing Issues with Sending Form Requests using Jquery/JSON in PHP backend

I'm currently facing an issue with posting data from my form to my PHP file using AJAX/JSON. When I click the submit button, nothing happens apart from the client-side jQuery error checking on the field. I've tried various methods to make it work ...

phpjqueryajaxjsonajaxform

Creating sequential numbers using jQuery

Recently, I worked on a script (credit to Chyno Deluxe) that generates a list of menu items based on what is written in the input box. However, I now have a new requirement which involves generating a sequence of numbers to be added continuously. Here is ...

javascriptjqueryhtmlcss

The specified type argument is not compatible with the ObservableInput<any> type

Struggling with an issue where the argument type (key:string) => Observable | PayloadType | is causing problems when trying to assign it to a parameter of type '(value: string, index: number) => ObersvableInput' return action$.pipe( fil ...

javascriptreactjstypescriptobservablemergemap

"The event triggers the function with an incorrect parameter, leading to the execution of the function with

Currently, I am working with a map and a corresponding table. The table displays various communities, each of which has a polygon displayed on the map. My goal is to have the polygons highlighted on the map when hovering over a specific element in the tabl ...

javascripthtmldom-events

Selection Change Event for Dropdown Menu

Just starting to learn JavaScript and currently working with 3 select elements on a JSP page: <select id="railwayServiceList" name="railwayService_id" onchange="changeCompaniesCombo()"></select> <select id="companyList" name="company_i ...

javascriptjsp

Top pick for building drag-and-drop web applications: the ultimate JavaScript library

Up to this point, I've relied on jQuery UI's draggables and droppables for my projects. However, I recently came across ExtJS and other libraries that caught my interest. I am aiming to create a professional-grade plugin. Can anyone suggest the b ...

javascriptjqueryjquery-uiextjs

Preserve final variable state - Angular

My function looks like this: flag: boolean = false; some_function(){ var foo = some_num_value; var bar = foo; // Storing value in a separate variable if(this.flag){ v ...

javascriptangulartypescriptvariablessave

Is it possible to incorporate an element using absolute positioning using jQuery or Javascript?

When trying to add a new element on the screen, I am facing an issue with the absolute positioning not working properly. Sample Code in Javascript function drawElement(e,name){ $("#canvas").append("<div id='" + name + "' class='e ...

javascriptcsscss-position

Issues with jQuery ajax when trying to access remote JSON data

Even though I receive a json response when entering the URL in my browser, I am unable to access it using my code. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $.ajax({ url:"http ...

jqueryjsonajax

Javascript keycode used to target the element when a key is pressed

In my current project, I am utilizing a code snippet to attach a KeyDown event handler to any element within the HTML form. for(var i=0;i<ele.length;i++) { ele[i].onkeydown = function() { alert('onkeydown'); } } I am ...

javascripthtmldom

Effortlessly fill dropdown menus with data from JSON files

I've been using this jQuery code successfully, but I recently needed to add 3 more field columns to the JSON. My goal is to have the HTML select drop-downs dynamically change based on the data from the previous drop-down. Additionally, my current jQue ...

javascriptjqueryhtmljson

Having trouble getting a local npm installation to work from a specific file path?

After following the instructions from this helpful link to install an npm package through a file path, I encountered an error when attempting to use it: Cannot find module '<module_name>' or its corresponding type declaration Are there an ...

javascripttypescriptnpm

Troubleshooting VueJS route naming issues

I am having an issue with named routes in my Vue app. Strangely, the same setup is working perfectly fine in another Vue project. When I click on a named router-link, the section just disappears. Upon inspecting the element in the browser, I noticed there ...

javascriptvue.jsvue-router

Unable to retrieve a substring value in Angular using Typescript

html <p> <input type="text" maxlength="40" (input)="recipientReference = deleteSpacing(recipientReference)" [(ngModel)]="recipientReference" style="width: 30vw; padding: 5px;border: 1px solid;border ...

javascriptangulartypescript

Jquery Plugin for Click Selection Activation

After receiving no response to my previous inquiry, I decided to proceed with this particular plugin setup. (function ( $ ) { $.fn.myPlugin = function (options) { options = $.extend( {}, $.fn.myPlugin.defaults, options ); return this.each(function (i ...

javascriptjqueryjquery-plugins

Unable to submit form in Node.js with Express

I am just starting out with node.js and I need help with a sample form to insert values into a database. Below is the code snippet for my test page: <form action="/create" method="POST" class="form-horizontal" enctype="application/x-www-form-urlencode ...

javascriptnode.jsexpress

Utilizing express.js alongside the native MongoDB driver: A comprehensive guide

I'm facing difficulties when attempting a simple mongoDB query from my express app: app.js var express = require('express'); var routes = require('./routes'); var user = require('./routes/user'); var http = re ...

javascriptmongodbexpress

Enhancing Material-UI component [TreeView] with drag and drop functionality using react-dnd

I have encountered an issue with my TreeView implementation. Whenever I try to drag and drop a TreeItem, all of its child TreeItems move along with it. Is there a way to enable drag'n'drop functionality for just one TreeItem without affecting its ...

javascriptreactjsmaterial-uireact-dnd

Switching code from using .hover() to using .click() while still maintaining the functionality of both.orChanging code to switch

How can I change this script to trigger on click and also maintain the hover functionality: $x = jQuery.noConflict(); $x(document).ready(function () { $x(".swatch-anchor").on('click hover', function () { var newTitle = $x(this).attr( ...

javascriptjquery

React Component Functions for Export and Import

Currently working on a webapp built with React. My main component is defined in App.js, while I have another subcomponent responsible for creating buttons, like the logout button generated by renderLogoutButton(). But now, I want to reuse this function in ...

javascriptreactjsexportreact-component