I am trying to setup a dropzone image file upload in my Laravel 5.3 app, but whenever I try to upload an image I get a above mentioned error. I am sending a csrf_token in my script like this, so not sure why I get this error?
var token = "{{ csrf_token() }}";
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#dropzoneFileUpload", {
url: "/admin/upload",
params: {
_token: token
}
});
Follow these steps, I hope that will solve your problem..
Add this line into your head tag section
<meta name="csrf-token" content="{!! csrf_token() !!}">
and then add these lines before your </body> end/closing section.
var csrf_token = $('meta[name="csrf-token"]').attr('content');
$.ajaxSetup({
headers: {"X-CSRF-TOKEN": csrf_token}
});
so, after doing above steps, you dont need to send token into your dropzone ajax request. eg
params: {
_token: token // dont need this line after following above steps
}
Related
I'm sending a json response with a message to client-side. It has a hyplerlink added to another page. But when I print my result in front-end tag shows as a text. Any idea how to fix the issue.
And this is a NextJs Project
Response Sending code.
res.status(500).json({
status: false,
msg: `User Is Already Acticated. Please <a href="${
proto + req.headers.host
}/login">Login</a>`,
});
Front-end result
Tried adding Link replacing a. But it didn't worked.
You can use dangerouslySetInnerHTML:
function Example({ response }) {
return (
<div dangerouslySetInnerHTML={{ __html: response.msg }} />
);
}
I have a very simple page in Angular2, which contains a google Sign in button. Here is my code :
login.html
<meta name="google-signin-client_id" content="MYID.apps.googleusercontent.com">
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
</script>
<div class="g-signin2 google-connect" data-onsuccess="onSignIn"></div>
login.ts
ngOnInit(){
var script = document.createElement('script');
script.src = 'https://apis.google.com/js/platform.js';
document.body.appendChild(script);
}
// This code simply loads the JS after the page is rendered, since it doesn't work with only the script tag on the top of the HTML
The button is working very well, I can sign in perfectly, but I can't get the user informations. The onSignIn function is not triggering.
I've tried to change the data-onsuccess by multiple directives, I created functions inside my controller, or let the one google provides in my HTML, but I have no output on my console. I can't manage to retrieved the data of a connection. I'd juste like to get basic informations of an user (ID and mail). I can't use Angular2 plugins since i'm developing under Ionic.
Thank you in avance for any help :)
I have a webapp that's collecting photos, and uploading them to AWS S3. Periodically, I go through and review the photos, and appropriate ones are then uploaded to another webservice. That's where I'm having problems. I use use HTTP.get to retrieve the image content from S3, then have attempted to use HTTP.post to send the content to the other webservice, which gives me an error 'Invalid Object Type.' I know the other webservice works, as I'm able to upload directly to it by POSTing a form with a file directly.
function uploadImageTest(){
var thisImage = HTTP.get("https://381-crowd.s3-us-west-2.amazonaws.com/y2svBWnk95ACo3h9s/1427384292798-backgroundImage.jpg", {}, function(error, result){
var postURL = "https://www.onuma.com/plan/webservices/post.php";
var options = {
content: result.content,
query: {
u: "username",
p: "password",
sysID: "sysID",
bldgID: "bldgID",
rawname: "fromMeteor",
ext: ".jpg",
attach: ""
},
};
HTTP.post(postURL, options, function(error2, result2){
console.log("Posted File: " + error2 + " _ " + result2.content);
});
});
}
Any idea as to why simply posting the content of the image wouldn't be accepted as a valid image, like it would if sent by a form?
edit: This bit of code works for uploading a file. I do know that it needs to have the name attribute in the input to work:
<form method="post" enctype="multipart/form-data" action="https://www.onuma.com/plan/webservices/post.php?u=username&p=password&sysID=sysID&bldgID=bldgID&rawname=essential&ext=.jpg&attach">
<input type="file" name="images" id="images" multiple />
<button type="submit" id="btn">Upload File</button>
</form>
Edit 2: Here's a working curl command...took a while to get it running :/
"https://www.onuma.com/plan/webservices/post.php?u=<username>&p=<password>&sysID=<sysID>&bldgID=<bldgID>&rawname=redX&ext=.jpg&attach="
I have this simply ajax/jquery call to a symfony2 controller/action
$.ajax({
type: 'post',
url: 'http://symfony.local:8080/app_dev.php/api/searches/guitar.json',
success: function(results) {
}
});
I'd need to change the first part of the url 'http://symfony.local:8080/app_dev.php/api/searches/guitar.json' in order to make it independent from the front controller I'm using. How can I achieve this?
First, why are you supplying the whole URL? You could omit the domain part so that the path is relative:
$.ajax({
type: 'post',
url: '/app_dev.php/api/searches/guitar.json',
success: function(results) {
}
});
Second, you can set up the prefix for your AJAX calls in a Symfony view:
<script type="text/javascript"></script>
{% if app.environment == 'dev' %}
var root = '/app_dev.php/';
{% else %}
var root = '/';
{% endif %}
</script>
I've introduced a window.root variable here. You can use it in your scripts then:
// ...
url: root + '/api/searches/guitar.json',
// ...
And as suggested in the comments, the best way here would be passing the URL to your scripts with a separate routing provider for JavaScript.
You could set the url as the href and catch it or set it as some of data tag.
As href
Your link
Link
And the javascript
$('a.ajax-link', function (e) {
e.preventDefault();
// Stop link updating page
var href = $(this).attr('href);
$.ajax({
type: 'post',
url: href,
....
});
});
Or as a data field
Your link
<a data-href="{{ path('your_route') }}" class="ajax-link">Link</a>
And the javascript
$('a.ajax-link', function (e) {
e.preventDefault();
// Stop link updating page
var href = $(this).data('href);
... see above ...
});
With either of these ways there is no use for FOSJsRouting or hard coded routes.
I followed the steps from the webite below: https://developers.google.com/analytics/devguides/reporting/embed/v1/devguide#client-id
when I execute the code below I get the error message in my console
I have maintained "localhost" in my Javascript domain when I created my client id.
Can you pls advise? thanks
<!DOCTYPE html>
<html>
<head>
<title>Embed API Demo</title>
</head>
<body>
<!-- Step 1: Create the containing elements. -->
<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>
<!-- Step 2: Load the library. -->
<script>
(function(w,d,s,g,js,fjs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
<script>
gapi.analytics.ready(function() {
// Step 3: Authorize the user.
var CLIENT_ID = 'XXXXXXXX';
gapi.analytics.auth.authorize({
container: 'auth-button',
clientid: CLIENT_ID,
});
// Step 4: Create the view selector.
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector'
});
// Step 5: Create the timeline chart.
var timeline = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'dimensions': 'ga:date',
'metrics': 'ga:sessions',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'LINE',
container: 'timeline'
}
});
// Step 6: Hook up the components to work together.
gapi.analytics.auth.on('success', function(response) {
viewSelector.execute();
});
viewSelector.on('change', function(ids) {
var newIds = {
query: {
ids: ids
}
}
timeline.set(newIds).execute();
});
});
</script>
</body>
</html>
Object {error: Object}
error: Object
errors: Array[1]
0: Object
message: "immediate_failed"
reason: "invalidParameter"
__proto__: Object
length: 1
__proto__: Array[0]
message: "immediate_failed"
__proto__: Object
__proto__: Object
cb=gapi.loaded_0:433
_.nH cb=gapi.loaded_0:433
_.du.Vh cb=gapi.loaded_0:459
YP.Ka cb=gapi.loaded_0:466
_.k.iu cb=gapi.loaded_0:291
ix cb=gapi.loaded_0:431
(anonymous function) cb=gapi.loaded_0:433
h.BE cb=gapi.loaded_0:137
Wq cb=gapi.loaded_0:140
_.C.ye cb=gapi.loaded_0:140
Ap
Something must be wrong with your server or your client ID origins.
Copying and pasting that code exactly into jsbin.com (changing only the client ID) I'm able to get this working. All I had to do was add http://run.jsbin.com to the list of approved origins for the client ID I provided.
Here's a working example:
http://jsbin.com/batexelohuve/1/edit
If you add http://run.jsbin.com to your client ID's origins list and it works in jsbin, then it means something is wrong with your setup and not the code you provided.
Once your Client ID is generated, copy and paste it into your code and save your code as an .html instead of .php. For localhost, usually it is enough to just write it as http://localhost. Unless you specified a certain port so you might want to change it. Otherwise the usual one will do. To know which port your computer is listening to, access your httpd.conf file and find the listen command.
To add on, please don't forget to put the `` sign when you write the ID.
Hope that helps to solve your problem!
I think you need to import JavaScript API in your code. Try this:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
you have to specify Origin uri and Authorized uri properly, for example if your running demo in http://localhost:8080 then you have add this url in both Origin URI and Authorized URI then you will get an access button in browser.