In this project I'm using composition API.
I'm trying to hide 'No file chosen' text.
There is a array with stored files:
const form = useForm({
text: null,
files: [],
id_key: props.reporting.id_key,
});
And there is input:
<JetInput
id="files"
type="file"
class="block file:border-none
:class="form.files.length == 0 ? 'text-[rgba(0,0,0,0)]':'text-black' "
multiple
#input="form.files = $event.target.files"
/>
And the problem is: if array of files is empty, input text is hide correctly. If I chose file to upload, I will see correct style (text is black) but the text content is 'No file chosen'. If I try to chose file again, text content will be ok. So why am I getting this text content 'no file chosen' even though file is there, and I only change styling with :class. Any idea how to solve this problem?
Related
Background
I'm using tiptap-vuetify to implement a message/chat UI where users see an editable Tiptap instance for creating new messages as well as several uneditable Tiptap instances (one for each already-sent message in the thread the user is viewing).
I have the editable instance output data in JSON format, which I store in my database in a JSONB field.
Problem
When I load the JSON for sent messages from the database, only plaintext messages show up; if I applied any kind of styling (bold, italics, lists, etc.), nothing at all shows up.
The code I'm using for the uneditable Tiptap instances is this:
<tiptap-vuetify
v-model="message.content"
:editor-properties="{ editable: false }"
output-format="json"
/>
Here's a screenshot of the message object (and message.content) for the "bold asdf" example above:
When i was looking in the documentation -> Get started
I see that the content is HTML.
As it usually is inside any tiptap.
Your content data is an object with alot of nested data. I don't think the plugin/component can handle that type of format.
Try save your data as HTML to your .json and there for also fetch the data as HTML from your .json.
Example:
{
messages: [
{
"id": 1,
"content": "<p>foo bar</p>"
},
{
"id": 2,
"content": "<p>hello world</p>"
},
]
}
(New to answer questions on stackoverflow)
I figured out the fix:
I didn't realize I needed to include the :extensions prop for all of the HTML features I wanted to use (bold, italic, etc.) in the editor that would render the HTML. I thought those extensions were just used to add the toolbar buttons, but they are also used to render the JSON that those buttons produce.
To then hide the toolbar, I just used the example toolbar-slot code from the readme, and the toolbar was gone.
Here's the working code:
<tiptap-vuetify
v-model="message.content"
:extensions="extensions"
:editor-properties="{ editable: false }"
>
<template #toolbar="{ buttons }">
<pre>{{ buttons }}</pre>
</template>
</tiptap-vuetify>
I created a document file from word and has exported as pdf . i want to show the pdf content inside the Div element in razor page. How can I show the pdf content from razor page. Please can you provide an example code how to show in blazor server side
If you stored your pdf file directly in your documents for example in the folder wwwroot/pdf.
wwwroot/pdf/test.pdf
You can display this PDF with this line of html bellow :
< embed src="pdf/test.pdf" style="width=100%; height=2100px;" />
It will provide you a pdf displayer with printing options !
If you want to go further, upload your file and then display it, I will recommend you to go check this explanation :
https://www.learmoreseekmore.com/2020/10/blazor-webassembly-fileupload.html
The upload for PDF files works the same as Img file, you need to go check IBrowserFile documentation.
You will see that it has a Size obj and a OpenReadStream() function that will help you get the display Url for your file (image or pdf)
If the site abow closes, this is the upload code that is shown on it :
#code{
List<string> imgUrls = new List<string>();
private async Task OnFileSelection(InputFileChangeEventArgs e)
{
foreach (IBrowserFile imgFile in e.GetMultipleFiles(5))
{
var buffers = new byte[imgFile.Size];
await imgFile.OpenReadStream().ReadAsync(buffers);
string imageType = imgFile.ContentType;
string imgUrl = $"data:{imageType};base64,{Convert.ToBase64String(buffers)}";
imgUrls.Add(imgUrl);
}
}
}
This code was written by Naveen Bommidi, author of the blog where I found this usefull code
If you want, as I said, upload a PDF and then display it.
You can use the same html line :
< embed src="#imgUrl" style="width=100%; height=2100px;" />
And your uploaded files will be displaying.
Example
I have two editors on the screen, one read-only. What I want to do is allow the user to select content from the read-only editor and paste it into the current position of the other by clicking a button. (the logic may manipulate the text which is one reason I don't want to use the system's clipboard.)
So far I have the function that is able to paste the text like as follows. (I am using the Angular wrapper which explains the presence of the CKEditorComponent reference.
doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
editor.model.change(writer => {
writer.insertText(pasteEvent.text, editor.model.document.selection.getFirstPosition() );
});
}
What I can't find from the documentation is how to extract the selected text. What I have so far is:
clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
const selection = editor.model.document.selection;
console.log('clickPasteAll selection', selection);
console.log('clickPasteAll selectedcontent', editor.model.document.getSelectedContent);
}
The selection appears to change depending on what is selected in the editor's view. The getSelectedContent function is undefined. How do I get the content?
With a bit of poking around I figured out how to do this. I'll document it here on the chance that it will help someone down the road avoid the process of discovery that I went through.
On the source document I have a ckeditor element like this:
<div *ngIf="document">
<ckeditor #ckEditor
[editor]="Editor" [config]="ckconfig" [disabled]="true"
[(ngModel)]="document.text"></ckeditor>
<button mat-flat-button (click)="clickPasteSelectedPlain(ckEditor)">Paste Selected Text Plain</button>
</div>
In the component the function called on the click event is like this:
#Output() paste = new EventEmitter<PasteEvent>();
...
clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
this.paste.emit({
content: editor.model.getSelectedContent(editor.model.document.selection),
obj: this.document,
quote: false
});
}
The PasteEvent is defined as an exported interface which I will omit here to save space. The content key will refer to a DocumentFragment.
Note that I am passing the CKEditorComponent as a parameter. You could also access it via an Angular #ViewChild declaration but note that my ckeditor is inside an *ngIf structure. I think that works well in Angular 6 but in the past I have had difficulty with #ViewChild references when the target was conditionally in the DOM. This method always works but use whatever method you want.
The event fired by the emit is processed with a method that looks like this:
doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
editor.model.insertContent(pasteEvent.content);
}
Because the content is a DocumentFragment the paste operation will include all formatting and text attributes contained in the selected source. But that's all there is to it.
I'm trying to extract the format of a word document containing text in different fonts and font-sizes, images, comments etc. I have used zipfile module to extract the XML files of the word document.
XML files are:
['[Content_Types].xml',
'_rels/.rels',
'word/_rels/document.xml.rels',
'word/document.xml',
'word/footer2.xml',
'word/header1.xml',
'word/footer1.xml',
'word/endnotes.xml',
'word/footnotes.xml',
'word/_rels/header1.xml.rels',
'word/header2.xml',
'word/_rels/header2.xml.rels',
'word/embeddings/Microsoft_Word_97_-_2003_Document1.doc',
'word/media/image3.wmf',
'word/media/image2.emf',
'word/theme/theme1.xml',
'word/media/image1.png',
'word/embeddings/oleObject1.bin',
'word/comments.xml',
'word/settings.xml',
'word/styles.xml',
'customXml/itemProps1.xml',
'word/numbering.xml',
'customXml/_rels/item1.xml.rels',
'customXml/item1.xml',
'docProps/app.xml',
'word/stylesWithEffects.xml',
'word/webSettings.xml',
'word/fontTable.xml',
'docProps/core.xml',
'docProps/custom.xml']
I'm unable to understand the styles associated with the content present in word/document.xml.
I'm trying to encapsulate the results in the following manner:
{
"text": "some-text-in-document",
"font": "some-font",
"font_size": 10,
"some_field": "some-more-value",
...
}
Tried using python-docx to get the fonts and font-sizes but mostly the value is None
here's the code snippet:
from docx.enum.style import WD_STYLE_TYPE
styles = document.styles
#print(styles.default)
paragraph_styles = [s for s in styles if s.type == WD_STYLE_TYPE.PARAGRAPH]
for style in paragraph_styles:
#print(style.font.name)
if(style.font.name):
print(style.font.name, style.font.size)
for paragraph in document.paragraphs:
#print(paragraph.text)
for run in paragraph.runs:
print(run.text)
font = run.style.font
print(font.size)
Results are mostly None for font and size.
A value of None for style means Normal.
All paragraphs have a style, it's just that most have the same style, so Word doesn't spell it out for that majority case, perhaps to save space.
I am creating a PDF form using adobe reader. I have added an image field and a text box. The text box is read-only and I want to populate the text box with the path of the image selected by the end-user, in the image field. Following is my code:
var one = this.getField("Image1");
var two = this.getField("Text1");
two.value='The Path';
The above code runs normally but I can't figure out as to what to write instead of 'The Path', to get the actual path of the image selected by the end-user.
P.S.
On the Image1 button there are 2 actions:
Mouse Up(execute Js)
event.target.buttonImportIcon();
On Blur(execute Js)
var one = this.getField("Image1");
var two = this.getField("Text1");
two.value='The Path';
If I am understanding your request correctly... Assuming that Image1 is a button field and Text1 is a text field and you want the selected image file to appear as the button icon, the code would be as follows...
var one = this.getField("Image1");
var two = this.getField("Text1");
var doc = app.browseForDoc(); // Allows the user to browse for a file
var docPath = doc.cPath; // gets the file path of the selected file
one.buttonImportIcon(docPath); // uses the selected path to import the image as the "normal" or "up" button icon
two.value = docPath; // set the value of the text field to the selected device independent path