Delete image from gallery by code

Ask the community
, ,
1

Hi,

Is it possible to delete an image from a gallery by code? I’ve got a database with an embedded media gallery. I tried using wixData.remove but it doesn’t seem to be deleting the image from the gallery. Please assist. Here’s the code so far.

import wixData from ‘wix-data’ ;
$w.onReady( function () {

$w( “#gallery1” ).onItemClicked((event)=>{

    console.log( "Gallery Item Title = " + event.item.title); 
    console.log( "Image file ="  + event.item.src);

let image = event.item.title
let imagecover= event.item.src

const index = event.itemIndex;

    console.log ( "Gallery index="  + index)

$w( ‘#input1’ ).value=image
$w( ‘#cover’ ).src=imagecover
// then below i am placing that title into the #input1 box
})
})
// the user selects an image in the gallery below which is already connected to 'dynamicDataset and that image title is stored
export function text30_click(event) {

        wixData.query( "#dynamicDataset" )

.find()
.then( (results) => {
if (results.items.length > 0 ) {
let firstItem = results.items[ 0 ];
wixData.remove( “Gallery” , firstItem)
.then(() => {

                console.log ( "item removed" ) 
    }) 
    . **catch** ((err) => {

let errorMsg = err;
});
}

//see item below
else {
// handle case where no matching items found
}
} )
. catch ( (err) => {
let errorMsg = err;

})}

Greatly appreciate your assistance!

2

Let’s say you want to remove the first item in a media gallery filed.
Then:

//let's say the media gallery filed key is "images"
//get the data record let's call it "item"
item.images.shift(); // this line removes the first element from the array.
wixData.update("CollectionName", item);
3

Thank you for your response J.D, Much appreciate it.

I’m trying to delete a specific record after retrieving it from the query. I have the information of the image from the query including its src value, index number in the database etc.

I tried to include the variable/ index number such as “item.images.shift(0)” and "item.images.shift(imagecover)"but this doesnt work.

Grateful for any further assistance.

4

@kareem Post your code (and put it in a code block).

5

Hi @jonatandor35 , here’s the code. I have two problems now.

  1. Whilst testing I had placed the splice in the onReady function but for some reason it only temporarily deleted the record. When I refresh the page the record seems to reappear.

  2. I moved the action from the onReady and attempted to delete the record in the button2 onclick event, but I’m not sure how to recall the item which is stored as “index”. I read that once “var” is stored outside of a function it can be called anywhere. However, the index number generated is a response to the user selecting the image via the onItemClicked, so how can I get the index number stored so that it can be used in the export function?

  import WixData from 'Wix-data';
  
  $w.onReady (function () {
  $w("#gallery1").onItemClicked ((event)=>{
  
  var index= event.itemIndex;
  $w("#text31").text= index
  
  console.log("Gallery Item Title=" + event.item.title)
  console.log ("gallery#:", index)
  
  let image= event.item.title
  let imagecover= event.item.src
  let eventname= $w('#text28').text
 
  
  
  $w('#text30').text= image
  $w('#cover).src= imagecover
  })
  })
  
  export function button2_click(event){
  let currentItem=($w("#dynamicDataset").getCurrentItem())
  
  console.log(currentItem)
  
  currentItem.media.splice(index,1)
  console.log("item removed")
  wixData.update("Gallery", currentItem)
  
  $w("#gallery1").items= [{currentItem}]
  console.log(currentItem)
  }
6

@kareem you have to declare the index in the global scope (so it will be available for the button_click function. Something like:

import WixData from 'wix-data';
let index;
  $w.onReady (function () {
  $w("#gallery1").onItemClicked ((event)=>{
  	index = event.itemIndex;
//.....
7

Also in the first line you wrote ’ W ix-data’ instead of ‘wix-data’

8

@jonatandor35 MAny thanks for all the assistance. Its sorted now and works perfectly.

9

you’re welcome :slight_smile:

10

hello. I want to delete some of these photos on the update screen. Can you share the exact working code and settings?