I am currently writing the node application using wechat admin platform api. However i am currently stuck when i try to upload the thumb media image file to the tencent server using admin platform api. I have a subscriber account registered with wechat and i am able to get the access token and follower list of my wechat account successfully using admin api platform.
Following is the wechat code i am using to upload to the wechat server :
function uploadThumb(){
console.log('Inside uploadThumb');
var promise = new Promise(function(resolve,reject){
resolve({
then:function(onfullfill,onreject){
fs.readdir(thumb_dir,function(err,files){
if (err){
onreject();
throw err;
}
files.forEach(function(file){
fs.stat(thumb_dir+file, function(err, stats) {
var type = "thumb";
var upload_url = "http://file.api.wechat.com/cgi-bin/media/upload?access_token="+access_token+"&type="+type;
console.log('file name :'+file+': size :'+stats.size);
restler.post(upload_url, {
multipart: true,
data: {
"media['filename']": file,
"media['content type']":"image/png",
"media['file length']": stats.size,
"media['file']": restler.file(thumb_dir+file, null, stats.size, null, "image/png")
}
}).on("complete", function(fdata,response) {
console.log('Status: ' + response.statusCode);
console.log('Thumb image data :'+fdata);
console.dir(response);
//var obj = JSON.parse(fdata);
//saveUploadMediaToDB(obj,file).then(onfullfill());
onfullfill();
});
});
});
});
}
});
});
return promise;
}
When i run the above function in node , i get the HTTP response code as 502. And text/html response below :
Status: 502
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>???</title>
<style type="text/css">
.dn{display:none;}
.db{display:block;}
.dib{display:inline-block;}
.b_dib{display:inline-block;*display:inline;*zoom:1;}
.di{display:inline;}
.vh{visibility:hidden;}
.vv{visibility:visible;}
.rel{position:relative;}
.abs{position:absolute;}
.oh{overflow:hidden;}
.z{*zoom:1;}
.l{float:left;}
.r{float:right;}
.cl{clear:both;}
.group{*zoom:1;}
.group:after{content:"\200B";display:block;height:0;clear:both;}
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.tj{text-align:justify;*text-justify:distribute;}
.vt{vertical-align:top;}
.vm{vertical-align:middle;}
.vb{vertical-align:bottom;}
.f0{font-size:0;}
.fa{font-family:Arial;}
.fs{font-family:SimSun;}
.fyh{font-family:"Microsoft YaHei";}
.indent{text-indent:2em;}
.n{font-weight:400;font-style:normal;}
.b{font-weight:700;}
.i{font-style:italic;}
.tdn{text-decoration:none;}
.tdn:hover{text-decoration:none;}
.poi{cursor:pointer;}
.text-hide{line-height:999em;overflow:hidden;}
.drop_hl_extra{padding-left:999em;margin-left:-999em;}
.drop_vb_extra{padding-bottom:999em;margin-bottom:-999em;}
html{-webkit-text-size-adjust:none;}
body,h1,h2,h3,h4,h5,p,ul,ol,dl,dd{margin:0;}
ul,ol{padding-left:0;list-style-type:none;}
a img{border:0;}
body{background-color:#EAEAEA;font-family:"Microsoft YaHei",Helvetica,Verdana,Arial,Tahoma;font-size:14px;color:#222222;}
.logo{padding-top:25px;}
.wrapper{width:960px;margin-left:auto;margin-right:auto;}
.container{margin-top:20px;box-shadow:0 3px 3px #ddd;-moz-box-shadow:0 3px 3px #ddd;-webkit-box-shadow:0 3px 3px #ddd;border-radius:3px;-moz-border-rad
.err_wrapper{overflow:hidden;*zoom:1;padding:100px 260px 100px 260px;}
.err_icon_holder{float:left;}
.err_content{margin-left:180px;margin-top:30px;}
.err_t{font-weight:700;font-size:20px;line-height:30px;}
.err_text{line-height:28px;}
.footer{padding-top:40px;font-size:12px;color:#999999;text-shadow:0 1px 1px #ffffff;text-align:center;}
.page_link a{color:#4d5d2c;text-decoration:none;}
.err_icon{display:inline-block;width:170px;height:130px;background:transparent url("http://res.wx.qq.com/mpres/htmledition/images/icon_page_err.png") n
</style>
</head>
<body>
<div class="header">
<div class="wrapper">
<h1 class="logo"><img src="http://res.wx.qq.com/mpres/htmledition/images/login/logo.png" alt="??????"></h1>
</div>
</div>
<div class="main">
<div class="wrapper">
<div class="container">
<div class="err_wrapper">
<span class="err_icon_holder"><i class="err_icon page_503"></i></span>
<div class="err_content">
<h3 class="err_t">503 : HTTP Error 503</h3>
<p class="err_text">???????,????????</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="wrapper">
<p class="page_link">
<a target="_blank" href="http://www.tencent.com/zh-cn/index.shtml">????</a>
|
<a target="_blank" href="http://mp.weixin.qq.com/cgi-bin/readtemplate?t=wxm-agreement&type=info&lang=zh_CN">????</a>
|
<a target="_blank" href="http://kf.qq.com/special_auto/weixin.html">????</a>
</p>
<p class="copyright">
Copyright c 2012-2013 Tencent. All Rights Reserved.
</p>
</div>
</div>
</body>
</html>
Please help me by pointing in correct direction , whether this approach is correct or am i doing something basically wronge.
Based on what I've been able to find in the Restler documentation, and comparing it with the WeChat API documentation, it seems like you might be specifying the incorrect request parameter.
I think you might need to replace
restler.post(upload_url, {
multipart: true,
data: {
"media['filename']": file,
"media['content type']":"image/png",
"media['file length']": stats.size,
"media['file']": restler.file(thumb_dir+file, null, stats.size, null, "image/png")
}
[...]
With something along these lines:
restler.post(upload_url, {
multipart: true,
data: {
"media": restler.file(thumb_dir+file, null, stats.size, null, "image/png")
}
[...]
Related
I have searched everywhere, and all answers I found only explain how to rename the public folder. In my case, the public folder is outside the Project folder:
basefolder/
Laravel/
public_html/
I have done all changes I found for the renaming folder, and all works except for vue.
In the webpack file i entered this:
mix.setPublicPath('../public_html/');
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'css');
compiled, and it compiled the css and js file in the proper folder.
In my app.js i Declared this:
Vue.component('set-fav', require('./components/SetFavorite.vue').default);
and the file components/SetFavorite.vue exists and has its content...
<template>
<div>
<input type="image" src="/images/favorite.png" border="0" alt="Favorite" #click="setfavorite" />
</div>
</template>
<script>
export default {
props: ['photogId','galId','photoname'],
mounted() {
console.log('Component mounted.')
},
methods: {
setfavorite(){
axios.get('/' + this.photogId + '/' + this.galId + '/' + this.photoname + '/like')
.then(response => {
alert(response.data);
});
}
}
}
</script>
when i Load the page, i do not see the image. Instead in the developer console I see 2 error messages:
Uncaught SyntaxError: Cannot use import statement outside a module
and
app.js:38062 [Vue warn]: Unknown custom element: <set-fav> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
and if I look at the source of my page, it begins like this:
<script>
import SetFavorite from "../../js/components/SetFavorite";
export default {
components: {SetFavorite}
}
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
...
...
Now, relative to my index.php file, the path ../../js/components/SetFavorite does not exist.. the correct existing path would be ../Laravel/js/components/SetFavorite
What do I need to do in order to fix this?
Thank you
EDIT, code of view
#extends('layouts.client')
#section('content')
<div class="container">
#if($gallery->webgal == 1)
<div class="row d-flex justify-content-around pb-3">
<h1>{{$gallery->galname}}</h1>
</div>
<div class=" row pt-1 card-deck">
#foreach($gallery->photos as $photo)
<div class="col-12 col-md-6 col-sm-12 p-1 " >
<div class="w-100 d-flex shadow justify-content-between card" style="background-color: lightgray">
<div class="w-100 m-0 p-0" style="width: 350px; height: 350px;">
<a data-fancybox="gallery" href="/images/{{auth()->user()->phcode}}/{{$gallery->galcode}}/wm/wm_{{$photo->filename}}">
<img class="card-img" src="/images/{{auth()->user()->phcode}}/{{$gallery->galcode}}/thumb/thumb_{{$photo->filename}}" style="
width:100%;
height:100%;
object-fit: scale-down;">
</a>
</div>
<div class="card-footer w-100 d-flex justify-content-around" style="font-size: smaller;">
<div class="d-flex justify-content-around w-100">
<div>
{{$photo->filename}}
</div>
<div>
<button>Download (Hi-Res)</button>
</div>
<div>
<button>Download (Social Res)</button>
</div>
<div>
<set-fav photogId="{{$gallery->user->phcode}}" galId="{{$gallery->galcode}}" photoId="{{$photo->filename}}" name="fav{{$photo->id}}"></set-fav>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
#else
<div class="row d-flex justify-content-around pb-3">
<h1>Nothing here... :)</h1>
</div>
#endif
</div>
#endsection
You have 2 issues:
You should alias your components directory thanks to Webpack, by the way it will always use an absolute path
In your webpack.mix.js:
mix.webpackConfig({
resolve: {
extensions: [ '.js', '.vue' ],
alias : { '#': `${ __dirname }/resources` },
},
output: {
publicPath : '/',
chunkFilename: 'js/[name].[chunkhash].js',
},
});
import SetFavorite from '#/js/components/SetFavorite';
If the last sample is the source code of your HTML document, it doesn't work because import and export are unknown to a web browser. You have to do it from an asset, build it with Laravel Mix and include the output to your HTML thanks to
<script type="text/javascript" src="{{ mix(...) }}"></script>
I have a project where I count the number of times a video was viewed. But I notice that the video view is not being counted on mobile and the modal is not showing but instead the video automatically goes to full screen. I have my code here can someone take a look at it to see what I am doing wrong? I will be adding comments so you that you can understand what's going on.
/*This the video once the video is click it opens to a modal and the
video automatically plays.
*/
<video class="video1" id="cx" preload="auto" align="middle" data-
toggle="modal" data-target="#mymodal" data-user-id="{{$users->id}}"
data-video-src="{{$users->intro_video}}"
data-video-views="{{$users->clicks}}" style="
cursor:pointer; "><source src="{{$users->intro_video}}#t=15"
playsinline alt="Video Unavailable" id="" ></source>
</video>
//This the modal
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="mymodal" class="modal fade" role="dialog" style="padding-
top:3%;">
<h1 class="close" data-dismiss="modal" style="color:white;
position:relative; right:20px;">X</h1>
<div class="modal-dialog">
<!--modal content-->
<div class="modal-content" style="align-items: center;">
<div class="modal-body" style=" height:300px; width:100%;
background:black; display:flex; justify-content: center;">
<video class="video2" id="video_source" src="" preload="auto"
align="middle" style="
cursor:pointer; " autoplay="true">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
//This is my controller where it will increment the click every time the
video is click
public function index(Request $request){
$requested_id=$request->input('requested_id');
$video = User::where('id', $requested_id)->increment('clicks');
}
//Last but not least this is javascript for the ajax request
once the modal shows the request is going to be sent to increment the video count
$('#mymodal').on('show.bs.modal show', function (event) {
var button = $(event.relatedTarget);
var user_id = button.data('user-id') ;
var video_src = button.data('video-src');
var video_views = button.data('video-views');
var modal = $(this);
modal.find('#video_source').attr('src', video_src);
modal.find('#video_views').text(video_views);
// send ajax request to increment video count. Just send request_id
$.ajax({
method: 'GET',
url: 'getmsg',
dataType: "json",
contentType: "application/json",
data : {
requested_id: user_id
},
success: function(data){
}
});
})
when there are many contents then the contents are going outside the window box but i want to show all the contents within that box n if there are many contents then a scrollbar will be shown by which i can keep the contents within the box..can anyone help me fixed this?any help would be appreciated.
html page:
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
//$(document).ready(function()
//{
//var hei=$('#notificationsBody').height();
//});
function myFunction2() {
$.ajax({
url: "all_notification.php",
processData:false,
success: function(data){
$('#notificationsBody').height();
$("#notification-latest").html(data);
},
error: function(){}
});
}
</script>
<div id="notificationsBody" style="overflow: auto;height:348px;">
<div id="notification-latest"></div>
</div>
<div id="notificationFooter">
<a onclick="myFunction2()" href="">See All</a>
</div>
You do not need any java script for this...
just put your html content into another div and give it height, width and overflow: scroll;
<div style="height:500px; width: 200px; overflow: scroll;">
<div id="notificationsBody" style="overflow: auto;height:348px;">
<div id="notification-latest"></div>
</div>
<div id="notificationFooter">
<a onclick="myFunction2()" href="">See All</a>
</div>
</div>
Now the internal content will not get outside and if overflow then scroll.
I've got problem with outputting my JSON from server (Node.js) to NGrepeat.
I have tried a lot and debugged with both Firebug and Firefox Web Inspector.
For some reason it will not show the data from the JSON, even then the JSON looks correct when I output it in the Firebug console (using Firefox 39.0).
JSON:
[{ nr:"1", svenska:"test2", spanska:"testo2"},{ nr:"2", svenska:"test3", spanska:"testo3"},{ nr:"3", svenska:"test4", spanska:"testo4"},{ nr:"4", svenska:"test5", spanska:"testo5"},{ nr:"5", svenska:"test6", spanska:"testo6"}]
Angular.js
/**
*
* The client Angular.JS main file for the project
*/
var glosorApp = angular.module('glosorApp',['directives']); /* */
angular.module('directives', [])
.directive('toggleClass', function () {
var directiveDefinitionObject = {
restrict: 'A',
template: '<div ng-click="localFunction()" ng-class="selected" ng-transclude></div>',
replace: false,
scope: {
model: '='
},
transclude: true,
link: function (scope, element, attrs) {
scope.localFunction = function () {
scope.model.value = scope.$id;
};
scope.$watch('model.value', function () {
if (scope.model.value === scope.$id) {
scope.selected = "active";
} else {
scope.selected = '';
}
});
}
};
return directiveDefinitionObject;
});
glosorApp.controller('listController', function ($scope, $http) {
$http.post(PROJEKT_SOKVAG+'/_myroute',
{type:AJAX.LISTA_GLOSOR_CLI_R}).success( function(data) {
console.log("Kommer hit lookdeep: "+lookdeep(data.data));
$scope.glosor = data.data;
// $scope.$apply();
console.log("Kommer hit lookdeep: $scope.glosor "+lookdeep($scope.glosor));
});
});
function ajaxanrop(callback, data_) {
$.ajax({
url: PROJEKT_SOKVAG+'_myroute',
type: 'POST',
dataType: 'json',
data: data_ , // the data that should be sent to server
success: function(data) { if ( callback ) callback(data); },
error: function() { if ( callback ) callback(null); },
complete: function() { /* console.log("Klart"); */ }
});
}
HTML (EJS template)
<!DOCTYPE html>
<html ng-app="glosorApp" ng-init="model = { value: 'dsf'}">
<head>
<title>Glosor</title>
<script type="text/javascript">
var PROJEKT_SOKVAG="<%=project_path %>", LoginUser="<%= user.username %>";
</script>
<script type="text/javascript" src="http://w42.se/webbroot/js/jquery-1.9.1.min.js"></script>
<script src="http://w42.se/<%=project_path %>/jquery-ui-1.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script type="text/javascript" src="http://w42.se<%=project_path %>/lookdeep.js"></script>
<script type="text/javascript" src="http://w42.se<%=project_path %>/constants.js"></script>
<script type="text/javascript" src="http://w42.se<%=project_path %>/clientAngular.js"></script>
</head>
<body>
<div id="vald_sida" style="display:none;" class="mentorer"></div>
<p>Användarnamn: <%= user.username %></p>
<p>Email: <%= user.email %></p>
<p>Log out</p>
<div id="wrapper" ng-controller="listController" >
<p>Lägg till Glosor</p>
<p>Testa Glosor</p>
<div class="clear"></div>
<div class="list">
<div class="filterarea">
<h4>Sökning</h4>
<div>
<span>Nr: <input ng-model="search.nr" ng-model-options="{debounce: 20000}"></span>
<span>Svenska: <input ng-model="search.svenska" ng-model-options="{debounce: 20000}"></span>
<span>Spanske: <input ng-model="search.spanska" ng-model-options="{debounce: 20000}"></span>
<span>Poäng: <input ng-model="search.poang" ng-model-options="{debounce: 20000}"></span>
</div>
</div>
<div class="pad clearfix">
<h4>Resultat</h4>
Välj: alla <input type="checkbox" ng-model="master"><br/>
<div ng-form="">
<div class="list">
<div class="thead">
<div>
<span class="sortable"><a href=""
ng-click="predicate = 'nr'; reverse=!reverse">#</a></span>
<span class="sortable td"><a href=""
ng-click="predicate = 'svenska'; reverse=!reverse">Svenska</a></span>
<span class="sortable td"><a href=""
ng-click="predicate = 'spanska'; reverse=!reverse">Spanska</a></span>
<span class="sortable td"><a href=""
ng-click="predicate = 'poang'; reverse=!reverse">Poäng</a></span>
</div>
</div>
<div class="tbody">
<div ng-repeat="glosa in filter_glosor = (glosor | orderBy:predicate:reverse | filter:search)">
<div class="tr" toggle-class="" model="model">
<span class="td">{{glosor.nr}}</span>
<span class="td">{{glosor.svenska}}</span>
<span class="td">{{glosor.spanska}}</span>
</body>
</html>
As for the ng-repeat issue, it looks like you're using a filter incorrectly. Try this:
<div ng-repeat="glosa in glosor | orderBy:predicate:reverse | filter:search">
NB If you're trying to GET data, you should use $http.get instead of the $http.post(PROJEKT_SOKVAG+'/_myroute', you have.
It will save confusion down the road when maintaining the app.
Well, I found the error that I made, and it was a ridiculously simple error. Quite embarrasing actually... ;-)
I put glosor.svenska instead of glosa.svenska in the repeated block (inside the NGRepeat).
That's the bad thing with having the array name and the element name too similar, you might mix them up.
This means that I put the array instead of the repeated single array element inside the repeated block.
I am building an app ROR that uses Devise for authentication and the angular-devise gem to link my angularJS front-end to rails.
When I come to the landing page of the app though the console is showing an error which I understand to be devise trying to sign in and having no username or password for that. My question is: Why is it trying to sign in?
I admit my limited understanding of how Devise and Angular-devise work. So I am not being able to debug this error. On top of that I m having the error twice, which I understand to be devise trying to sign in twice. I still don't know where these calls are being made to improve the code.
navCtrl.js
angular.module('theNotesApp')
.controller('navCtrl', ['$scope', 'Auth', '$state', 'notesFactory', 'Flash', function($scope, Auth, $state, notesService, Flash) {
$scope.signedIn = Auth.isAuthenticated;
$scope.logout = Auth.logout;
$scope.successAlert = function() {
var message = '<strong> Well done!</strong> You successfully read this important alert message.';
Flash.create('success', message, 'custom-class');
// First argument (success) is the type of the flash alert
// Second argument (message) is the message displays in the flash alert
// You can inclide html as message (not just text)
// Third argument (custom-class) is the custom class for the perticular flash alert
};
// When the controller loads the function below is executed and the currentUser returned promise is set as
//the value of $scope.user
Auth.currentUser().then(function(user) {
$scope.user = user;
});
$scope.$on('devise:new-registration', function(event, user){
$scope.user = user;
});
$scope.$on('devise:login', function (event, user){
$scope.user = user;
});
$scope.$on('devise:logout', function (event, user){
$scope.user = {};
$state.go('welcome');
$scope.clear();
});
}])
authCtrl.js
angular.module('theNotesApp')
.controller('authCtrl',['$scope', '$state', 'Auth', function($scope, $state, Auth) {
$scope.login = function() {
Auth.login($scope.user).then(function () {
$state.go('home');
});
};
$scope.register = function() {
Auth.register($scope.user).then(function () {
$state.go('home');
});
};
}])
application_controller.rb
![class ApplicationController < ActionController::Base
# Prevent CSRF attacks by raising an exception.
# For APIs, you may want to use :null_session instead.
protect_from_forgery with: :exception
respond_to :json
before_action :configure_permitted_parameters, if: :devise_controller?
def angular
render 'layouts/application'
end
def configure_permitted_parameters
devise_parameter_sanitizer.for(:sign_up) << :username
end
end][3]
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>The Notes App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<!--jquerytag must be on top as it's required for bootstrap.min.js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--javascript plugins -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body ng-app="theNotesApp">
<nav class="navbar navbar-default" ng-controller="navCtrl" ng-show="signedIn()" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/home">The Notes App</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#/home" >+ New Note</a></li>
<li class="active" ng-hide="signedIn()">Register <span class="sr-only">(current)</span></li>
<li ng-hide="signedIn()">Login</li>
<li ng-show="signedIn()">{{user.email}}</li>
<li ng-show="signedIn()"><a ng-click="logout()">Logout</a></li>
</ul>
</div>
</div>
</nav>
<ui-view></ui-view>
</body>
</html>
welcome.html
<div class="intro-header fadein">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message" style="color: black">
<h1>The Notes App</h1>
<h3>Access your notes anywhere, anytime!</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Login</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">register</span>
</li>
</ul>
</div>
</div>
<div class="col-lg-12" >
</div>
</div>
</div>
<!-- /.container -->
</div>
In navCtrl.js you have:
Auth.currentUser().then(function(user) {
$scope.user = user;
});
This is responsible for one of the sign-in attempt.
I don't know where the other attempt is from. I would advise you to check for a similar call by running grep -r Auth\.currentUser app in you Rails root folder.
If my guess is right, signedIn() function will be fire up "sign_in.json" call.
If yes then it is due to ng-show="signedIn()" / ng-hide="signedIn()" that you have in application.html.erb.
Ng-show & ng-hide will be evaluated when the page is parsed.