Move filepond input to a different location in the DOM - vue.js

I'm in the middle of building the file uploading part of our system, and our design has two flows in which you can upload a file:
Drag 'n drop onto the page
Click the "Upload file" button which presents a modal.
If I drag 'n drop a file onto the page, I want to show a small popup in the bottom corner showing the upload progress of each file.
If I go through the modal, I get the option to drag 'n drop or browse files. It then shows me the same progress in the modal, however I have the option of closing the modal which should then show me that same small box in the corner with the upload progress.
From what I've been able to determine from the docs of FilePond, this doesn't sound like it would be possible. Every demo I've found links the FilePond instance to a single input and since it builds its own UI, the drop zone would also be built. Fine for the modal window but not for the full page drag 'n drop. So I have a couple of questions:
Can I make anything a dropzone without it building the UI?
If so, when I drop files can I specify where to display the uploading progress?
Is it possible to move the progress from one area of the DOM to another (going from modal to the corner)?
I'm building this in Vue.j, so the plan was to use Vuex to manage the uploads and their progress which would make it easy to render the progress in different parts of the DOM. I love the look of FilePond for what it offers visually but if I can't get it to work with our designs then we may need to look at something else.

Related

How to load images via file open dialog in TestCafe

Background info:
Our application depends on different sets of medical images (due to the medical environment we can't share our code). In each image, a set of test cases is run. Each time we need to manually select a new image, which of course we want to automate. The loading of images is fairly complex, but our devs created a button that covers all that. This button opens a File open dialog.
My Question:
How can I open a file dialog window and import new images with TestCafe?
We've tried:
t.setFilesToUpload (which not seems to work because it needs a selector where the images get uploaded to?)
List item clicking the button (it does not open the dialog
window)

PDFtron close a tool when doing Frame.GoBack()

Im using PDFtron on a windows store app project.
I have a page with a back button and a pdf viewer where i can edit the pdfs.
When im editing a pdf i have a tool bar with options like the ones in the samples, but i have a issue when i choose a Free Text tool and start writing on the pdf, if i press the back button while the Free Text tool is active ( the cursor is bliking) the text i wrote appears in the screen on the next page i navigate to.
How can i solve this?
The TextBox in question is part of the PDFViewCtrlTools that are used to create annotations. It is shipped with the sample application and is fully open source.
The TextBox is inside a popup, positioned to align itself on top of the PDFViewCtrl in the position where you tapped.
This TextBox needs to be closed before you go back. It is quite easy to do so by calling ToolManager.CreateDefaultTool(). In general, I would recommend taking a look at the samples and see what they're doing when the user tries to navigate away from the page.
Everytime you navigate away from a page with PDFViewCtrl, the ToolManager should call CreateDefaultTool so that whatever current tool is active (in this case the FreeTextCreate tool) can close itself and clean up.

Impress Pages - HTML widget not saving/publishing

I'm currently trying to embed a mailchimp sign up form using the HTML widget from impress pages, and at first, it seems to work perfectly fine.
I drag the block onto the screen, a popup comes up, then I paste the form code into it, and then voila! A pretty looking, rendered form appears. I then go ahead and press publish... and bam! My HTML widget is gone, and all that's left is an empty block within the layout asking me to click to add text!
I have no idea what's going on here, does anyone have any ideas? I'm using a custom theme, and I'm wondering if the workaround is to hard-code a widget for my client and just use that (although it looks like it'll be a big drain on my time)
If you get "Forbidden" as a response after pressing save, you should have a look at the answer here impresspages html widget not saving

inject text from javascript to html "View source"

When I change text using JavaScript The text does not appear in the HTML "View source". Is it possible to inject information to the HTML "View source". (When I write View source I mean to While you pressing on the right mouse button in the browser you can view the source code That returns from the server)
View Source shows you only the HTML it received from the server's response. Your JS changes happen afterward.
Firebug and Chrome's debugger show you the source dynamically so you can see the DOM and HTML as it has been changed. But view source will only ever show you what the browser received from the server.
Well,
You have said it right. When you "View source" you see what was received from the server, and elements that you added dynamically using javascript do not exist there.
If you want to see elements which you added later, you can do that using Inspect element (CTRL + SHIFT + I), which will show you current html structure displayed in browser.
When you "view source" in a browser, it is opening a window and printing the source code to the current page. This text is totally static, nothing will change its contents besides manually refreshing.
If you want the HTML source you are looking at to reflect changes you make to the page, you need to use your browsers Dev Tools. Try Right Click->Inspect Element instead of Right Click->View Source
Some techniques:
In some browsers Ctrl-A to select the whole rendered page content
and, with a right click View Source of selection, gives the source as generated by
rendering scripts. (often <script> elements are gone and replaced
by the rendered content)
Augment the address bar URI by prepending view-source: to get the
original source.
Use the menu bar or right click View Source interfaces.
With these techniques and FF it is possible to get different sources for a "static" page in the rendering chronology.
Technique #1 is interesting when automated ... along the lines of:
generate a page that displays the time in seconds,
select whole page,
render the source view of the selection
repeat periodically
quasi code:
setInterval ( write Date() to page, select all, write view source of selection to page ) every second

flex 3 screenshot of the scene

i want to snapshot of the flex scene and save it as a image. It likes printscreen button and paste it to paint and save
there will a button save it to desktop and when pressed it, flex will save the screenshot of scene to the desktop, i searched on the net but couldn't find a working code
It looks like there is a way to do it, but it requires some serverside work. Basically the data is sent to the server and the server saves it.
What you would probably want to do since you want the user to have the screenshot is create the files on the server then have it open a web page where they can download and save it.
more information is here http://www.boyzoid.com/blog/index.cfm/2007/9/17/Doing-screenshots-in-Flex-and-sending-them-to-ColdFusion