I am trying to add swagger in my Angularjs project
OBJECTIVE
I want to test my API via swagger by sending a payload and in return I will get response code 200.
I am following tutorials:
https://www.phpflow.com/jquery-plugin-2/how-to-integrate-swagger-with-angular/
http://orange-opensource.github.io/angular-swagger-ui/ (WORKING DEMO of TUTORIAL)
What I have done so far:
Added these two libraries in my project
<script src="bower_components/angular-swagger-ui/dist/scripts/swagger-ui.js"></script>
<link rel="stylesheet" href="bower_components/angular-swagger-ui/dist/css/swagger-ui.min.css">
HTML
<div >
<h3 class="dispInline">Rest Json file:</h3>
<form name="urlForm" ng-submit="urlForm.$valid&&(swaggerUrl=url)" class="form-inline dispInline">
<input type="url" placeholder="swagger URL" class="form-control" id="url" method="post" name="url" ng-model="url" required style="width:400px">
<button type="submit" class="btn btn-primary">explore</button>
</form>
<div swagger-ui url="swaggerUrl" try-it="true" error-handler="myErrorHandler" transform-try-it="myTransform"></div>
</div>
CONTROLLER
$scope.url = 'https://server.event.com/alert/event/1.0/eventpublicationmanagement_01/events';
// error management
$scope.myErrorHandler = function(data, status){
alert('failed to load swagger: '+status);
console.log(data);
};
// transform try it request
$scope.myTransform = function(request){
request.headers['Authorization'] = 'Bearer 123123123-1231-123-134313313c';
};
But when I click on explore, I get 405 error that method is not allowed. My method is post but browser is somehow sending GET. My token is also not sending in request. How can I solve that?
Also, I am confused because with working of swagger, My API is published on WSO2 API Store which contains a default swagger and my API swagger looks something like this:
If I shall call my API by clicking on explore button, will it show/return an option like API Store is showing? -> /eventpublicationmanagement_01/events
How will I set my JSON as well?
I am very confused. Some guidance and help will be very much appreciated.
To use Swagger You need a swagger.json file. More info You can find in the link: How to generate swagger.json
Related
Hi i have create that sending request to asp.net web api when page loads using angularjs 'data-ng-Init' this is working on localhost and local IIS server but it is not working on Server System IIS server. for explanation purpose
html code
<div ng-controller="myCtrl">
<div ng-if="status==true">
<input type="date" ng-model="date" ng-change="getyear("#Url.Content("~/api/getDate")")" />
<div data-ng-Init="GetData('#Url.Content("~/api/getDate")')></div>
</div>
<div ng-if="status==false">
<input type="date" ng-model="date" ng-change="getYear("#Url.Content("~/api/getYear")")" />
<div data-ng-Init="GetYear('#Url.Content("~/api/getYear")')></div>
</div>
</div>
AngularJS
$scope.getData=function(link){
$http({
method:'POST',
url:link,
data:{data:'somedata'}
}).then(function(result){
...result
},function(error){
...error
});
}]);
like this i have return.
i can send request without writing the code in function, but i have two div's tag which is written in if condition any one div tag will executes.
And the code was working when ng-change means when change the date its working fine but only not working when page loads 'data-ng-Init'.
I am Getting Error like this "192.124.213.12/projectname/api/getDate/ 500 Internal Server Error"
In ionic, I have an array of image keys. Using these keys we want to get an Amazon S3 signed URL.
I have :
<div *ngFor="let image of item.images">
<div>Key: {{image}} -- Url: {{getImageUrl(image) }}</div>
</div>
In the Javascript part I have following:
getImageUrl(imageKey) {
this.s3.getSignedUrl('getObject', {'Key': imageKey}, (err, url) => {
console.log(url);
return url;
});
}
In the logs I do see the URLs are correctly. However in the html page; there is nothing. I have tried many things; e.g. by having the method getImageUrl create a new variable; this remained undefined.
How should I modify my code to get this working?
I strongly have the impression that this is caused by the asynch nature of angularJS/Ionic/... and that probably I need to work with callbacks. However; I can't get my head around how you would get that callback into the HTML...
I hope this is a beginner's question!
thanks!
The problem is if you want to display an image, you should use the tag, empty div wont show anything, try this
<div *ngFor="let image of item.images">
<div>
<h1> Key: {{image}} -- Url: {{getImageUrl(image) }}
</h1>
<img *ngIf="image" [src]= {{getImageUrl(image) }}>
</div>
</div>
I am working on Angular js MVC application. I need a local file path which user selects from his/her local file system.
I know I can't get full file path in Javascript so I tried to get this using c#. So I added 1 chtml page with input box & controller to get the file
Here is chtml code
<div class="col-md-9">
#using (Html.BeginForm("GetFile", "File", FormMethod.Post, new { enctype = "multipart/form-data" })) {
<input type="file" name="file" />
<input type="submit" name="Submit" id="Submit" value="Upload" />
}
</div>
In controller I wrote
[HttpPost]
public ActionResult GetFile(HttpPostedFileBase file) {
if (file != null) {
string justFileName = Path.GetFullPath(file.FileName);
}
return justFileName;
}
}
Also I have added the route in routeprovider
.when('/File', {
templateUrl: 'File/Index'
})
I can easily access this page via URL. But now I need to call this page in an AngularJS modal popup or to show in a page itself on button click. I'm a bit newer to AngularJS. I tried with ng-view but it won't work. Please let me know If I am in a wrong direction? Is there any way to call chtml inside HTML? The question may be misleading but It is my final moto.
You need to add following line in your angular js controller when you want popup to be shown.
ngDialog.open({template: 'File/Index'});
Reference:
http://ngmodules.org/modules/ngDialog
I am playing with readymade code in my squarespace website. I found a way to upload files to my google drive by setting up a readymade google apps script. It works fine on the url given by publishing the app.
However i implemented the html code from the readymade solution on my squarespace page by code injection and it obviously doesn't work. Probably there is no info in the script code that leads to the particular URL generated by publishing the app.
This is the code i use for injection in squarespace (i need some code that connects me to the google app script server side)
<div align="center">
<table width="459" border="0">
<tbody>
<tr>
<td width="462"><div align="center">
<hr>
</div>
<form id="myForm" align="center">
<input type="text" name="myName" placeholder="Your name..">
<input type="file" name="myFile">
<input type="submit" value="Upload File"
onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</form>
<div id="output"></div>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
<hr></td>
</tr>
</tbody>
</table>
<h3> </h3>
<p> </p>
</div>
Now here is what the code on server side looks like:
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(form) {
try {
var dropbox = "RHT";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var blob = form.myFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + form.myName);
return "File uploaded successfully " + file.getUrl();
} catch (error) {
return error.toString();
}
}
Please help this must be very simple code to add to make it work.
Thanks a lot
You can now do this by changing the first few lines of your Google Script to the following;
function doGet() {
return HtmlService.createHtmlOutputFromFile('index.html').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
Then you can either add a Code Block into Squarespace and an iframe, or I have mine located under the Advanced tab of a Form Block, in the POST-SUBMIT HTML section (users fill out my form first, then are able to upload their content with the script) I use this code, but you can adjust the widths or whatnot;
<iframe src="https://YourPublishedGoogleScriptURLhere"width="625"height="361"frameborder="0"></iframe>
I have this same issue. I believe the issue is that Google is blocking us from using the script in iframes and such, outside of their domain. My current solution is to
Create a Form in Squarespace
Enter required information into the "fields"
In the Advanced tab, insert code obtained from http://www.squareguru.com/form-redirect which will automatically redirect users to your Google Script. The code looks like this;
<meta http-equiv="refresh" content="0; url=https://script.google.com/macros/s/etc">
<script>
window.location.href = 'https://script.google.com/macros/s/etc';
window.location.assign('https://script.google.com/macros/s/etc');
</script>
In my Google Script "server.gs" page, I just changed the line return "File uploaded successfully " + file.getUrl(); to return "File uploaded successfully. Please click the back button in your browser to return to Site Name";
If anyone knows how to have a Google Apps Script redirect to another URL after it is completed instead of displaying "File uploaded successfully", then I could have it redirect to a page on my site which says the upload completed successfully and to continue looking at our other blogs, etc.
I'm also testing out jotform.com which lets you do file uploads into Google Drive in their forms, but they charge a monthly fee unless their free tier covers your needs. They then give you the code to insert the form into Squarespace.
Hope this was helpful. If anyone has ideas to redirect to another URL after the Google Apps Script completes, please let me know.
EDIT: I imagine you would also need this <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> which is placed in Advanced > Code Injection > Header, to allow the script run.
When i upload any image file which contains '=' in filename then server says that 404 page not found. and if i upload any other file which is not contain '=' in name then it will successfully uploaded. is there any server access issue. should i make change in .htaccess file? because i have host this code in two different host provider. godaddy and namecheap. godaddy allows us to upload any image with any name i.e it uploads image which containt '=' but same code not work on namecheap.
I am sure that code doesn't have any issue.
I am using below code
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$("#uploadForm").on('submit',(function(e) {
e.preventDefault();
alert(filename);
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
},
error: function(){}
});
}));
});
</script>
<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
<div id="targetLayer">No Image</div>
<div id="uploadFormLayer">
<label>Upload Image File:</label><br/>
<input name="userImage" type="file" class="inputFile" />
<input type="submit" value="Submit" class="btnSubmit" />
</form>
Actually I have tried lot's off things but it was not code issues. it was server side issues. there were some mod_security rule which result in blocks for your image up-loader. Now, They(Namecheap) have whitelisted the rule related to the issue, and now everything work properly