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
Related
I have angularjs application and now I have added reactjs into my application but Now I get one confusion how to use angularjs existing directive in react js.
Can anyone help me to solve this problem?
Let's I give example code.
I have one existing directive fileselect in angular js and i want to use this directive in react js render function like this:
render() {
return (
<div className="attach-documents-controller">
<input id="file-upload" type="file" fileselect />
</div>
)
}
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
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.
I have a simple angular form that I want to use to send an image to a remote server. I am binding the image src property to a photo pulled from device camera.
But when it's submitted, the image data is empty (ng-model is not binding to the img src attribute). I am having to separately add the image to the form object prior to submitting. Should i have to do that, or can I bind the image data properly to the form?
HTML
<form ng-submit="sendPost(post)">
<img ng-src="{{imageURI}}" ng-model="$parent.post.image"/>
</form>
Controller
$scope.post = {
image: ''
}
$scope.imageURI = //this will be populated with a base64 encoded image pulled from the device camera roll
$scope.sendPost = function(post) {
//i want post.image to have the image data that was sent to the <img> tag via camera when the form is submitted
}
Your idea is too complicated, no need to bind ngModel as <img> is not an Angular directive, but a simple HTML tag.
Option 1
If you want your <form> to submit via Angular/AJAX, there's no need to have the <img>-tag in the form (or have a <form> at all), but I'll leave it in, as I am not sure if you want to show the image prior to submission or not.
Option 2
If you don't want to submit via Angular, you need an <input type="hidden" ng-model="post.imageURI">, but you also need the usual action attribute at the <form>
Back to option 1: just reduce your model to $scope.post, both for the HTML and the Angular code:
HTML
<form ng-submit="sendPost()">
<img ng-src="{{post.imageURI}}"/>
</form>
Controller
$scope.post = {}
$scope.post.imageURI = //this will be populated with a base64 encoded image pulled from the device camera roll
$scope.sendPost = function() {
// need to check here if $scope.post.imageURI is populated
$http.post(
...
data: $scope.post,
....
);
//i want post.image to have the image data that was sent to the <img> tag via camera when the form is submitted
}
In the HTML try change your ng-model from
<img ng-src="{{imageURI}}" ng-model="$parent.post.image />
to
<img ng-src="{{imageURI}}" ng-model="post.image" />
It should work.
I am developing an AngularJS Chrome app, and using the chrome.fileSystem.chooseEntry API, a user can choose a directory. I want to show the user the selected directory, also save the details into local storage to use it everytime the app load.
The former part - show the selected directory to the user does not seem to work.
Here's my template:
<div class="content" ng-controller="SelectCompanyController">
<form role="form">
<div class="form-group">
<strong>Add a New Company</strong>
</div>
<div class="form-group">
<label for="companyName">Enter Company Name</label>
<input id="companyName" type="text" class="form-control" ng-model="newCompany.companyName" style="width:80%"/>
</div>
<div class="form-group">
<label for="location" style="display: block">Select Company Folder Location</label>
<button id="location" ng-click="getUserSelectedFolder()">Choose Company Folder</button>
{{newCompany.location}}
</div>
</form>
</div>
My Controller:
app.controller('SelectCompanyController',['$scope','ReadLocalDBDataService',
function($scope, ReadLocalDBDataService){
$scope.newCompany={};
getUserSelectedFolder=function(){
ReadLocalDBDataService.getUserSelectedFolder().then(function(fileEntry){
chrome.fileSystem.getDisplayPath(fileEntry, function(displayPath){
console.log(displayPath);
$scope.newCompany.location=displayPath;
console.log($scope.newCompany);
});
});
};
$scope.getUserSelectedFolder=getUserSelectedFolder;
}]);
My service
app.factory('ReadLocalDBDataService',['$q', function($q){
var getUserSelectedFolder=function(){
var deferred=$q.defer();
chrome.fileSystem.chooseEntry({type: 'openDirectory'}, function(fileEntry){
if(!fileEntry) deferred.reject("Please select the folder where the Companys' files are present");
else{
var error = chrome.runtime.lastError;
if(error) deferred.reject("An error occurred while selecting the folder. Details: "+error);
else{
deferred.resolve(fileEntry);
}
}
})
return deferred.promise;
};
return {
getUserSelectedFolder: getUserSelectedFolder
};
}]);
In my controller, I have got logs showing that that folder has been set to something like ~/Dropbox/folder... Why is this not showing up on the screen?
Edit:
I just realised that, after I select the folder once, nothing happens, but if I select the folder again, then it shows up. Why is not showing up the first time?
Here's a response from a developer of the chrome.fileSystem APIs when I asked him to look at your question.
"This question might be written in such a way as to be to be easier to answer. (Its a lot easier when the user can reduce their problem down to a simple example.) I can't immediately find anything wrong with it, but it sounds like the Chrome API part is working fine, but the display isn't updating for some reason ("In my controller, I have got logs showing that that folder has been set to something like ~/Dropbox/folder... Why is this not showing up on the screen?"). I don't know Angular so I can't help with that."
It sounds like his suggestion is to
1.) Reduce the example down to something as simple as possible.
2.) Investigate why the display might not be updating the first time.