How do you display an image by dragging it on to a stack?
This lesson will show you how to display an image file that is dragged on to a stack, for example from the desktop.
Creating the stack
Firstly create a new stack and call it Image Viewer. Add an image area to the stack by dragging it over from the Tools Palette(1). This image area will be used to display the image that is dragged on to the stack. Call the image Display.(2)
Accepting a dragged image
The first stage is specifying that the image can accept dragged items and what action it should take. This is done by setting the dragAction property in the dragEnter message. In this case we want the image to copy the data that is dragged on to it.
Add the following handler to the image script.
on dragEnter
set the dragAction to "copy"
end dragEnterDisplaying the dragged image
To get information about what has been dragged on to the image we use the dragData property. The dragData is an array and in this case we are interested in the file that was dragged so we use the dragData["files"] to retrieve the filepath. We can then set the filename of our image to the path to the image file that was dragged and it will be displayed.
Add the following handler to the image script.
on dragDrop
set the filename of me to the dragData["files"]
end dragDropAlternatively you can set the text of the image to the content of the file using the URL keyword
on dragDrop
set the text of me to url ("binfile:" & the dragData["files"])
end dragDrop
Caz3000
This works for dragging and dropping photos from my computer, but when I tried to drag and drop and image displayed in my web browser it didn't work. Also, the image I dragged in from my computer resized the image display. Is there a follow-up lesson that explains how to deal with some of these issues?
Elanor Buchanan
This lesson only works for image files, the stack references the file to display the image. If you save an image from your browser then drag in onto your stack it should work.
If you do not want the image on the stack to resize you can lock the size and position of the image area by setting its lockLocation property to true.
I hope that helps.
Elanor
Anon
If I wanted to make an app that compiles different images to put onto the background of an iTouch for wallpaper, does this lesson apply to this kind of app building or is that another matter altogether?
Elanor Buchanan
Hi
I think you might find this lesson more useful, it explains how to select an image from the library on your mobile device.
http://lessons.runrev.com/s/lessons/m/4069/l/11489-How-do-I-get-an-image-from-my-mobile-photo-library
I hope that helps.
Elanor
Faisal
Hi Elanor,
Thanks for the article,
I want to have this drag and drop functionality in my app, in a way that if I drop a folder containing say 9 or 10 images, then it automatically creates new cards for each image.
Can that be done?
Best regards.
Faisal
Elanor Buchanan
Hi Faisal
Yes, if you drop a folder the path to the folder will be in the dragData["files"]. You can use the files function to get the contents of the dropped folder and create a card for each image using the create card command.
I hope that helps.
Elanor
Chris Norman
So I just tried this and it does not display an image. I feel like I am missing some code to actually display the image? It does not give me an error of any kind.
Elanor Buchanan
Hi Chris,
I just did a quick test here and it seems to work as expected. The code that actually displays the image is
on dragDrop
set the filename of me to the dragData["files"]
end dragDrop
When the image file is dropped onto the image control the filename property of the image control is set to the path to the image that was dragged. This should cause the image to display.
If this is not working can double check you are in Run mode, that you are dragging an image file onto the image control and that the code is on the image control and has been 'Applied'.
If that does not help could you let us know what version of LiveCode and OS you are using and we'll look into it.
Thank you
Elanor
Dirk Beugeling
Unfortunately, it does not work in the development environment (9.6.3)
Elanor Buchanan
Hi Dirk
I checked the example here on Mac and it worked as expected in 9.6.3. Could you let us know what edition and version of LiveCode you are using, and your OS so we can look into this.
When you drag the file onto the image control does nothing happen? If you check the filename property if the image control after the drag-drop is it empty?
Thank you.
Elanor
Dirk Beugeling
Thanks Leanor for your fast reply. I'm on Mac OS 11.5.1 (Big Sur). Livecode Version 9.6.3. After compiling, all is fine but running the program in Development Livecode jumps to edit mode and a picture is added to the card.
Elanor Buchanan
Hi Dirk
Thanks for the information, I had checked on Catalina so there might be some different behaviour in Big Sur. We'll look into it.
Elanor
Elanor Buchanan
Hi again Dirk,
We have done a test on Catalina and the stack works as expected for us. Are you using any plugins, front scripts or a custom tools palette that might affect behavior?
Thanks
Elanor