Utilize paperclip and angularjs to easily upload files

I am currently working on integrating Angularjs upload functionality into my rails application:

Angular File upload

Below is my controller code for managing photos:

def create
@photo = current_user.photos.new(photo_params)

respond_to do |format|
  if @photo.save
    format.html { redirect_to @photo, notice: 'Photo was successfully created.' }
    format.json { render action: 'show', status: :created, location: @photo }
  else
    format.html { render action: 'new' }
    format.json { render json: @photo.errors, status: :unprocessable_entity }
  end
end
end

def photo_params
  params.require(:photo).permit(:album_id, :user_id, :title, :description, :path)
end

I believe I am nearing a solution. However, I encounter an error when trying to upload:

param is missing or the value is empty: photo

Extracted source (around line #92):
9091929394          
# Never trust parameters from the scary internet, only allow the white list through.
def photo_params
  params.require(:photo).permit(:album_id, :user_id, :title, :description, :path)
end
 end

I suspect that I need to format the data before sending it in a specific way, like this:

{"photo"=>{"tmpname"=>"253", "etc"=>"1"}}

Here's the log from the terminal:

Here is my HTML input:

<input type="file" nv-file-select="" name="photo[path]" id="photo_path" uploader="uploader" multiple  /><br/>

The column in my database managed by paperclip gem is named path

I am having difficulty understanding how to implement this in the Angular script.

Answer №1

Until I gain enough reputation, I am unable to leave a comment. However, from my experience, this error is typically caused by a naming discrepancy. Ensure that your fields are named in accordance with the Rails convention, like "photo[path]".

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

Step-by-step guide to selecting a specific point on an HTML5 canvas using Python's selenium webdriver

Looking to automate interactions with a simple HTML5 application on a website using Selenium webdriver in Python with Firefox on Linux. The challenge is clicking a button on an HTML5 canvas, then dragging one or two objects around the canvas post-button cl ...

What is the process for configuring socket.io to solely listen on a single designated route?

Is there a way to make socket.io listen only on my /home route, instead of every route? I tried changing the configuration but it only displayed a JSON file on the home path. const server = require('http').Server(app); const io = require('s ...

What is the method to retrieve text from a div element with Webdriver-IO?

Is there a way to extract the value from the following HTML element using Webdriver-IO for automated testing? <div class="metric-value ng-binding" ng-style="{'font-size': vis.params.fontSize+'pt'}" style="font-size: 60 ...

Utilizing ReactJS for Web Development with Enhanced Data Insights from Google

Utilizing Google Analytics and various tools, I've encountered an issue with the development of ReactJS. My goal was to collect analytics data from my website by using react-helmet to dynamically change the title and the HTML lang parameter based on t ...

Using an if statement following the iteration of a JSON object in a React Native application

I am currently working on a weather app using react native as a fun project. I have set up an API to fetch weather data in JSON format. My goal is to show the hourly weather details based on the current time of the day. export default class App extends ...

The mystery of the unassigned value in $(this).data(value) when using the jQuery click() method

In my Rails 5 application, I am working on creating a dynamic menu that will guide users to different parts of the site based on their location. The idea is that when they click on a specific menu item from the home page, a modal will appear allowing them ...

What is the process for modifying the logfile path in phantomjs using selenium?

Is there a way to modify the default --webdriver-logfile parameter that selenium passes to phantomjs when using them together? This is the line in the selenium log: 11:06:06.960 INFO - arguments: [--webdriver=14380, --webdriver-logfile=<ROOT PATH DELE ...

Numerical values are not considered by the JavaScript table filter

I'm having trouble with dynamically filtering the content. It works fine for the first two columns, but not for the third one. Maybe I need some additional JavaScript? Here is the link to my snippet: `https://www.w3schools.com/code/tryit.asp?filen ...

What is the method for sending an AJAX request with a dynamically looping ID number parameter in the URL

I am looking to make multiple AJAX calls with a loop parameter named [id] in the URL, starting from request.php?id=1 and ending at id=9. I want to send each call after a 3-second delay. As a JavaScript beginner, I'm unsure of where to begin implementi ...

Swapping out the video in real-time using an on-demand script

Recently, I encountered an issue with my blog's YouTube video switcher. It seems that the videos won't play once they are changed, and it is related to a light YouTube embed script that I found here: . I believe this script was implemented to imp ...

javascript issue with setting the id attribute on a select option

I can't seem to set the id attribute in my select element using JavaScript. When I inspect it, the id attribute isn't showing up... Here's the first method using JS: var selectorElem = document.getElementById('selector') var ...

The AngularJS interceptor is failing to function as expected

My goal is to develop a custom $http interceptor with the following structure: .config(['$httpProvider',function($httpProvider){ $httpProvider.interceptors.push(function($q,$window){ return { 'request':function(config){ ...

Showcase fullcalendar events that span across multiple rows and columns

Within my Angular application, I am utilizing the Angular UI Calendar in conjunction with Fullcalendar to display user events. Currently, when a user interacts with an event by clicking on it, only a portion of the event is highlighted. This becomes probl ...

Redux: One container for many components

I am new to React and Redux, and I am currently working on a project where I am unsure of the best practices and technical solutions. I am following Dan Abramov's definitions of "smart" and "dumb" components which can be found here. The component I a ...

Sending a variable to an AngularJS factory

I am currently working on a select list that looks like this: <select name="make" class="form-control" ng-model="selectCity"> <option value="Kannur">Kannur</option> <option value="Agra">Agra</option> <option va ...

What is the best way to determine if a dropdown option has been selected in AngularJS?

Is there a simple way to check if any value has been selected from a dropdown menu in AngularJS without knowing which value has been selected? <button class="btn" ng-click="openDropdown($event)">{{labelX}} <span ng-click="openDropdownFromA($eve ...

Moving icon that appears when hovering over a menu button

Before diving into this, please take a moment to visit the following website to understand my goal: You'll notice there is a noticeable RED arrow positioned below the menu. What I aim to accomplish is... when I hover over a menu button, the arrow smo ...

Error caused by the shouldDisableDate prop in MUI DatePicker's functionality

<Controller name="toDate" control={control} defaultValue={null} render={({ field }) => ( <DatePicker format="DD/MM/yyyy" value={field.value} onChange={(e) => { setToDate(e); field.onC ...

What sets canvas and webgl renderer apart in the world of three.js?

Attempting to showcase a sphere using three.js, but encountering issues when rendering with canvasRenderer due to the appearance of grey lines on the sphere. View the code here: http://jsfiddle.net/jzpSJ/ See the screenshot here: However, when rendering ...

Spring MVC - The Servlet dispatcher encountered an error: java.lang.StackOverflowError

I originally developed an AngularJS + Spring MVC application, named A. I duplicated this web application by copying and pasting the project folder into another one called B. After running both applications, I noticed they exhibited identical behavior. My ...