Created
July 24, 2014 14:31
-
-
Save telagraphic/52d1354b9a0f4e43d69d to your computer and use it in GitHub Desktop.
getting correct params for rails to process
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
angular.module('offcampustest', ['ngRoute', 'ngResource', 'angularFileUpload']) | |
.config(function($routeProvider, $locationProvider) { | |
$routeProvider | |
.when('/', { | |
templateUrl:'/templates/rentals.html', | |
controller: 'RentalsCtrl' | |
} | |
) | |
.when('/newRental', { | |
templateUrl: '/templates/newRental.html', | |
controller: 'newRentalCtrl' | |
}) | |
.otherwise({redirectTo: '/'}); | |
$locationProvider.html5Mode(true); | |
}) | |
.factory('ImagesService', function($resource) { | |
return $resource('/api/images/:id', {id: "@id"}, | |
{ 'get': {method:'GET'}, | |
'save': {method:'POST'}, | |
'query': {method:'GET', isArray:false}, | |
'remove': {method:'DELETE'}, | |
'delete': {method:'DELETE'} }); | |
}) | |
.controller('RentalsCtrl', function($scope, $upload, RentalService, ImagesService) { | |
$scope.rental = new RentalService(); | |
$scope.newRental = function() { | |
$scope.rental.$save(); | |
}; | |
RentalService.query(function(data) { | |
$scope.rentals = data.rentals; | |
}); | |
$scope.onFileSelect = function($files) { | |
//$files: an array of files selected, each file has name, size, and type. | |
for (var i = 0; i < $files.length; i++) { | |
var file = $files[i]; | |
var image = { | |
url: file.filename, | |
rental_id: 1, | |
description: "Something in here" | |
}; | |
$scope.upload = $upload.upload({ | |
url: '/api/images', //upload.php script, node.js route, or servlet url | |
method: 'POST', | |
//headers: {'header-key': 'header-value'}, | |
//withCredentials: true, | |
data: 'test image',//{myObj: $scope.myModelObj}, | |
file: file, // or list of files ($files) for html5 only | |
//fileName: 'doc.jpg' // to modify the name of the file(s) | |
// customize file formData name ('Content-Desposition'), server side file variable name. | |
fileFormDataName: 'image[image]' //or a list of names for multiple files (html5). Default is 'file' | |
// customize how data is added to formData. See #40#issuecomment-28612000 for sample code | |
//formDataAppender: function(formData, key, val){} | |
}).progress(function(evt) { | |
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total)); | |
}).success(function(data, status, headers, config) { | |
// file is uploaded successfully | |
console.log(data); | |
}); | |
//.error(...) | |
//.then(success, error, progress); | |
// access or attach event listeners to the underlying XMLHttpRequest. | |
//.xhr(function(xhr){xhr.upload.addEventListener(...)}) | |
} | |
/* alternative way of uploading, send the file binary with the file's content-type. | |
Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed. | |
It could also be used to monitor the progress of a normal http post/put request with large data*/ | |
// $scope.upload = $upload.http({...}) see 88#issuecomment-31366487 for sample code. | |
}; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# /api/images | |
module Api | |
class ImagesController < ApplicationController | |
before_action :set_image, only: [:show, :edit, :update, :destroy] | |
def create | |
@image = Image.new(image_params) | |
if @image.save | |
render json: @image, status: :created, root: false | |
else | |
render json: @image.errors | |
end | |
end | |
def show | |
render json: @image | |
end | |
private | |
def set_image | |
@rental = Rental.find(params[:id]) | |
end | |
def image_params | |
params.require(:image).permit(:url, :rental_id, :description) | |
end | |
end | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
response from server after upload submit | |
{"id":3,"url":{"url":null},"rental_id":null,"description":null,"created_at":"2014-07-24T14:29:24.675Z","updated_at":"2014-07-24T14:29:24.675Z"} | |
rails log | |
Started POST "/api/images" for 127.0.0.1 at 2014-07-24 10:28:35 -0400 | |
Processing by Api::ImagesController#create as HTML | |
Parameters: {"url"=>"undefined", "rental_id"=>"1", "description"=>"Something in here", "image"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x3948ea0 @tempfile=#<Tempfile:C:/Users/lyonsn1/AppData/Local/Temp/RackMultipart20140724-9772-19ftmfb>, @original_filename="http300.PNG", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"image[image]\"; filename=\"http300.PNG\"\r\nContent-Type: image/png\r\n">}} | |
Can't verify CSRF token authenticity | |
Unpermitted parameters: image | |
[1m[36m (0.0ms)[0m [1mbegin transaction[0m | |
[1m[35mSQL (3.0ms)[0m INSERT INTO "images" ("created_at", "updated_at") VALUES (?, ?) [["created_at", Thu, 24 Jul 2014 14:28:35 UTC +00:00], ["updated_at", Thu, 24 Jul 2014 14:28:35 UTC +00:00]] | |
[1m[36m (6.0ms)[0m [1mcommit transaction[0m | |
Completed 201 Created in 18ms (Views: 2.0ms | ActiveRecord: 9.0ms) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Working</h1> | |
<form ng-submit="newRental()"> | |
<input type="text" ng-model="rental.address" /> | |
<input type="submit" value="Submit" /> | |
</form> | |
<input type="text" ng-model="myModelObj"> | |
<input type="file" ng-file-select="onFileSelect($files)" > | |
<input type="file" ng-file-select="onFileSelect($files)" multiple> | |
<div class="button" ng-file-select="onFileSelect($files)" data-multiple="true"></div> | |
<div ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="optional-css-class-name-or-function" | |
ng-show="dropSupported">drop files here</div> | |
<div ng-file-drop-available="dropSupported=true" | |
ng-show="!dropSupported">HTML5 Drop File is not supported!</div> | |
<button ng-click="upload.abort()">Cancel Upload</button> | |
<ul ng-repeat="rental in rentals"> | |
<li>{{rental.address}}</li> | |
</ul> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment