Efficiently passing multiple files with Rails using jQuery/Ajax and API

I'm currently utilizing the FileStack API along with the filepicker gem in my project. The JavaScript snippet provided below is responsible for parsing a JSON response from the browser and forwarding it to the create action of the Attachment controller in Rails. My goal is to enhance this functionality to support the upload of multiple files, which would result in the creation of multiple attachment models. Ultimately, I aim for all the uploaded files to be saved upon form submission. While the existing code successfully handles single file uploads, I am seeking assistance to enable drag-and-drop functionality for multiple files. Any assistance on this matter would be highly appreciated.

<%= simple_form_for @attachment, :html=> { id: 'file_stack_form' } do |f| %>

<%= f.filepicker_field :title, multiple: 'true', onchange: 'onUpload(event)' %>
<% end %>

<script>
  function onUpload(event) {
  var fileNumber = event.fpfiles.length;
  var url = event.fpfile.url;
  var name = event.fpfile.filename;
  for (var i = 0; i < fileNumber; i++) {
    jQuery.ajax({
    data: { "attachment[name]": name, "attachment[title]" : url },
    type: 'post',
    url: "/attachments"
  });
  success: $('#file_stack_form').submit();
 }

}

Answer №1

Which kind of :title is associated with this field? I chose to store multiple image files in my PostgreSQL database using the json data type when utilizing the carrierwave gem for uploading.

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

Displaying various images within a bootstrap modal window

I'm facing an issue with my gallery. It contains small images, and when a user clicks on a thumbnail, a modal should open with the full-size image. The problem is that even though I have the full-size images stored in the "/uploads/" folder and the th ...

Guide to updating the object value within an array in React

Is there a way to toggle the value of a specific object key called "clicked" to true using the spread operator in React? I want to be able to press a button and update the object's value. let questions = [ { title: "What do I want to learn ...

Remove item from jQuery's "raw text" HTML

Suppose I have the following JavaScript string: var string = '<div id="div1"><div id="div2"></div></div>'; Is it possible to utilize jQuery in order to create a new string as shown below? var newString = '<div i ...

What is the best way to add an element directly following another within the document's head section?

In my HTML project, I am using JavaScript to insert style elements into the head section. I have implemented a function that should inject styles into a specific id within the head tags. This is a snippet of my current HTML code: function insertAtElemen ...

Displaying markers on a Google map by fetching data from a MySQL database in PHP

The image attached here serves as an example. You can view it here. Currently, I display locations on a map in an HTML page with static code like: Here is the JavaScript code to load the map on the page: <script type="text/javascript" src="https://ma ...

Ajax is not able to trigger a POST request to a PHP form

My form is not posting for some unknown reason, despite everything else on my server functioning properly. Below is the code snippet in question: PHP <?php if(isset($_POST['field1']) && isset($_POST['field2'])) { $data ...

Difficulty of combining forEach with findById in mongoose

I need to create a Node route that adds properties to objects and pushes them onto an array declared outside a forEach loop. I have noticed that while the array appears to be filled with data when I log it within the loop, it somehow becomes empty when I r ...

Retrieve the query result using MYSQLI in an Ajax request and display it in an HTML document

When making an Ajax call in an HTML file to retrieve multiple rows of data from a database query, I am struggling to display the result back in the HTML file. index.html: <!DOCTYPE html> <html> <head> <script src="https://ajax.go ...

Incorporate a new attribute into objects within a designated level of a tree structure in

I am working with an array of objects structured as a tree. I have a requirement to add a new property called "dateType" to the objects at the 3rd level. let tree = [ { id: 1, name: "parent1", children: [ { id: 2, ...

Why won't AngularJS ng-click function properly?

I'm attempting to implement form validation using JavaScript. However, when I include the following line document.getElementById("one").setAttribute("ng-click", "insertData()"); inside the validateForm function, it doesn't work properly after ...

Unable to process form submission with AngularJS + Stormpath

I am facing an issue with form submission. Even though I believe that the login and password data are being sent correctly, nothing happens when I submit the form. I am attempting to submit the form without using ngSubmit because it is not feasible in my s ...

Creating visual content on Canvas using JavaScript

Having an issue with stacking multiple images on separate Canvas layers, and they're not drawing on the canvas. Can anyone help me figure out what I'm missing? Thanks CSS .positionCanvas{ position: absolute; left:0; righ ...

Spring MVC - versatile request handlers

After doing extensive research, I have yet to find a definite solution to my dilemma. I am attempting to direct all HTTP requests through my dispatcher servlet and then to a specific controller. My ultimate goal is to manage resource, AJAX, and other requ ...

Instructions on how to showcase a standard text within a designated text container

I am currently facing an issue with a textarea or textbox that is dynamically receiving URLs from a database. The textbox is displaying the full URL address, which is not visually appealing. I would like to replace this with some generic text such as "cl ...

An index problem with BufferGeometry

Trying to transition code from openFrameworks to THREE.JS for generating a landscape with Perlin noise. The approach involves creating a static index array first, followed by positioning vertices in a square grid, each offset by a specific distance. This s ...

Tips for effectively managing errors in Next.js getStaticProps

Currently, I am immersed in the development of my inaugural Next.JS application (Next and Strapi). All functionalities are operational, but I am interested in discovering the optimal approach to integrate error handling within getStaticProps. I have exper ...

Using Browserify to load the npm-module client-side for thepiratebay

I am currently facing an issue with my node.js server file. It successfully loads my site and runs JavaScript, but I encountered a problem when trying to include tpb = require('thepiratebay'); in the server.js file. Although it works fine in the ...

The invocation of Ajax with jQuery is considered unauthorized

I have spent the past 2-4 hours searching on Stack Overflow, but unfortunately, I haven't been able to find a solution to my problem. The issue I'm facing is that my code is supposed to alert the data value, but instead, it's only returning ...

How can I transfer Gmail message using express rendering parameters?

Using passport-google-oauth for authentication and the node-gmail-api for fetching gmail, I aim to display gmail message after authentication. In order to achieve this, I have written the following code in routes.js: app.get('/profile', isLogged ...

I am unable to retrieve data using JavaScript

I am struggling to fetch data with JavaScript and display it in the console. Can anyone point out what I might be doing incorrectly? main.js // ADD TO CART $("#addToCartBtn").on('click',function(){ var _qty=$("#productQty") ...