I have an input file in a page (from server), displayed in react native webview by its url. Somehow, when I choose a file, after selected, it should display the name of the file in the input box (refer image) but nothing got displayed and it appeared to be empty. But, if I browse the url manually from the browser, the selected file can be displayed.
The above image is the one I tested from the browser. In react native app, it doesn't display anything.
HTML from server side :
<div class="form-group">
<label>Company On Receipt</label>
<select class="form-control select2" name="company_id" style="width: 100%;">
<option value="ABC">ABC</option>
<option value="DEF">DEF</option>
</select>
<input type="file" name="company_receipt[]" multiple="multiple" required>
</div>
React native :
...
import { WebView } from 'react-native-webview';
export default function SubmitClaim({ route, navigation }) {
...
return (
<WebView source={{ uri: 'server-side-page-url' }} />
)
}
Dependencies :
"react-native": "0.65.1"
"react-native-webview": "^11.22.7"
For your info, this app was previously working (last tested on last year with react-native-webview: ^11.13.0). I am currently maintaining it and suddenly facing this issue so I have no idea what's going on. Tried to search similar issue but couldn't find anything that can help. I thought it could be the webview version issue so I uninstalled the existing package and re-installed but still not working.
Any help would be much appreciated. Thank you!
Related
I tried to upload file in react quill, at the moment you can see how it works in first photo, But I want file that i uploaded to be inside react Quill textarea.
Have someone any idea how can i do it ?
How it works now
How it need to be
This is code how i render upload file
{!!upload_attachments.length && (
<div className='my-3 flex max-h-52 flex-wrap gap-5 overflow-auto'>
{upload_attachments.map((attachment) => (
<Attachment key={attachment.id}
attachment={attachment} deleteAction={true} upload={true} />
))}
</div>
)}
I'm using Vue and Cypress. I have a page with logo that redirects to the home page.
Code:
<template>
<div>
<div class="text-center" id="app-header">
<a href=".">
<img src="../assets/logo.png" style="width: 128px; height: 128px;"/>
</a>
<h1 class="mb-3" style="font-weight: bold;">TITLE</h1>
</div>
<view id="app-body"/>
</div>
</template>
Now I want to check if clicking the image, actually redirects to the home page (my app consists of only one main page). I could check if the url is the url of the home page but since you are already inside the home page, I don't feel like it's a good test. How can I test that the url has been redirected to the home page, instead of just check if I'm currently looking at the home page?
It sounds like you want to spy on the request made to the homepage URL and make sure it was successful. I just checked this and it works for me. You may need slight modifications like changing the logo's id and the path of the cy.intercept to match your app. Here are the steps:
cy.intercept requests going to the homepage URL and give them an alias.
Click the logo.
Use the alias to check that the request to the homepage URL was successful.
Any other checks you might want to do, like cy.location or checking for various homepage elements to make sure that the redirect really loaded your homepage successfully.
it("clicking logo reloads/redirects to homepage", () => {
cy.intercept("/app/home").as("homepage");
cy.get("#logoThatRedirectsToHomepage").click();
cy.wait("#homepage").its("response.statusCode").should("eq", 200);
});
I have I think a small issue but I can't resolve it since more than 2 hours ...
I have a VueJs application and I'm trying to display an image that came from an API.
In my register.html I have that code :
<img :src="'./assets/' +nation.drapeau"/>
When I check the browser I see the correct path './assets/images/drapeaux/AFC/Australie.png' but nothing is displayed !!!! Why ? My path is not ok ?
What I'm doing wrong ?
This is the structure of my VueJs folder
If you use dynamic src, you have to use require. It is handled by webpack and it knows to put it in dist after build.
<template>
<div>STATIC IMAGE</div>
<img src="./assets/logo.png" />
<div>DYNAMIC IMAGE</div>
<!-- <img :src="'./assets/logo.png'" /> IT DOESN'T WORK-->
<img :src="require('./assets/logo.png')" /> <!-- IT WORKS-->
</template>
Demo:
https://codesandbox.io/s/dazzling-leftpad-i3stg?file=/src/App.vue:0-281
Another source:
How to import and use image in a Vue single file component?
Try using require since it's a dynamic src
<img :src=require(`./assets/${nation.drapeau}`)/>
The response , thanks guys :
<img :src="require('#/assets/' +nation.drapeau)"/>
hello my project is laravel project, that use ineritaljs as frontend middleware. and text fields binded to to data() functions variables.
<div class="form--group">
<label for="order_details_fname">Recipient’s FirstName *</label>
<input
id="order_details_fname"
type="text"
class="form--controll"
v-model="order_data.first_name"
/>
<div class="form--group">
<label for=""
>Recipient’s Last Name *</label>
<input
id="order_details_lname"
type="text"
class="form--controll"
v-model="order_data.last_name"/>
</div>
data function
data() {
return {
order_data:{
/** */
first_name:null,
last_name:null,
/** */
},
}
},
sometimes fields not editable, (just like read-only fileds) is anyone know solutions for this?
Hi all i just found issue for this. its not vuejs issue, but in a npm package (vue-range-slider) . it register global events to capture input. i'm still wandering why package owner not trying to fix it.
anyway if anyone had this kind of issue please check
https://github.com/xwpongithub/vue-range-slider/issues/18
https://github.com/xwpongithub/vue-range-slider/issues/21
thank you all. peace
I have a Bootstrap Modal in which I am trying to display a select2 control. The control shows up and it works perfectly well but it doesn't display properly. I have attached a screenshot of how it is rendering as. I also copied and pasted the exact same code to a regular page and that is displaying properly. I inspected the border property as well as various other css properties but am unable to determine why it is displaying like that. Can anyone give me some pointers on how I can solve this issue?
JsFiddle showing the issue
Note: Please maximize the width of the result window to see the issue in action.
Html:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Country</label>
<div class="col-sm-6">
<select class="js-example-basic-single form-control">
<option></option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</div>
</div>
</form>
Javascript:
$('.js-example-basic-single').select2({
placeholder: "Select country..."
});
EDIT:
I would also like to point out there is a dependency to the select2-bootstrap library. If I use just the select2 library, I am not witnessing this issue.