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>
)}
Related
I am getting html from API in my react native app:
"consentForm": "<p>some text --- text.\nFor further information regarding this
can be found here:\n
<a href="url">
URL text
</a>
</p>",
I tried using react-native-webview in the following way:
<WebView
originWhitelist={['*']}
source={{
html: api.consentForm,
}}
/>
but nothing is coming up on my device... it's coming as blank screen. I am not able to understand what I am doing wrong
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!
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)"/>
I've been using Docusaurus v2 with the default theme for my Python library website and love it! I'd like to change the position of the announcement bar, which is currently at the top of the page, as it isn't very visible. I think it would work better beneath the "hero". Is there any way to accomplish this without swizzling the Layout element? Thanks!
You can always create your own annoucement bar component and add it to your index.js file. This is what I did to create any additional bar under the hero.
CODE EXAMPLE:
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className='container'>
<h1 className='hero__title'>{siteConfig.title}</h1>
<p className='hero__subtitle'>{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
className='button button--secondary button--lg'
to='/docs/intro'
>
Docusaurus Tutorial - 5min ⏱️
</Link>
</div>
{/* YOU CAN ADD YOUR ANNOUNCEMENT BAR HERE */}
<div>
<YourComponent />
</div>
</div>
</header>
);
}
Create and Add your Annoucement Bar Component
This is how I added it to my website under that homepage hero...
Example Home Page Annoucement Bar Docusaurus Website
I am trying to clear the file lists as iview ui by default show file list. The problem is, user can upload file different times and ivew ui upload component keeps the old files in the list. I don't from where the list is coming. I saw there is a method clearFiles but not sure how to use it. There is no example in doc.
This is how I am using.
One thing, if I make :show-upload-list to false the list doesn't show but the progress bar also doesn't show. I want the progress bar to stay and list shouldn't show up.
<Upload
:multiple="false"
:show-upload-list="true"
:on-success="handleSuccess"
:format="['jpg','jpeg','png', 'pdf', 'docx', 'txt', 'mp4', 'mp3', 'zip']"
:max-size="21048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
type="drag"
:action="isFileUpload.url"
:data="isFileUpload.meta"
>
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>Click or drag files here to upload</p>
</div>
Thank you.
You can add ref="upload" to vue component and clear file with this.$refs.upload.clearFiles()
<template>
<Upload
ref="upload"
:multiple="false"
:show-upload-list="true"
:on-success="handleSuccess"
:format="['jpg','jpeg','png', 'pdf', 'docx', 'txt', 'mp4', 'mp3', 'zip']"
:max-size="21048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
type="drag"
:action="isFileUpload.url"
:data="isFileUpload.meta"
>
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>Click or drag files here to upload</p>
</div>
</template>
<script>
export default {
...
methods: {
handleSuccess () {
this.$refs.upload.clearFiles()
}
}
...
}
</script>