Image Picker
Francisca Revelo
Or you can have another collection that hold image as record instead of property, you can let the user delete it using custom list and put delete button inside it, then you can show them on horizontal list or vertical list.
appinventor-screenshot-1486581 34.7 KB
This is the screen4, the screen which i need to upload a image.
Clicking on ImagePicker1, i can select an image from the device, but how can i use it on
I need to save the image on the app storage folder because i'll need it on every screen.
I just want to know if i can store it or appinventor needs a update.
I would like to use Image Picker to display Gallery images, but having a problem getting started. See attached. I would like to Select a Picture using AfterPicking. Please... what simple thing did I miss? Thanks Charles
ABG,
After lunch I tried clicking this image block and it work. I still had the errors I showed you before. Next I right-clicked the delete button on screen and deleted all blocks... I now have a clean screen. Next stating over I input ImagePicker.AfterPicking, then clicked ImagePicker1.Image including the No Available Access end. Didn't work, I clicked the screen and the error went from 0 to 1. A few minutes later I clicked the block and it works fine, as it should, no new error.
That's symptomatic of a known issue with the new Media Blocks. If you have got an image in your Media List, App Inventor will try to place a block for it in a useful place. Somewhere along the line, this adversely affects the display - so you can click or drag a Media Block or a Block with a Media Block pre-attached, and it will be added to the Project file but not displayed. Logging out of App Inventor, then logging back in, the display is corrected (Note, only works safely if Project Autoload is disabled in Settings).
image_picker plugin does not support camera permission condition anymore. For instance, when we try to access camera from an app, the app asks us for permission.Now, since image_picker plugin has removed that condition, we need to ask the permission manually using permission_handler plugin. Read more details about this change here
On Android, the MainActivity can be killed and restarted after launching the image picker for various of reasons. this can be tested by selecting `don't keep activities alive' option in the developer options in phone's setting app.
Hi, I'm trying to make a messaging app (just for fun) that can send both messages and images across multiple devices. I got the messages part figured out, but I can't figure out how to send images through it. what I want to happen is for me to open the imagepicker, select an image, and be able to send it through Clouddb to the other device. Here's what I have so far...
pic1156635 84.5 KB
Sorry. Your code has issues but more so the CloudDB is not accepting images from the ImagePicker as an input parameter; at least on my Android 11. The Cloud stores and retrieves text and for png images stored as assets but refuses to load an image from the ImagePicker.
Yes. That is what has been recommended by Anke and Tim. I can add the image to the ASD folder. Unfortunately I have not found a way to recall the image file in the ASD for use in the CloudDB. Do you have some code?
I can't see how to load any file type to CloudDB, it just wants a 'value' so I presume we have to encode the image to B64 and send that (store as a variable). On the Extensions page there are small extensions, B64 and ASD, by TimAI2, Anke and Juan.
see the code in post #2 Chris. The Blocks show how to do this with a *.png file in Media and post # 5 shows part of the way using an image from the Gallery.
It can 'load' text and image files (png for sure) and store it in the CloudDB.
Here is some 'simple' code to try Daniel (not what I shared previously) The code stores text to the Tag text; it stores what you pick to the Tag image. You can change that to store the images to another Tag you choose. Tested on an Android 8.1. You may have to use the device's Settings to permit access to files.
how large is the picked image file? Larger images should be expected to take longer to process and send to the CloudDB. If sent to an other device, the other device has to receive the image and post it on its screen. If you are picking camera photos, some devices produce huge image files. I think there is an extension to allow sending a smaller footprint image or thumbnail.
Hi Dunit, I have been facing the exact same issue. Do you mind sending me some code of how to convert images to base64 and send them to clouddb and then retrieving the image back on another device? Thank you so much
How to get the path of the image? Also I tried to upload a text string that says
to clouddb, but I can't retrieve the image file back.
I am trying to compress an image before uploading to clouddb.
Here is my code:
image888324 33.1 KB
image694275 26.7 KB
image906448 92.5 KB
(I changed the o back to 0 afterwards but still doesn't work)
My app refuses to build with expo image picker. I have not yet utilized the plugin in my code yet. It is freshly installed. I also tried lower versions, but nothing seems to work. Project runs fine if expo image picker is removed. I am wondering if anyone here might be able to point me in the right direction.
e: file:///home/ryon/Documents/GitHub/xxxxxxxxxxxx/node_modules/expo-image-picker/android/src/main/java/expo/modules/imagepicker/ImagePickerModule.kt:216:57 Type mismatch: inferred type is Unit but Boolean was expected
Wonder how people go about picking what package to use. Specifically I am looking at using an image picker for updating an avatar. I will be storing the image in firebase and most likely allowing user to crop as well, but both of these allow for the functionality. Both are regularly updated and have about the same number of stars. How do you pick between the 2 packages?
When simply applying the User Input 'Image Picker', you don't really see anything happening after selecting an image. Though, because we know images attached to records are actually stored as attachments, I just had a look at the Attachments [sys_attachment] table.
Filtering on the most recent attachments, notice that a Content type 'image/png' record has been created on the Table name 'sys_cs_conversation_task' and the File name exactly is the file which you just selected with the User Input 'Image Picker'!
So the User Input 'Image Picker' does work. Though, the image is only added to the Attachments table. So what actually does the vaInput give us? Might that be useful? When applying gs.info(vaInputs.image.toString()), this provides us with something like:
-name.service-now.com/api/now/v1/cs/media/7ve9KNPje94K14077hEC123WhNjto3c8F68wPW3X8TLMg1F5A5T0n01uCqCu50zR
The first try was the simplest, though I didn't expect much; I simply looped through the same single Image Picker to upload multiple files and then at the end just attached this image picker to the record but actually nothing got attached, not the original upload nor the replacement upload. Didn't expect it to work but it was simple enough to try.
I have answered the question for initial page creation only, the required clientlibs are missing on initial page creation and adding that to initial page creation clientlibs should work image picker on initial page creation also.
An image picker is one of the most widely used components in any app. Many popular apps, such as Facebook, Twitter, Instagram, WhatsApp, etc., have an image picker that enables users to select files from their device to use as a profile picture or share with their friends.
In the example above, the image is taken from the device camera. This method opens the camera and picks the picture snapped by the user. The source: ImageSource.camera arg is what opens the device camera.
We have an enum, ImageSourceType, that holds the image source types, gallery, and camera.
In the HomePage widget, we have a method, _handleURLButtonPress. This method uses the arg type, which bears any values of the ImageSourceType. It opens the ImageFromGalleryEx widget, passing in the image source type to the widget class.
The Pick Image from Gallery button passes the ImageSourceType.gallery to the ImageFromGalleryEx widget, telling it that we will pick an image from the gallery. The Pick Image from Camera button passes the ImageSourceType.camera to the ImageFromGalleryEx widget, telling it to open the camera of the phone and take the snapped picture as the selected image.
We also have an initState method, which is inserted into the widget tree first. We use this method to initialize and create the instance of the ImagePicker class and then assign it to the imagePicker variable.
Inside the build method is the Container widget, which is a child to the Center widget. We render the Image.file based on the condition of the _image variable. If the _image is not null or undefined, then we know it has an image then we render the Image.file widget by passing the _image variable to it.
This Image.file is a widget that is used to render images from the local storage of a device.
If there is nothing in the _image variable, we render the Container widget. This Container displays a camera icon.
The GestureDetector is the parent to all these widgets. It has an onTap event registered to it. This event is fired when the widgets inside this GestureDetector are tapped on. The onTap handler calls the pickImage method from the imagePicker instance. It deduces the source of the image from the type variable and passes it to the pickImage method. It then passes the quality of the image (imageQuality: 50) and, lastly, the preferred camera device preferredCameraDevice: CameraDevice.front. This causes it to choose the front camera of our phone.
Now, pickImage returns an XFile instance. We reference the image.path from the XFile instance image returned and pass it to File to create a File instance from it. This XFile instance is what we set to the _image state via:
df19127ead