Name of the clicked image in react

JavaScript
1

Hello,

how to understand what is the name of the image or file that is being clicked name in react?

thanks,
Saeed

2

Information should be passed as the the event for the click. You can also encode information in the click handler function.

If no one else does, I’ll try to write up a little sample when I have time later.

3

Here is a pen with examples.

1 Like
4

Can I write these:

can I write this:
const onImageClick = event => ImageUrl={ event.target.value.src}
and const onImageClick= event =>ImageName={event.target.value.name}

And use it:

5

You can get the imageUrl from e.target.src. Just log the target in the console img.addEventListener('click', e => console.dir(e.target)) and see what you’ve got there.

6

img.addEventListener(‘click’, e => console.dir(e.target))

is it possible to save this in a variable?

7

I missed that this was about images - I changed the pen example to accommodate.

As to “is it possible to save this in a variable?”…

You are going to run into the same problem of getting data from an async function, a problem that plagues people new to JS. You could save the value on state in the callback. The naive solution would be to save it a global variable - that that’s almost always a bad idea.

8

I hope you have the answer.
As @kevinSmith suggests, you could save the information in the function that handles the click event and do whatever you like with it: pass it into another function… It’s up to you.

9

If you could probably provide more details regarding what you want to do exactly, you might get a better explanation.

10

See:

I need to know the clicked or double clicked image URI and name to use the in a function.
Which way you offer?

thanks

11

Double clicks shouldn’t be any different, you just use the onDoubleClick handler.

But as to getting the url name, it’s easy in the handler function, the trick is to make it available outside of the handler function. But you can put it in component state or have a callback passed into the component to put it on state somewhere else. Of course there are also things like redux, but I’m assuming that we’re not there yet.

12

What you do mean by the name of the image? If you want to get more info other than the dimension of the image… you probably would want to use an image manipulation library like jimp

13

I’m not sure to understand what you mean but:

The images (editable) are in the server and I need to know the URI and name to open it in the site image editor.

14

See: I have a couple of images and have an image editor. To load an image to image editor I have a method with two arguments: URI and Name.

Now I need after clicking the user on each image I save the image URI and Name in two variables separately to pass them as arguments in load method.

Please inform me, I’m really confused.

15

Honestly, seeing Name confuses me. I don’t know what you mean by that or what you would want to do with it.
Unless you are working locally. if the image link is some sort of an external link like ‘https: //image01.png’ the filename already is image01 with .png extension

16

But how I return them in two variable. Don’t worry about the name. assume something like flower.png

17

In that case, you could return an array or an object.

// ...

const func = () => {
const url  =  'url'
const name = 'name'

return [url, name] 

// or 

return {url: url, name: name} // same as {url, name} in this case
}

// Then to use it, destructure it off the array

const [url, name] = func() // func returns the array

// or from the object 
const { url, name} = func()

console.log(url, name) // ...
18

You mean after clicking the image this function will be activated?
and my variables are URL and name here to pass them as arguments to load to method? Is my guess is correct? let me know what you think?

See: I want to use them in this method dynamically.

Image Editor method:

loadImageFromURL(url, imageName)

Example:

imageEditor.loadImageFromURL('http://url/testImage.png', 'lena').then(result => {
     console.log('old : ' + result.oldWidth + ', ' + result.oldHeight);
     console.log('new : ' + result.newWidth + ', ' + result.newHeight);
});
19

I will probably never truly understand you.

Do you have the name and url already?

If you want a function that will run after the image is clicked, you can do something like this:

const allImages = document.querySelectorAll('yourSelector')

const aFunctionYouDefined = e => {
  // e is passed

const url = e.target.src 
const name = 'whatever way you intend to get the name' // maybe regex exp

// Looks like you've have what you want here then you can call your promise method

imageEditor.loadImageFromUrl(url, name)
.then(whatloadImageFromUrlReturns => 'do whatever you like')


}
Array.from(allImages).forEach(image => image.addEventListener('click', aFunctionYouDefined)
20

Imagine there are 1000 images with id, name, subject, URI.

Do you think this code works dynamically?