Hey guys i'm having some problems with how to upload and save images using angularjs and flowjs.
I'm new to angularjs and had my problems trying to make an image upload but i got it working with ng-flow, still i'm having some problems trying to save the image to some designed path.
One exemple and similar problem is this one How and where save uploaded files with ng-flow? , but i still couldn't made it work.
Here's the code for the upload and preview, working fine so far so good:
<div class="ng-scope add-file" flow-init="{target:'../WebService/WebService.asmx/setImage'}"
flow-name="image.flow" flow-files-submitted="$flow.upload()"
flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]">
<div class="row" style="margin-top: 0px!important;">
<div class="col-sm-10">
<p><label for="image">ADD PHOTO</label></p>
<table style="border: 0px;">
<tr>
<td ng-repeat="file in $flow.files" class="ng-scope thumbnail" style="margin: 3px 3px 3px 3px;">
<div class="text-right">
<a class="glyphicon glyphicon-remove" ng-click="file.cancel()"
style="color:#ff4b4b; text-decoration: none!important;"></a>
</div>
<div class="frame" ng-show="$flow.files.length" style="min-width: 210px!important;">
<span class="helper"></span>
<img flow-img="file" src="" class="image-thumbnail">
</div>
<div class="progress progress-striped" ng-class="{active: file.isUploading()}">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" ng-style="{width: (file.progress() * 100) + '%'}">
</div>
<span class="sr-only ng-binding">1% Complete</span>
</div>
</td>
</tr>
</table>
</div>
<div class="col-sm-2 text-right drop" flow-drop="" ng-class="dropClass">
<span class="file-upload btn btn-primary" flow-btn="">
Choose file
<input type="file" multiple="multiple" style="visibility: hidden; position: absolute;">
</span>
</div>
</div>
But here's the problem, i don't know how or what to do to create this image in some path...
I'm passing to ng-flow-init my webservice method as it will send via url parameters like this:
flow-init="{target:'../WebService/WebService.asmx/setImage'}"
and the ws receive it like the following example:
../setImage?flowChunkNumber=1&flowChunkSize=1048576&flowCurrentChunkSize=198637&flowTotalSize=198637&flowIdentifier=198637-1jpg&flowFilename=1.jpg&flowRelativePath=1.jpg&flowTotalChunks=1
'flowChunkNumber=1
'flowChunkSize=1048576
'flowCurrentChunkSize=111168
'flowTotalSize = 111168
'flowIdentifier=111168-Figura1png
'flowFilename=Figura1.png
'flowRelativePath=Figura1.png
'flowTotalChunks = 1
What should i do with these informations or what do i need to send the data (binary, base64, etc) and save/create the image on my server?
Edit 1: I already know that i need the file data and figured that i do need an upload.php to transform and send the file.
Still can't even think about how to create an upload.php for vb.net
After a long time searching i decided to move forward and do with an entirely different way, i removed pretty much all my custom css and style to make it more clean to read.
Before anything i changed somethings like i'm not using ng-flow anymore, it's purely angularjs and javascript, and i'm encoding the file to Base64 and decoding it on my server side.
HTML:
<div class="row">
<div class="col-sm-10">
<table>
<tr>
<td ng-repeat="image in images">
<div>
<img id="imagePreview{{$index}}" src="#" alt="" />
</div>
</td>
</tr>
</table>
</div>
<div class="col-sm-2 text-right">
<input type="file" id="img" />
<button ng-click="addImage()" type="button">ADD</button>
</div>
</div>
AngularJS Controller:
$scope.images = [];
//Don't let the same file to be added again
$scope.removeImage = function (index) {
$scope.images.splice(index, 1);
}
//Add new file to $scope.images
$scope.addImage = function () {
var
reader = new FileReader(),
$img = $("#img")[0],
index = $scope.images.length;
reader.onload = function (e) {
if ($scope.images.indexOf(e.target.result) > -1) return;
$scope.images.push(e.target.result);
if (!$scope.$$phase) $scope.$apply();
$("#imagePreview" + index).attr('src', e.target.result);
$scope.uploadImage(index);
}
reader.readAsDataURL($img.files[0]);
};
And here it is how to get the files converted to Base64:
$scope.uploadImage = function (index) {
var res = $scope.images[index];
//{...} Your code here, method call etc.
}
Related
I've written a webpart in Vue.js where the user can write a lot of information. When I tested the webpart in my SharePoint workbench it seemed to look fine.
However, when I deployed the .sppkg file to the SharePoint site, the size of the webpart changed and I couldn't click on Create or Cancel anymore.
If I change the height, I can't scroll down. Is there a way to fix this?
AddAthleticTestDialog: function() {
var SelectedPlayerID = this.$store.state.selectedPlayer.ID;
var $this = this;
this.$modal.show(
AddAthleticTest,
{
text: SelectedPlayerID
},
{
draggable: true,
width: 1200,
height: 700
},
{
closed: function(event) {
$this.loadHistory(SelectedPlayerID);
}
}
);
},
Here's how it's shown in the workbench:
And here's how it's shown when I upload it on the webpage:
Here's a small part of the code:
<template>
<div class="container p-3">
<tbody>
<tr>
<th scope="row" style="width:200px; padding-left:0;padding-right:0">Antropo.</th>
</tr>
</tbody>
<div class="row">
<div class="col">
<label for="exampleInputAthletes">Athletes</label>
<input v-model="athleticsData.Athletes" type="text" class="form-control" id="Athletes" placeholder="Enter Athletes" />
</div>
<div class="col">
<label for="exampleInputTestingDay">Testing Day</label>
<input v-model="athleticsData.TestingDay" type="text" class="form-control" id="TestingDay" placeholder="Enter Testing Day" />
</div>
A h:selectOneRadio results in <input type="radio"> in a table and p:selectOneRadio in <input type="radio"> in a table with some divs around the input. The id for both is [form id]:[selectOneRadio id]:[option number] which I can use successfully for the plain JSF in a Graphene functional test when accessing it with #FindBy(id="[...]") whereas the PrimeFaces variant fails due to org.openqa.selenium.ElementNotInteractableException. Investigating the generated HTML I don't see the difference
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="/34696ceb-eeaa-4b35-88dd-f3c8fc5901bf/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo">
<link type="text/css" rel="stylesheet" href="/34696ceb-eeaa-4b35-88dd-f3c8fc5901bf/javax.faces.resource/primefaces.css.xhtml;jsessionid=48ca919d0b7e89661f92149ac321?ln=primefaces&v=5.0">
<script type="text/javascript" src="/34696ceb-eeaa-4b35-88dd-f3c8fc5901bf/javax.faces.resource/jquery/jquery.js.xhtml;jsessionid=48ca919d0b7e89661f92149ac321?ln=primefaces&v=5.0"></script>
<script type="text/javascript" src="/34696ceb-eeaa-4b35-88dd-f3c8fc5901bf/javax.faces.resource/primefaces.js.xhtml;jsessionid=48ca919d0b7e89661f92149ac321?ln=primefaces&v=5.0"></script>
<title>Facelet Title</title>
</head>
<body>
<form id="mainForm" name="mainForm" method="post" action="/34696ceb-eeaa-4b35-88dd-f3c8fc5901bf/index.xhtml;jsessionid=48ca919d0b7e89661f92149ac321" enctype="application/x-www-form-urlencoded">
<input name="mainForm" value="mainForm" type="hidden">
<table id="mainForm:mainSelectOneRadio">
<tbody>
<tr>
<td>
<input name="mainForm:mainSelectOneRadio" id="mainForm:mainSelectOneRadio:0" value="a" type="radio">
<label for="mainForm:mainSelectOneRadio:0"> a</label>
</td>
<td>
<input name="mainForm:mainSelectOneRadio" id="mainForm:mainSelectOneRadio:1" value="b" type="radio">
<label for="mainForm:mainSelectOneRadio:1"> b</label>
</td>
<td>
<input name="mainForm:mainSelectOneRadio" id="mainForm:mainSelectOneRadio:2" value="c" type="radio">
<label for="mainForm:mainSelectOneRadio:2"> c</label>
</td>
</tr>
</tbody>
</table>
<table id="mainForm:mainSelectOneRadioPrime" class="ui-selectoneradio ui-widget">
<tbody>
<tr>
<td>
<div class="ui-radiobutton ui-widget">
<div class="ui-helper-hidden-accessible">
<input id="mainForm:mainSelectOneRadioPrime:0" name="mainForm:mainSelectOneRadioPrime" value="aPrime" type="radio">
</div>
<div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span class="ui-radiobutton-icon ui-icon ui-icon-blank"></span>
</div>
</div>
</td>
<td>
<label for="mainForm:mainSelectOneRadioPrime:0">aPrime</label>
</td>
<td>
<div class="ui-radiobutton ui-widget">
<div class="ui-helper-hidden-accessible">
<input id="mainForm:mainSelectOneRadioPrime:1" name="mainForm:mainSelectOneRadioPrime" value="bPrime" type="radio">
</div>
<div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span class="ui-radiobutton-icon ui-icon ui-icon-blank"></span>
</div>
</div>
</td>
<td>
<label for="mainForm:mainSelectOneRadioPrime:1">bPrime</label>
</td>
<td>
<div class="ui-radiobutton ui-widget">
<div class="ui-helper-hidden-accessible">
<input id="mainForm:mainSelectOneRadioPrime:2" name="mainForm:mainSelectOneRadioPrime" value="cPrime" type="radio">
</div>
<div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span class="ui-radiobutton-icon ui-icon ui-icon-blank"></span>
</div>
</div>
</td>
<td>
<label for="mainForm:mainSelectOneRadioPrime:2">cPrime</label>
</td>
</tr>
</tbody>
</table>
<input name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-485558793831512050:990657069126697889" autocomplete="off" type="hidden">
</form>
</body>
</html>
nor do I if I deploy the application on Payara 4.1.2 or any other reason for the ElementNotInteractableException.
The access is done with
#RunWith(Arquillian.class)
public class MyManagedBeanTest {
private static final String WEBAPP_SRC = "src/main/webapp";
private final static Logger LOGGER = LoggerFactory.getLogger(MyManagedBeanTest.class);
#Deployment(testable = false)
public static Archive<?> createDeployment0() throws TransformerException, XPathExpressionException, ParserConfigurationException, SAXException, IOException {
WebArchive retValue = ShrinkWrap.create(WebArchive.class)
.add(EmptyAsset.INSTANCE, "beans.xml")
.addClasses(MyManagedBean.class)
.addAsWebInfResource(
new StringAsset("<faces-config version=\"2.0\"/>"),
"faces-config.xml");
Maven.configureResolver().workOffline().resolve("richtercloud:graphene-click-input-radio:war:1.0-SNAPSHOT").withoutTransitivity().asList(JavaArchive.class).forEach(dependency -> retValue.addAsLibrary(dependency));
//add all webapp resources
retValue.merge(ShrinkWrap.create(GenericArchive.class)
.as(ExplodedImporter.class)
.importDirectory(WEBAPP_SRC)
.as(GenericArchive.class), "/", Filters.include(".*\\.(xhtml|css|js|png)$"));
ByteArrayOutputStream archiveContentOutputStream = new ByteArrayOutputStream();
retValue.writeTo(archiveContentOutputStream, Formatters.VERBOSE);
LOGGER.info(archiveContentOutputStream.toString());
return retValue;
}
#Drone
private WebDriver browser;
#ArquillianResource
private URL deploymentUrl;
#FindBy(id = "mainForm:mainSelectOneRadio:0")
private WebElement mainSelectOneRadioOption0;
#FindBy(id = "mainForm:mainSelectOneRadioPrime:0")
private WebElement mainSelectOneRadioPrimeOption0;
#Test
public void testAll() {
browser.get(deploymentUrl.toExternalForm()+"index.xhtml");
LOGGER.debug(browser.getPageSource());
mainSelectOneRadioOption0.click();
mainSelectOneRadioPrimeOption0.click();
}
}
I'm searching for a solution which triggers JSF action methods and AJAX listeners!
I'd be interested in a generic approach as well, e.g. p:selectOneButton produces
<div id="mainForm:mainSelectOneButtonPrime" class="ui-selectonebutton ui-buttonset ui-widget ui-corner-all">
<div class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left">
<input id="mainForm:mainSelectOneButtonPrime:0" name="mainForm:mainSelectOneButtonPrime" value="aPrime" class="ui-helper-hidden" type="radio">
<span class="ui-button-text ui-c">aPrime</span>
</div>
<div class="ui-button ui-widget ui-state-default ui-button-text-only">
<input id="mainForm:mainSelectOneButtonPrime:1" name="mainForm:mainSelectOneButtonPrime" value="bPrime" class="ui-helper-hidden" type="radio">
<span class="ui-button-text ui-c">bPrime</span>
</div>
<div class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right">
<input id="mainForm:mainSelectOneButtonPrime:2" name="mainForm:mainSelectOneButtonPrime" value="cPrime" class="ui-helper-hidden" type="radio">
<span class="ui-button-text ui-c">cPrime</span>
</div>
</div>
<input name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-5130093024933213812:2291815208147638618" autocomplete="off" type="hidden">
which doesn't seem to have anything in common with the HTML generated for p:selectOneRadio at first sight. Maybe there's a trick.
I'm using PrimeFaces 6.1.
ui-helper-hidden-accessible is a JQuery layout helper to hide items visually. The radio button you see is actually the parent element, <div class="ui-radiobutton ui-widget">.
The problem can be resolved by clicking on the radio button label. The 'for` attribute put the focus on the input label associated with it
#FindBy(css = "[for='mainForm:mainSelectOneRadioPrime:0']")
private WebElement mainSelectOneRadioPrimeOption0;
#Guy has the right answer.
The issue here is that PrimeFaces is applying its own styling on top of the HTML which is covering the element you are trying to click.
Selenium checks that the targeted element mainForm:mainSelectOneRadio:0 receives the events when the element on top is clicked. But in this case the overlay is done with a sibling container which is not an descendant of targeted element. Thus Selenium assumes that the element will not receive the events and raises an ElementNotInteractableException (see event bubbling and propagation).
You can clearly see the issue by visiting oneRadio.xhtml and by inspecting the radio button with a right click. You'll see that the selected DOM element and the <input> are located in two different branches of the DOM tree.
To overcome this issue, either click the label since it has no overlay (see solution from #Guy). The label has the for attribute which mean that all the events are forwarded to the element assigned to for which is the targeted <input>.
You could also directly click the overlay. Though, you'll have to use an XPath to express the relationship.
Parent of parent of the targeted <input> :
#FindBy(xpath = "id('mainForm:mainSelectOneRadioPrime:2')/../..")
private WebElement mainSelectOneRadioPrimeOption0;
Or first <td> having the targeted <input> :
#FindBy(xpath = "//td[.//input[#id='mainForm:mainSelectOneRadioPrime:2']]")
private WebElement mainSelectOneRadioPrimeOption0;
A work's client has reported an issue in our application when working with IE11.
On an specific form, sometimes, when opening it, if you type, the typed text won't show. If I open developer tools, it suddenly shows.
This is the rendered html belonging to that form:
<div class="col-sm-6 ">
<div class="form-group" data-ng-show="myform.txtPropietario.visible">
<label class="col-md-4 control-label my-show-hide-animation">Propietario:</label>
<div class="col-md-8">
<div class=" ">
<input name="txtPropietario" class="form-control text-left ng-pristine ng-valid" input-alpha-numeric="ES" onblur="this.value=this.value.toUpperCase();" data-ng-model="myform.values.txtPropietario" data-ng-disabled="myform.txtPropietario.disabled" type="text" step="0.01" maxlength="50" placeholder=" "></div>
<ul class="errores my-show-hide-animation ng-hide" data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$invalid && myform.procesado"><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.required" class="ng-hide"><span>Campo obligatorio</span></li><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.pattern" class="ng-hide"><span>El formato del dato ingresado no es vĂ¡lido.</span></li>
</ul>
</div>
</div>
</div>
The app work's over AngularJs and html is built over Bootstrap 3.
Any idea why is this happening?
It's hard to tell without seeing the CSS, however i encountered this issue a while back and fixed it by setting the height of the input box.
My theory is that IE didn't think there was enough height to show the text in the font size I had specified.
For example
<input type="text" id="example" style="height: 40px" />
I hope this helps.
I'm currently struggling while implementing a Spider for a Web Application, because my pages are not well structured at all. There're fields on the page, but sometimes they don't appear, and it's difficult to distinguish those because they only use class, not id as identifier. Is there a method to optimize the way we get the data in pages?
Below, an example of one page to crawl :
<div class = 'view-activity-field-wrapper even' style = 'display:none' >
<div class="view-activity-label">Status Notes <span><img src="/images/helpIcon.png" alt="" width="8" height="10" align="absmiddle" data-tooltip="stickyStatusNotes" /></span>
</div>
<div class="view-activity-field"></div>
</div>
<div style = 'clear:both'></div>
<div class = 'view-activity-field-wrapper odd' style = 'display:none' >
<div class="view-activity-label">Relevant Question <span><img src="/images/helpIcon.png" alt="" width="8" height="10" align="absmiddle" data-tooltip="stickyRelevantQuestion" /></span>
</div>
<div class="view-activity-field"></div>
</div>
<div style = 'clear:both'></div>
<!-- KEEP VALUE PROVIDED HERE -->
<div class = 'view-activity-field-wrapper odd' style = 'display:none' >
<div class="view-activity-label">Value Provided <span><img src="/images/helpIcon.png" alt="" width="8" height="10" align="absmiddle" data-tooltip="viewvalueprovided" /></span>
</div>
<div class="view-activity-field"></div>
</div>
<div style = 'clear:both'></div>
I'm trying to implement a Google Custom Search Engine into my website. So far, I've been able of changing my snippets layout, and show the variables Google shows in its examples:
http://googleajaxsearchapi.blogspot.com.es/2010/04/rendering-custom-data-in-custom-search.html
Well, in the examples, everything looks great, BECAUSE THEY KNOW THE VALUES THEY MAY PRINT. I mean, if you see this snippet:
<div id="mysite_thumbnail">
<div data-if="Vars.thumbnail" class="gs-image-box gs-web-image-box">
<a class="gs-image" data-attr="{href:url, target:target}">
<img class="gs-image" data-attr="{src:thumbnail.src, width:48, height: 48}"/>
</a>
</div>
</div>
it's pretty clear that "Vars" is holding some data GSE is printing. My problem is that I don't know what "Vars" holds, and when developing my view I can't know if the value is there, and what is its name.
So, the question is: How can I print "Vars"? I suppose is a js variable you may obtain from the jsapi, but juss guessing, console.log() was not working for me, :(
Well, I finally found out how to post the data:
From Google Search Engine Api documentation:
https://developers.google.com/custom-search/docs/js/rendering?hl=es&csw=1#richsnip
You only have to add the following code in your snippet:
<span data-body="JSON.stringify(Vars)"></span>
So, you'll have something like:
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
// Load the Search API
google.load('search', '1');
// Set a callback to load the Custom Search Control when you page loads
google.setOnLoadCallback(
function(){
new google.search.CustomSearchControl('XXXXXXXXXXXXXXX').draw('cse');
google.search.Csedr.addOverride("mysite_");
},
true);
console.log(google);
</script>
<div style="display:none">
<div id="mysite_thumbnail">
//This will show all Vars content
<span data-body="JSON.stringify(Vars)"></span>
<div data-if="Vars.thumbnail" class="gs-image-box gs-web-image-box">
<a class="gs-image" data-attr="{href:url, target:target}">
<img class="gs-image" data-attr="{src:thumbnail.src, width:48, height: 48}"/>
</a>
</div>
<div data-ifel="Vars.thumbnail == 0" class="gs-image-box gs-web-image-box">
<a class="gs-image" data-attr="{href:url, target:target}">
<img class="gs-image" data-attr="{src:'XXXXX.png', width:115, height: 90}"/>
</a>
</div>
</div>
<div id="mysite_webResult">
<div class="gs-webResult gs-result"
data-vars="{longUrl:function() {
var i = unescapedUrl.indexOf(visibleUrl);
return i < 1 ? visibleUrl : unescapedUrl.substring(i);}}">
<table>
<tr>
<td valign="top">
<div data-if="Vars.richSnippet" data-attr="0"
data-body="render('thumbnail',richSnippet,{url:unescapedUrl,target:target})"></div>
</td>
<td valign="top">
<div class="gs-title">
<a class="gs-title" data-attr="{href:unescapedUrl,target:target}"
data-body="html(title)"></a>
</div>
<div class="gs-snippet" data-body="html(content)"></div>
</td>
</tr>
</table>
</div>
</div>
</div>