Is it possible to remove URL option from vue-dropzone2? - vue.js

I would like to remove url option from the vue-dropzone, because I have my own logic in afterComplete function, that transfers the file and then makes an action to different API - meaning - As I'm loading the files manually, I don't need the post request here at all. However, after removing that option, the error occurs:
Error: No URL provided.
Dropzone:
<vue-dropzone
id="image-upload"
ref="imgDropZone"
:use-custom-slot="true"
:options="dropzoneOptions"
#vdropzone-thumbnail="filesAdded"
#vdropzone-complete="afterComplete"
>
<BaseButton>
Add images
</BaseButton>
</vue-dropzone>
Dropzone options:
dropzoneOptions: {
thumbnailWidth: 150,
thumbnailHeight: 150,
addRemoveLinks: false,
autoProcessQueue: false,
// should stay?
url: "https://httpbin.org/post",
acceptedFiles: ".jpg, .jpeg, .png"
}

Finally I ended up creating my own endpoint that returns mocked down response, only to satisfy dropzone:
files: {
file: ""
}
Maybe this is not the final, complete solution, but something you can do to get this working properly.

Related

Loading Static HTML content and adding baseUrl to it, using react-native-webview. returns unexpected url on click

I am using react-native-webview. I am adding static HTML content into it, with baseUrl for relative path.
{
console.log(navState);
}}
/>
on Clicking a link there in Webview, getting the below log:
{
canGoForward: false,
canGoBack: false,
title: "",
loading: true,
url: "data:text/html;charset=utf-8;base64,", …}
How to get the exact url? I'm trying this on Android Emulator
Assuming that you're referring to navState object of the onNavigationStateChange function when you did the following:
onNavigationStateChange={navState => { //some logic }}
The navState object includes these properties:
canGoBack
canGoForward
loading
navigationType
target
title
url
In fact, you console logged the navState object.
To get the URL, use navState.url. Hence console.log(navState.url) would log the URL.
Note: This method will not be invoked on hash URL changes. See this.

Cypress - run test in iframe

I'm trying to find elements in iframe but it doesn't work.
Is there anyone who have some system to run tests with Cypress in iframe? Some way to get in iframe and work in there.
It's a known issue mentioned here. You can create your own custom cypress command which mocks the iframe feature. Add following function to your cypress/support/commands.js
Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe, selector) => {
Cypress.log({
name: 'iframe',
consoleProps() {
return {
iframe: $iframe,
};
},
});
return new Cypress.Promise(resolve => {
resolve($iframe.contents().find(selector));
});
});
Then you can use it like this:
cy.get('#iframe-id')
.iframe('body #elementToFind')
.should('exist')
Also, because of CORS/same-origin policy reasons, you might have to set chromeWebSecurity to false in cypress.json (Setting chromeWebSecurity to false allows you to access cross-origin iframes that are embedded in your application and also navigate to any superdomain without cross-origin errors).
This is a workaround though, it worked for me locally but not during CI runs.
This works for me locally and via CI. Credit: Gleb Bahmutov iframes blog post
export const getIframeBody = (locator) => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get(locator)
.its('0.contentDocument.body').should('not.be.empty')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
spec file:
let iframeStripe = 'iframe[name="stripe_checkout_app"]'
getIframeBody(iframeStripe).find('button[type="submit"] .Button-content > span').should('have.text', `Buy me`)
that is correct. Cypress doesn't support Iframes. It is simple not possible at the moment. You can follow (and upvote) this ticket: https://github.com/cypress-io/cypress/issues/136

Sencha Touch 2: get dynamic url corresponding to clicked element in a list

I am trying to dynamically retrieve the url after clicking on an item in a list.
The objective is to open the html page corresponding to clicked element.
Here is the code used:
Ext.define('FirstApp.view.Details',{
extend:'Ext.Panel',
xtype:'details',
requires: ['Ext.Ajax'],
config: {
listeners: {
activate: 'onActivate'
},
url: 'MyHtml.html' // Work fine if statically
url: '{link}', // But this doesn't work dynamically
tpl:'<h1>{link}</h1>' // However the desired data is displayed right here
},
onActivate: function(me, container) {
Ext.Ajax.request({
url: this.getUrl(),
method: "GET",
success: function(response, request) {
me.setHtml(response.responseText);
},
failure: function(response, request) {
me.setHtml("failed -- response: " + response.responseText);
}
});
}
Do you have an idea?
Thanks in advance for your help.
{link} works in tpl because the tpl property handles the string like an XTemplate. Your (custom) url property is just handled like a string.
Where exactly is {link} coming from? Since you are using a standard panel, I can only assume you are setting the data property on the panel with this link value. If so, just set the url at the same time via setUrl. Otherwise add a listener on updatedata, so that whenever your template data changes the listener is called and you can update the url.

Kendo ui autocomplete with WCF json not working

I’, using Kendo ui autocomplete control un a Project. The autocomplete gets the data from a WCF service returning data in JSON format.
In the html page I put this code:
$("#txtAutocomplete").kendoAutoComplete({
filter: "contains",
minLength: 3,
dataSource: {
type: "json",
serverFiltering: true,
serverPaging: true,
pageSize: 20,
transport: {
read: "http://localhost:52054/MyService.svc/Autocomplete"
}
}
});
The WCF service can be called like:
http://localhost:52054/MyService.svc/Autocomplete/anyword
And it responds with an json file like this:
["abc1","abc2","abc3"]
But the autocomplete don’t Works, and I get multiple syntax errors in jquery.min.js
Any suggestion?
Thanks for your time!

Loading indicator with dojo XHR requests

I only recently started using dojo and I am doing numerous ajax calls using dojo xhrGet, xhrPost,..etc. Now I have an animated gif image which i want to use to indicate "loading" to the user. I am not too sure how this can be done. Can someone please advise me on this? here is my code,
dojo.xhrGet({
url: registcarturl,
handleAs: "json",
preventCache: true,
load: function(data, ioArgs) {
//DO STUFF WITH data HERE
},
error: function(error) {
alert("sorry ! an error occurred while adding to the cart with ajax");
}
});
How do i get my loading gif file into the interaction? Thank you.
Have a look at dojox.widget.Standby: http://dojotoolkit.org/reference-guide/dojox/widget/Standby.html
To give you an example, define the widget.Standby
<div jsId="basicStandby1" dojoType="dojox.widget.Standby" target="yourDomTarget">
After calling dojo.xhrGet, show it:
basicStandby1.show();
And when you receive your answer, hide it:
basicStandby1.hide();