Integrate Google Picker with MeteorJS - meteor

I am trying to use Google Picker within a Meteor application. I am not an expert, I just followed the example on Google Picker API page https://developers.google.com/picker/docs/index but could not make it work.
Here is what I tried in the client side and of course I changed the devKey and Client ID:
// The Browser API key obtained from the Google Developers Console.
var developerKey = 'AIzaSyC9gfrgtnj6fd00hDau3B0LSTqajeDIyl0';
// The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
var clientId = "582812345678-5t9joqkb5d1rfders25fhr5u6k28s9lc.apps.googleusercontent.com"
// Scope to use to access user's photos.
var scope = ['https://www.googleapis.com/auth/photos'];
var pickerApiLoaded = false;
var oauthToken;
Template.gPicker.helpers({
// Use the API Loader script to load google.picker and gapi.auth.
onApiLoad : function() {
gapi.load('auth', {'callback': onAuthApiLoad});
gapi.load('picker', {'callback': onPickerApiLoad});
},
onAuthApiLoad : function() {
window.gapi.auth.authorize(
{
'client_id': clientId,
'scope': scope,
'immediate': false
},
handleAuthResult);
},
onPickerApiLoad : function() {
pickerApiLoaded = true;
createPicker();
},
handleAuthResult : function(authResult) {
if (authResult && !authResult.error) {
oauthToken = authResult.access_token;
createPicker();
}
},
// Create and render a Picker object for picking user Photos.
createPicker : function() {
if (pickerApiLoaded && oauthToken) {
var picker = new google.picker.PickerBuilder().
addView(google.picker.ImageSearchView).
setOAuthToken(oauthToken).
setDeveloperKey(developerKey).
setCallback(pickerCallback).
build();
picker.setVisible(true);
}
},
// A simple callback implementation.
pickerCallback : function(data) {
var url = 'nothing';
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
var doc = data[google.picker.Response.DOCUMENTS][0];
url = doc[google.picker.Document.URL];
}
var message = 'You picked: ' + url;
document.getElementById('result').innerHTML = message;
}
});
Then on the template:
<head>
<title>imagesearch</title>
</head>
<body>
{{> gPicker}}
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
</body>
<template name="gPicker">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control recherche">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div id="result"></div>
</template>

Related

Upload file using knockout-file-bind

I am trying to send a multipart form consist of text and file type using knockoutjs.
There is an error regarding data-bind file.
Here's my formView:
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<label class="control-label">Supplier</label>
<input type="text" name="Supplier" id="Supplier" data-bind="value: Supplier" class="form-control col-md-8 form-control-sm" required />
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label">Picture</label>
<input type="file" name="fileInput" id="fileInput" data-bind="file: {data: fileInput, reader: someReader}" class="form-control" />
</div>
</div>
</div>
#section scripts {
<script src="~/Scripts/SDSScripts/RegisterSdsView.js"></script>
}
ViewModel:
function RegisterSdsView() {
var self = this;
self.Supplier = ko.observable();
self.fileInput = ko.observable();
someReader = new FileReader();
self.RegisterSds = function () {
if (self.errors().length > 0) {
self.errors.showAllMessages();
return;
}
var Supplier = self.Supplier();
var fileInput = self.fileInput();
$.ajax({
url: '/SdsView/RegisterSds',
cache: false,
type: 'POST',
data: {Supplier, fileInput},
success: function (data) {
//some code
},
error: function (data) {
//some code
}
});
}
}
ko.applyBindings(new RegisterSdsView());
Controller:
public ActionResult RegisterSds(string Supplier, HttpPostedFileBase fileInput)
{
var db = new SDSDatabaseEntities();
if (fileInput.ContentLength > 0)
{
string fileName = Path.GetFileNameWithoutExtension(fileInput.FileName);
string fileExtension = Path.GetExtension(fileInput.FileName);
string path = Path.Combine(Server.MapPath("~/UploadedFiles"), fileName);
fileInput.SaveAs(path);
var doc = new SDSDocument()
{
DocName = fileName,
DocType = fileExtension,
DocPath = path
};
db.SDSDocuments.Add(doc);
}
db.SaveChanges();
var result = new { status = "OK" };
return Json(result, JsonRequestBehavior.AllowGet);
}
The problem is the fileInput(viewModel) return null to my controller(HttpPostedFileBase fileInput).
Am I doing these the right way?
This is actually my very first C# .NET project. I can't seem to find a good example related to knockoutjs file data-bind. Basically how to POST Based64 to controller?
Here the api that I use https://github.com/TooManyBees/knockoutjs-file-binding
Well I solved it. I gonna update it here just in case. Basically I just have to POST Base64 string to controller via FormData. I don't know why my previous method cannot send large string value, maybe there are limitation on POST method or browser on how large you can send a data via AJAX.
Here is the reference https://stackoverflow.com/a/46864228/13955999

Image Upload not working in Meteor

In my meteor app I am uploading images and storing them in dropbox. It works fine when I am running the app in localhost. But as soon as I run the app after deploying it to meteor.com the upload fails to work.
This is my code in server.js
var createThumb = function(fileObj, readStream, writeStream) {
// Transform the image into a 10x10px thumbnail
gm(readStream, fileObj.name()).resize('10', '10').stream().pipe(writeStream);
};
var dropboxStore = new FS.Store.Dropbox("files", {
key: "",
secret: "",
token: "", // Don’t share your access token with anyone.
transformWrite: createThumb, //optional
})
Images = new FS.Collection("files", {
stores: [dropboxStore]
});
Images.allow({
'insert': function () {
// add custom authentication code here
return true;
}
});
Here is the link to meteor.com http://image_upload.meteor.com/.
I have tried changing dropbox to s3 but it still doesn't work. Could it be because it is hosted at meteor.com?
Looking forward for a solution.
Most likely it's because you're trying to use GraphicsMagick to resize the image in the transformWrite option, but meteor.com hosting servers do not have GraphicsMagick or ImageMagick installed.
https://github.com/CollectionFS/Meteor-CollectionFS/issues/299
You can use the meteor logs command to view the logs from your hosted meteor.com application to make sure that's the issue.
Edit
Here's some sample code for the jQuery cropper utility:
Template HTML:
<input type="file" style="visibility:hidden;width:1px" accept="image/gif, image/jpeg, image/png" class="profilePhotoFile">
<input type="button" id="btnEditPhoto" value="Edit Photo" class="btn btn-primary" style="width:160px"/>
<div class="modal fade" id="cropper-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="cropper">
<img src="" alt="Picture">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="btnSavePhoto">Save</button>
<button class="btn btn-default" id="btnCancel">Cancel</button>
</div>
</div>
</div>
</div>
Template JS:
Template.myTemplate.events({
'click #btnEditPhoto': function(event, template) {
$('.profilePhotoFile').click();
},
'change .profilePhotoFile': function(event, template) {
if (!event.target.files || event.target.files.length === 0) {
return;
} else {
var $inputImage = $(event.target);
var URL = window.URL || window.webkitURL;
var file = event.target.files[0];
var blobURL = URL.createObjectURL(file);
$image = $('#cropper > img');
$('#cropper-modal').modal();
$('#cropper-modal').on('shown.bs.modal', function() {
$image.cropper({
aspectRatio: 1.0,
autoCropArea: 1.0
}).cropper('replace', blobURL);
$inputImage.val('');
}).on('hidden.bs.modal', function() {
$image.cropper('destroy');
URL.revokeObjectURL(blobURL); // Revoke url
});
}
},
'click #btnSavePhoto': function(event, template) {
$image = $('#cropper > img');
//Change the width and height to your desired size
var base64EncodedImage = $image.cropper('getCroppedCanvas', {width: 10, height: 10}).toDataURL('image/jpeg');
$('#cropper-modal').modal('hide');
var newImage = new FS.File(base64EncodedImage);
Images.insert(newImage, function(err, fileObj) {
if (err) {
console.log(err);
} else {
//do something after insert
}
});
},
'click #btnCancel': function(event, template) {
$('#cropper-modal').modal('hide');
}
});

File upload not working with angular and webmethod

I am basically trying to upload a file using angular and a webmethod.
I took the code from this blog but it does not work. The request is successfull as seen from fiddler but the web method never gets invoked.
Am I doing something wrong?
Following is my code .
angular
.module('loader', ['ui.router', 'ui.bootstrap', 'ui.filters'])
.controller('loader-main', function($rootScope, $scope, WebServices) {
$scope.uploadNewFile = function() {
WebServices.uploadFile($scope.myfile);
}
}).factory('WebServices', function($rootScope, $http) {
return {
postFile: function(method, uploadData) {
var uploadUrl = "myASPXPAGE.aspx/" + method;
return $http.post(uploadUrl, uploadData, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
}).success(function(data) {
///Control reaches here but never hits the server method
});
},
uploadFile: function(filedata) {
var fd = new FormData();
fd.append('file', filedata);
return this.postFile("UploadFile", fd);
}
};
}).directive('fileModel', ['$parse',
function($parse) {
return {
restrict: 'A',
link: function($scope, element, attr) {
var model = $parse(attr.fileModel);
var modelSetter = model.assign;
element.bind('change', function() {
$scope.$apply(function() {
modelSetter($scope, element[0].files[0]);
});
});
}
}
}
]);
<div class="row">
<div class="col-xs-5">
<div class="col-xs-4">Browse to File:</div>
<div class="col-xs-1">
<input type="file" id="uploadFile" class="btn btn-default" file-model="myfile" />
<input type="button" class="btn btn-primary" value="Load File" data-ng-click="uploadNewFile()" />
</div>
</div>
</div>
And here is my WebMethod
[WebMethod]
public static string UploadFile()
{
System.Diagnostics.Debugger.Break();
return "Done";
}
Figured it out. You cannot have Content-Type as multipart/form-data in webmethods. Instead created a HttpHandler to upload the file and everything works just fine.

Meteor and filepicker-plus package

I am having a little bit of trouble outputting a image after a filepicker selection with the file picker plus package from meteor. How to I grab the uploaded image url or file path, so I can pass it into a form input and put it in a collection. Putting in into the collection isnt the part I am worried about its getting the path that I am having trouble with cheers.
All contained in postSubmit template.
I have a form with
<input type="filepicker" name="myName" />
and a img output in the same template
<img src="{{filepickerIdToUrl myName}}">
and a router file containg
Router.onBeforeAction(function(){
loadFilePicker('magickey');
//can leave out key if its in settings
this.next();
},{only:['postSubmit']});
Here is the full postSubmit template
<template name="postSubmit">
<form>
<label for="title">Title</label>
<input name="title" id="title" type="text" value="" placeholder="Name your post"/>
<button id="uploadImage" class="btn btn-info btn-sm"><i class="fa fa-upload"></i> Upload</button>
<input type="submit" value="Submit"/>
</form>
<img id="imagePreview" class="img-responsive" src="{{filepickerIdToImageUrl imageId placehold_it='500x350' h=200 w=300}}"/>
<button id="removeImage" class="btn btn-warning btn-sm"><i class="fa fa-trash-o"></i> Remove</button>
This is also my postSubmit events
Template.postSubmit.events({
'submit form': function(e) {
e.preventDefault();
var post = {
title: $(e.target).find('[name=title]').val(),
image: $(e.target).find('[name=image]').val()
};
Meteor.call('postInsert', post, function(error, result) {
// display the error to the user and abort
if (error)
return alert(error.reason);
Router.go('postPage', {_id: result._id});
});
}
});
Thanks to Nate and the google groups link above, I got it working.
Here is my solved code, Right now it only shows the preview on the form and you can remove it by clearing the session value, but it will be easy enough to grab that session value and put it into the form on submit.
Thanks again Nate.
Template.postSubmit.created = function(){
Session.setDefault("imageId", null);
Session.setDefault("imageKey", null);
};
Template.postSubmit.events({
'submit form': function(e) {
e.preventDefault();
var post = {
title: $(e.target).find('[name=title]').val(),
image: $(e.target).find('[name=image]').val()
};
Meteor.call('postInsert', post, function(error, result) {
// display the error to the user and abort
if (error)
return alert(error.reason);
Router.go('postPage', {_id: result._id});
});
},
'click #uploadImage':function(event, template){
event.preventDefault();
filepicker.pickAndStore(
{
mimetypes: ['image/gif','image/jpeg','image/png'],
multiple: false
},{
access:"public"
},
function(InkBlobs){
// the upload is now complete to filepicker - but the form hasnt persisted the values to our collection yet
Session.set("imageId", _.last(_.first(InkBlobs).url.split("/")));
Session.set("imageKey", _.first(InkBlobs).key);
// once the session changes are made, the form will now have the new values, including a preview of the image uploaded
},
function(FPError){
log.error(FPError.toString());
}
);
},
'click #removeImage':function(event, template){
event.preventDefault();
Session.set("imageId", "remove");
Session.set("imageKey", "remove");
}
});
Template.postSubmit.helpers({
'hideRemove':function(){
return Session.equals("imageId", null) || Session.equals("imageId", "remove");
},
'imageId':function(){
if(Session.equals("imageId", "remove"))
return "";
else
return Session.get("imageId") || "";
},
'imageKey':function(){
if(Session.equals("imageKey", "remove"))
return "";
else
return Session.get("imageKey") || "";
}
});

Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true

I am trying to get nowelium / socket.io-titanium to work i have it working on the device but on website i get the following error in my console
XMLHttpRequest cannot load http://127.0.0.1:8080/socket.io/1/?t=1345807417891. Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.
I am using socket.io here is the chat.js server
var io = require('socket.io').listen(8080);
var archiveMessages = {};
var channels = ['foo channel', 'bar channel'];
var chat = io.of('/chat');
chat.on('connection', function(socket){
console.log('connected: %s', socket.id);
// push available channel list
socket.emit('available_channel', channels);
socket.on('join', function(value){
console.log('%s joined channel: %s', socket.id, value.channelId);
socket.join(value.channelId);
socket.set('channel_id', value.channelId, function(){
var messages = archiveMessages[value.channelId] || [];
socket.emit('joined', messages);
socket.broadcast.to(value.channelId).emit('user:join', {
id: socket.id
});
});
});
socket.on('post', function(message){
socket.get('channel_id', function(err, channelId){
console.log('%s says<%s channel>: %s', socket.id, channelId, message);
if(!(channelId in archiveMessages)){
archiveMessages[channelId] = [];
}
archiveMessages[channelId].push(message);
socket.emit('posted', {
message: message
});
socket.broadcast.to(channelId).emit('user:message', {
id: socket.id,
message: message
});
});
});
socket.on('disconnect', function(){
console.log('%s disconnected', socket.id);
socket.get('channel_id', function(channelId){
socket.leave(channelId);
socket.broadcast.to(channelId).emit('user:leave', {
id: socket.id
});
});
});
});
var image = io.of('/image');
image.on('connection', function(socket){
socket.on('upload', function(param){
console.log('upload base64 size: %d', param.base64.length);
if(param.download){
socket.emit('download', {
base64: 's' + new Array(65534).join('0') + 'e'
});
}
});
});
and here is the index.html i am running
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>chat sample</title>
<style>
#rooms button {
display: block;
}
</style>
<script type="text/javascript" src="http://localhost:8080/socket.io/dist/socket.io.js"></script>
<script type="text/javascript">
var $ = function(id){
return document.getElementById(id);
};
window.addEventListener('load', function (){
var socket = io.connect('127.0.0.1:8080');
var chat = socket.of('/chat');
console.log(chat);
chat.on('available_channel', function(channels){
channels.forEach(function (channelId){
var button = document.createElement('button');
button.appendChild(document.createTextNode(channelId));
$('rooms').appendChild(button);
button.addEventListener('click', function(){
$('chat').style.display = '';
chat.emit('join', {
channelId: channelId
});
});
});
});
var addMessage = function(message){
var li = document.createElement('li');
li.appendChild(document.createTextNode(message));
$('messages').appendChild(li);
};
chat.on('joined', function(messages){
messages.forEach(function(message){
var li = document.createElement('li');
li.appendChild(document.createTextNode(message));
$('archives').appendChild(li);
});
});
chat.on('posted', function(value){
return addMessage('you posted: ' + value.message);
});
chat.on('user:join', function(value){
return addMessage(value.id + ' joined this channel');
});
chat.on('user:leave', function(value){
return addMessage(value.id + ' leaved this channel');
});
chat.on('user:message', function(value){
return addMessage(value.id + ' says ' + value.message);
});
$('submit').addEventListener('click', function (){
var messageValue = $('message').value;
if(/^\s+$/.test(messageValue)){
return;
}
chat.emit('post', messageValue);
$('message').value = '';
});
});
</script>
</head>
<body>
<div id="rooms">
</div>
<div id="chat" style="display:none">
<input type="text" id="message" value="" placeholder="message here" />
<input type="submit" id="submit" value="send" />
<p>archives</p>
<ul id="archives" style="color: #999"></ul>
<p>messages</p>
<ul id="messages"></ul>
</div>
</body>
</html>
CAn anyone tell me why this might be happening???
I wonder if switching it to localhost would fix that.
I researched into Access-Control-Allow-Origin and traced it to the web browser as the culprit if I remember correctly. I eventually started looking for a way to disable the browser from checking for that. In Chrome this is my shortcut path.
...Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security
See if that works. I don't know if it really remedies the issue as much as it just suppresses the problem. If you were calling the web page from the host you were trying to access I don't think you'd have this problem at all. For example, when I attempt to access my web service on mydomain.com using the web page mydomain.com/myprogram.html it doesn't complain about cross domain access.

Resources