Detecting a drag event inside the whole page - javascript

I'm making a pic uploader of drag & drop function for the react drop-zone. My task is to indicate a focus ring on the input box when particular types of the img file gets dragged into the webpage (not the input box). How can I achieve this?
I'm using next.js 13 and I don't want to implement 'getRootProps' in the layout.tsx root file for this one single matter.
I can't find a method to do what I want on the document.

Related

How to send clicked word to an API call from pdf?

I am creating a react app in next js and ran into a problem. I wanted to click on a word in displayed pdf and send it to an API call. I've seen a few pdf to text solutions before, but they destructurize the document. Is this the only option? All the highlight options in pdfs are just based on a position in canvas.
And another question - how to properly handle this click event. Let's say even that we work with a text document. How to wrap these words so I could use this onClick on them?

Set Button icon using attached file

I'm creating a kind of template for users to fill out in Adobe Acrobat Pro X, but they also need to attach photos. I've created a button based on this thread here which, when clicked, prompts the user to select a file and then attaches the file to the PDF. It works beautifully, except the template pdf has multiple pages with multiple locations for photos.
I need a way to keep track of which (picture) attachment belongs to which location. My main idea so far is to simply insert code that will take the file and use it as the button's icon. (This is also good in the case where the user accidentally attaches the wrong file, then goes and uploads the right one without deleting the old one; I'll see the most recent choice and assume it's the correct one).
The other idea would be to rename the files as they get attached (to Attachment1, etc.) but this doesn't seem to be as feasible.
There are 2 different functions for the button depending on if the users are using Reader 11 or not.
When they are not using Reader, the main code looks like this:
app.alert({
cMsg: "Please select a file to attach.",
cTitle: "Attach File",
nIcon: 3,
nType: 0
});
try {
var rc = this.importDataObject("Attachment" + attachment_num);
if (rc) {
attachment_num += 1;
app.alert({
cMsg: "Attachment successful.",
cTitle: "Attachment Successful",
nIcon: 3,
nType: 0
});
I was thinking as the first line of the if statement, I could insert code to change the icon of the button that this code is running from, but I can't figure out the right thing to try. I was looking at using buttonSetIcon based on here but I'm doing something wrong, probably because of my lack of JavaScript knowledge.
What I was trying was something along the lines of this
var f = this.getField("ImageButton");
f.buttonSetIcon(rc);
It doesn't work though. I am not sure what exactly importDataObject returns in the variable rc but I was hoping it would be the file itself.
When the user is using Reader 11, this gets even more confusing because everything seems to just be one line of code, annot.cAttachmentPath;, but I'll focus on the other version first.
Any ideas?
Put the following line of code in the Mouse Up action of the button.
event.target.buttonImportIcon();
This will open a file selection dialog where the user can select the image to import and set it as the "normal" button icon. It will import the icon into the button that was pressed so you can use it for multiple buttons.
Note that in Reader, the image will need to be converted to PDF first. In Acrobat, the conversion will be automatic.
If you need a way to add images (as images) to Reader and you can tolerate the user positioning them manually, you can simply paste the image from the clipboard and it will show up in the PDF as a stamp. You need to instruct the user on how to get the image onto the clipboard though. Then they need to scale and position the image.

Redirect file drop event into file input

I'm working on a basic jQuery plugin that attaches itself to a file input and allows the user to choose an image, with which the plugin will then generate a preview.
Note: The plugin doesn't immediately try to upload the file (That will happen when a form is submitted and is beyond the scope of the plugin).
What want to do is accept a drop event on another element (In this case the window), which would ideally set the value of the file input to be the dropped file, and update the preview.
Now I know from researching and looking at other questions similar to this, that it's not possible to programmatically set the value of a file input for security reasons, which makes perfect sense. User action is required to set the value of the file input.
Is there some way to perhaps take something from the drop event (Which is user input) and use it to fill the file input's value? Or is it just simply not possible whatsoever to programmatically set it's value?
Alternatively, if the above isn't possible - is there perhaps a way to redirect the drop event from my other element, onto the file input and let the browser handle setting the file input's value?
The only other way I could conceive this working would be to have the file input (Which in my case is positioned off-screen) follow the mouse around while it's dragging so that the drop event eventuallylands in the file input.
Any other techniques or tips welcome.
Thanks

Can I drop an input tag holding a file onto a droppable zone?

I am doing some front end testing using Sahi, and it's built in methods _setFile & _setFile2 are not flexible enough for the file uploading approach being used by the site. For this reason, I am wondering if I can add an input element to the browser and attach file elements and then execute a drag drop (via Sahi) to get the file elements passed to the droppable area. Does anyone know if it's possible to drag files from one browser input tag to another (or another viable approach)?

making drag and drop upload with less javascript

I'm trying to make an upload holder for my website, so users can easily drag and drop a file on it.
there is a lot of libraries and events for doing that, but I need a simple way.
this (thought) came to my mind...
I put a file input to the page and sets width and height.
now when my user drag a file on it, onchange event will work.
but I want to hide browse button and there is two way:
set 0 opacity.(it is not working in some browsers)
set hidden visibility.(the thought is not working)
help me, what else I can try?
Put the form on a hidden iframe. Use an ordinary div for the target. When the file is dropped, catch the event and update the input, then submit as post. The result is ajax-like uploading via file drag and drop.

Categories

Resources