Skip to content

Instantly share code, notes, and snippets.

@telagraphic
Created July 24, 2014 14:31
Show Gist options
  • Save telagraphic/52d1354b9a0f4e43d69d to your computer and use it in GitHub Desktop.
Save telagraphic/52d1354b9a0f4e43d69d to your computer and use it in GitHub Desktop.
getting correct params for rails to process
'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.
};
});
# /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
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
 (0.0ms) begin transaction
SQL (3.0ms) 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]]
 (6.0ms) commit transaction
Completed 201 Created in 18ms (Views: 2.0ms | ActiveRecord: 9.0ms)
<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