write tooltip to collection image field with uploaded file

Ask the community
, ,
1 
  uploadedFile.tooltip =  $w("#inpPictureTitle").value;    
 $w("#tlp0").text =  $w("#inpPictureTitle").value;          // works for display of tooltip 
 $w("#img0").src = uploadedFile.url;             // displays uploaded  picture correctly 
 currentItem.piece0 =  uploadedFile;      //  seemed to work  saves to file in update but does  
                                                                                      not save tooltip

Question - How can I store the inputted Picture Title text as the tooltip when writing an uploaded fie to an image field in a collection? Above code works except I can’t get that tooltip field to save. Newbie guessing on how to set up that first statement. Please help. Thank you.
Amy

2
3

Thanks so much for the answer Girl Zano. I read this already and did some testing and I believe it’s the tooltip that I need to store, not the alternate text. This documentation discusses how to work with alt text and tooltips on screen images. Still can’t figure it out. Tried a million things. Nothing works.

4

@amy32135 You should connect the tooltip through code when your page loads. i.e.:

$w.onReady(()=>{
    $w('#dataset').onReady(()=>{
        const item = $w('#dataset').getCurrentItem();
        $w('#img').tooltip = item.name;
    });
});

No need to have two fields with the same value.

5

@skmedia Thanks David!

$w(“#img0”).src = uploadedFile.url; This works. displays the image of an uploaded file

     Now Here is the question.  How do I save this image to an image field in the collection.

curentItem.piece0 = ???;

I am trying to do something that the wix API’s won’t let me do? Thanks again David.

6

@amy32135 If you used an upload button, the images should already be stored in some database of yours somewhere. Apart from that, I don’t really know what your field keys for that database are, you’ll have to find the correct column and get the appropriate field key by clicking on the hamburger menu for that column.

What did you set the uploadedFile variable equal to/how did you define it?

7

@skmedia - I’m writing back the data record fine using wix data update. The field name is piece0 - an image file field in the collection. currenItem is items[0] returned by the by the data query. The following statement works. When I update the file, the contents in the collection field picture is written into the piece0 field. No problem. I don’t think I have to do anything with defining uploadedFile. It’s returned by by uploadButton1.startUpload.

if (currentItem.piece0== null ) { currentItem.piece0=currentItem.picture; } // works

Now here is the click event that runs after the select file button does it’s thing. ( There is no code for select file button. It just does it. ) The question is - how do I reference the actual picture that came from uploaded uploadedFile.url and is now displaying properly in $w(“#img0”) and place it in piece0?

export function btnPic0_click(event) {
if ($w(“#uploadButton1”).value.length > 0) {
$w(“#txtMsg”).text = Uploading ${$w("#uploadButton1").value[0].name};
$w(“#uploadButton1”).startUpload()
.then( (uploadedFile) => {
$w(“#txtMsg”).text = “Upload successful”;

    $w("#img0").src = uploadedFile.url;    // displays uploaded  picture correctly     
    $w("#tlp2").text =  $w("#uploadButton1").value[0].name;     ///    works   this is the file name               with .jpg 

   **currentItem.piece0=   ???????????????????;** 


    $w("#inpPictureTitle").value=""; 

      }) 
  . **catch** ( (uploadError) => { 
    $w("#txtMsg").text = "File upload error"; 
    console.log(`Error: ${uploadError.errorCode}`); 
    console.log(uploadError.errorDescription); 
  });

}
else {
$w(“#txtMsg”).text = “Please choose a file to upload.”;
}
}

Sorry this is so long. Thank you for the help, especially on a Saturday.

      Amy
8

@skmedia David - I just got it. This writes the image correctly. Now back to figuring out how to attach the text to the image whether it be a tool tip, alt, title, description.

currentItem.piece0=uploadedFile.url;

9

@amy32135 I see. Well my previous suggestion is for displaying the data only after it’s saved. I’m just not exactly sure what your flow is here.

10

@skmedia Writing a file maintenance program for exhibiting artists to be able to maintain a database of 12 pictures. Must be very user friendly.

11

@amy32135 In that case, I wouldn’t worry too much about the upload button behavior so long as the upload is occurring. You can use an afterInsert() hook on the collection in order to rename elements according to your schema, or if the intention is for the artists to change data themselves, then create separate text inputs for what they would like the image to be called. Odds are no one is going to be happy with some standardname_092834.jpeg format anyway.

12

I know what you mean. That’s why I was going crazy trying to allow the artists to change the alt and tooltip text associated with the image. Anyway, used text fields in the database instead and it works great in the maintenance screen. Problem is - now I have to custom code the dynamic item page that shows the gallery for each artist because I deviated from wix coding for storing info about images.
Question - should I be able to add custom code to a dynamic item page?