Sending files to different URLs based on their type for upload

I've been working with Jquery File Upload and I've implemented some coffeescript that appears like this:

$('.fileupload').fileupload
dataType: "json"
add: (e, data) ->
    file = data.files[0]
    types = /(\.|\/)(gif|jpe?g|png)$/i

    if (types.test(file.type) || types.test(file.name))
      data.submit()
    else
      alert("Oops, " + file.name + " is not a supported filetype")
  progress: (e, data) ->
  done: (e, data) ->

The main goal here is to redirect files to different URLs based on their type when they are uploaded. For instance, uploading a PDF should be directed to www.website.com/process/pdf, while images such as png/gif/jpeg should go to www.website.com/process/image.

Can this be achieved client-side using jQuery File Upload?

javascriptfilecoffeescriptjquery-file-upload

Answer №1

You have the ability to modify the data object

$('.fileupload').fileupload
  dataType: "json"
  add: (e, data) ->
       file = data.files[0]
       types = /(\.|\/)(gif|jpe?g|png)$/i
       pdf = /(\.|\/)(pdf)$/i

       if (types.test(file.type) || types.test(file.name))
         data.url = 'www.website.com/process/image'
         data.submit()
       else if (pdf.test(file.type) || pdf.test(file.name))
         data.url = 'www.website.com/process/pdf'
         data.submit()
       else
         alert("Oops, " + file.name + " is not a supported filetype")
  progress: (e, data) ->
  done: (e, data) ->

Explore how to dynamically update the upload URL with jQuery File Upload

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

Upon a successful AJAX post request, the page fails to display

I'm encountering an issue connecting my front-end JavaScript to my back-end Node/Express. Although the requests from my client-side js to the server return successful, the page I am requesting fails to render. On the server side, here is my code: ap ...

javascriptjquerynode.jsajaxexpress

inadequate document object module problem

Upon loading a page, I perform some JQuery actions on it. However, when trying to execute the line: var div = $("<div class='modal'>").append(r); I encountered an error mentioning a Hierarchy issue. It made me question if there is imprope ...

javascriptjqueryasp.nethtmldom

Experiencing an "ENOTFOUND" error after attempting to make a large volume of API calls, possibly in the range of 100,000, to maps.google

I have a requirement to send a large number of requests to https://maps.googleapis.com/maps/api/place/queryautocomplete/json. Currently, I am fetching lists of strings from multiple files and sending requests to the mentioned API. When I test with 100 str ...

javascriptnode.jsconcurrencypromiseaxios

Javascript, removeFromString

I'm currently working on a JavaScript function that takes in two strings. The first string is any sentence provided by the user, and the second string consists of letters to be removed from the original sentence. My approach involves converting both s ...

javascriptarraysstringfunction

Can someone provide guidance on utilizing the index correctly within this v-for to prevent any potential errors?

I am encountering an issue with using index in a v-for loop to implement a function that deletes items from an array. The linter is flagging "index is defined but never used" as an error. I am following the instructions provided in a tutorial, but I am un ...

javascriptvue.js

Personalize Drop-Down Selection

Currently implementing bootstrap on a site and seeking to enhance the dropdown menu customization. The default navbar appearance is present, with dropdown elements appearing upon hover. My goal is to include an icon next to each item in the navbar and ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

Error: No route found at this location

I've been following a tutorial on integrating Evernote with IBM's DOORS Next Generation and I added the code highlighted below. // app.js app.get("/notebooks", function(req, res) { var client = new Evernote.Client({ token: req.session.oauth ...

javascriptnode.jsexpressroutesevernote

Update the HTML page when switching between tabs

Currently, I am experiencing an issue with tab navigation in HTML. Within my code, I have two tabs named #tab1 and #tab2, each containing a form. The problem arises when I input data into #tab1, switch to #tab2, and then return to #tab1 - the information I ...

javascriptjqueryhtmltabs

Modify the indentation format in CSS/JS

When the Tab key is pressed in an HTML page and the tabbed link gets highlighted, is it feasible to customize the style of that highlight? ...

javascripthtmlcss

What could be causing the rotation speed discrepancy of (1/2) in Three.js?

I'm currently simulating the earth's rotation on its axis in my project. I calculated that one complete rotation of the earth equals (2*Math.PI) radians, so to determine the earth's rotation per minute (per frame), I used the formula: (2* ...

javascriptrotationthree.jsmodeling

Develop a constructor that can be injected

Delving into the world of AngularJS as a beginner, I am starting to grasp the intricacies and distinctions between factory, service, and controller. From my understanding, a factory serves the purpose of returning a "value object" that can be injected. Mos ...

javascriptangularjs

Experiencing difficulty in choosing an array in Javascript

Currently learning Javascript and working on a project that involves retrieving data from a weather API. Encountered a simple issue that I need help with. Here is the data I managed to fetch so far: {coord: {…}, weather: Array(1), base: "stations", mai ...

javascriptselector

AJAX request is successful, however, the database remains empty with no data being inserted

I have been attempting to utilize ajax and php to insert data into a database, but for some reason, it is not functioning as expected. Despite validating all the itemName, category, and price fields in the html file, the data being inserted into the data ...

javascriptphpjqueryajaxdatabase

The function toDataURL() in Canvas is storing images in low resolution

I created a unique polygonal background generator using HTML5 canvas which can be found at the following link: http://codepen.io/rfalor/pen/LhinJ Here is the important part of the code: var canvas = document.getElementById("canvas"); var ctx = c ...

javascriptjquerycanvashtml5-canvas

What is the appropriate placement for setting Firebase auth state persistence in a Vue.js application?

Welcome Currently working on a web application using Quasar/Vue.js and Firebase that requires user authentication. My Objective I am aiming to implement a common feature - keeping users logged in even after they have closed the browser or tab. Potentia ...

javascriptfirebasevue.jsfirebase-authentication

Utilize new metadata options to incorporate an external style and script file

I'm looking to incorporate external CSS and scripts into my NextJS app (NextJS version 13.4.13). Here's what I need: Style https://company.com/statics/1/package/dist/1/styles/dls.min.css Script https://company.com/statics/1/package/dist/1/ ...

javascriptnext.jsnext.js13

A clock for counting down on statically produced websites

It seems that I have encountered a limitation of statically generated sites. Currently, I am utilizing Gatsby to generate pages in a static manner. The process involves: Pulling data from the CMS where we set an end time for a countdown timer, such as two ...

javascripthtmlreactjsstatic-site-generation

The syntax of React Native's <{}> component structure

After using the command react-native init to create a new React Native project, I noticed that within the default template, the main component class is defined as follows: export default class App extends Component<{}> { ... } The <{}> par ...

javascriptreactjsreact-native

Implementing a Toggle Class Feature in a Function

I am currently facing an issue with a function that triggers an overlay on mouseenter event and needs to be unbound. I want to incorporate a way to close the overlay with a specific 'x' element and allow the user to trigger the event again. Howev ...

javascriptjquerycss

Implementing a Bootstrap datetime picker using the hh:mm:ss time format

I'm currently developing an application and I've run into a roadblock with the datetimepicker feature. I need the datepicker to display the date format as yyyy-mm-dd hh:mm:ss (year, month, and date with the current hour, minutes, and seconds). It ...

javascriptjquerydatetimepickerbootstrap-datetimepicker