API image upload during listing issues

Hello. I am using he API to list my items and I have noticed that on browser images are visible with no issues but on Mobile iOS app they are not displaying. Has anyone else had this issue and how did you fix?

This maybe a fix but not at home to look.

Could you please give the link to that faulty listing? What was the full computer code that you ran? Maybe the image URL was incorrect.

Not at home to post code but here is link.

https://gameflip.com/item/-rare-130-sunsetter-3-pack-twine-100-drop/267b1707-753c-4531-a8dd-2ada88d8ca5d

It’s fine in the browser but in the mobile app no image.

Then it may be a bug in the app (or the app needs to be refreshed). If the image shows up on the web, it should show up fine in the app.

I thought the same. But I did notice that when I want to edit a listing the image isn’t present and I have to upload an image for it to be saved. So I wonder during the upload procedure it’s similar to the order issue I posted earlier. It shows for cover but not ID 1? Mobile might show ID 1 and that is why not showing? When I get home I’ll evaluate and update.

Here is the code from the child file

// Upload an image to use as the listing's cover photo
await gfapi.upload_photo(listing.id, photo_url);

Here is code from the index.js

/**
 * Uploads an online image to Gameflip for use as the listing's cover photo.
 * NOTE: Images have a filesize limit of 500 kilobytes.
 * @param {string} url
 * @returns {object} photo object with url
 */
async upload_photo(listing_id, url) {
    let photo_obj = await this._post('listing/' + listing_id + '/photo');
    if (!photo_obj || !photo_obj.upload_url)  return console.log('Failed POST photo to API');
    
    let photo_blob = await Request.get(url, {encoding: null});
    let upload_req = await Request.put({
        url: photo_obj.upload_url,
        body: photo_blob
    });
    
    let patch = [{
        op: CONST.LISTING_OPS.REPLACE,
        path: '/photo/' + photo_obj.id + '/display_order',
        value: 0
    },
    {
        op: CONST.LISTING_OPS.REPLACE,
        path: '/photo/' + photo_obj.id + '/status',
        value: CONST.LISTING_PHOTO_STATUS.ACTIVE
    },
    {
        op: CONST.LISTING_OPS.REPLACE,
        path: '/cover_photo',
        value: photo_obj.id
    }];
    return await this.listing_patch(listing_id, patch);
}

Looking at the code the value: 0 might be the culprit.

Does the photo appear normally after you’ve changed the value 0 to 1?

Doesn’t look like it worked.

Please download or git pull the GFApi again. A listing requires two photos to be uploaded and the previous code only uploaded one.

I see the code change you made. Thank you I will update and try again and update on confirmation of success.

@galacticarm doesn’t seem to still show up on mobile. Image shows up if I were to edit the listing, but viewing the listing and viewing search there is no image, only in edit mode. Mind you this is iOS and apparently there is no issue in Android from people telling me.

The images do successfully load on Android/web but fail to load on iOS. I’m not sure why. Please post the code that you executed to post one of your listings.

This is the child JS file

// Sample code to create a listing for Rocket League.
// Your Gameflip account needs to be verified and Steam connected.
//
// Generate the API Key and OTP secret in [Settings page](https://gameflip.com/settings)
//
// Type in bash shell:
// ```
//   export GFAPI_KEY=my_api_key
//   export GFAPI_SECRET=my_api_secret
//   node src/samples/bulk_listing.js
// ```
//
// If you are using an IDE, set the `GFAPI_KEY` and `GFAPI_SECRET` in the Run Configuration Environment.
// Be careful not to commit/push anything with the API key/secret to a public repository.

'use strict';

const GFAPI_KEY = "XXXX";
const GFAPI_SECRET = "XXXX";

// For your own code, use the 'gfapi' library (`npm install 'iJJi/gfapi').
const GfApi = require('../index'); // require('gfapi')

// Create a Rocket League listing
async function main() {
    // Create GF API client. Options: logLevel
    // * `trace` (logs HTTP requests/responses)
    // * `debug` (outputs HTTP requests)
    const gfapi = new GfApi(GFAPI_KEY, {
        secret: GFAPI_SECRET,
        algorithm: "SHA1",
        digits: 6,
        period: 30
    }, {
        logLevel: 'debug'
    });
    
    // For an inventory of Rocket League items and photo URLs, view https://gameflip.com/api/gameitem/inventory/812872018935
    // and for Fortnite, view https://gameflip.com/api/gameitem/inventory/GFPCFORTNITE
    
    // DO EDIT: Choose an image for your listing
    let photo_url = 'http://www.stobiedesign.com/Fortnite/assets/images/Weapon_Nocturno.jpg';
    // Create an initial listing
    let query = {
      
        // DO EDIT: Put just 'Key' for example if you are selling one, otherwise write the quantity as so: Item Name | 10x
        name: '⚡️130 Founders Nocturno (3 Pack) | ⛏ Twine ⚡100 Drop [PS]',
        description: '\
⚡️130 Founders Nocturno (3 Pack)\n\
\n\
Each purchase made will include a Twine Peaks ⚡100 Farming Drop (does not include Storm Chest)\n\
\n\
NOTE: If you are on XBOX version. It is required you have your XBOX account linked with Epic games and you will need to send me your EPIC name upon purchase so that we can arrange delivery times. If you do not have a linked account, then I have the right to cancel this purchase.',
        price: 1000, // price in cents
        
        // MAYBE EDIT: Platform variation, change if you want to sell for example Fortnite (upc) on the PlayStation (platform) section instead
        upc: GfApi.UPC.FORTNITE_PS4,
        platform: GfApi.PLATFORM.PS4,
        shipping_within_days: GfApi.SHIPPING_WITHIN_DAYS.THREE,
        expire_in_days: GfApi.EXPIRE_IN_DAYS.SEVEN,
        
        // DON'T EDIT: Standard settings for coordinated transfer in game item
        category: GfApi.CATEGORY.INGAME,
        digital: true,
        digital_region: 'none',
        digital_deliverable: 'transfer',
        shipping_predefined_package: 'None',
        shipping_fee: 0,
        shipping_paid_by: 'seller',
        
    };
    let listing = await gfapi.listing_post(query);
    // Upload an image to show in the listing page
    await gfapi.upload_photo(listing.id, photo_url, 0);
    // Upload another image to show in the search results
    await gfapi.upload_photo(listing.id, photo_url);
    // If you want to add a second image in the listing page then add the same
    // line of code with 0 changed to 1, and if a third then 1 to 2, and so on
    // in that order.
    // List the listing for sale
    await gfapi.listing_status(listing.id, GfApi.LISTING_STATUS.ONSALE);
}

// Run main() and catch any unhandle Promise errors
main().catch(err => {
    console.log('==== ERROR', err);
});

Here is the image section of the index.js file

/**
     * Uploads an online image to Gameflip for use as the listing's photo.
     * NOTE: Images have a filesize limit of 500 kilobytes.
     * @param {string} listing_id to update the listing
     * @param {string} url of the photo
     * @param {int} display_order for multiple photos. If not provided then it
     * is a cover photo and is shown on the search pages (should be lower res).
     * If provided then it is a listing page photo (should be higher res), and
     * the number is its order in the photo carousel.
     * @returns {object} photo object with url
     */
    async upload_photo(listing_id, url, display_order) {
        let photo_obj = await this._post('listing/' + listing_id + '/photo');
        if (!photo_obj || !photo_obj.upload_url)  return console.log('Failed POST photo to API');
        
        let photo_blob = await Request.get(url, {encoding: null});
        let upload_req = await Request.put({
            url: photo_obj.upload_url,
            body: photo_blob
        });
        
        let patch = [{
            op: CONST.LISTING_OPS.REPLACE,
            path: '/photo/' + photo_obj.id + '/status',
            value: CONST.LISTING_PHOTO_STATUS.ACTIVE
        }];
        let order_patch = display_order >= 0 ? {
            op: CONST.LISTING_OPS.REPLACE,
            path: '/photo/' + photo_obj.id + '/display_order',
            value: display_order
        } : {
            op: CONST.LISTING_OPS.REPLACE,
            path: '/cover_photo',
            value: photo_obj.id
        };
        patch.push(order_patch);
        
        return await this.listing_patch(listing_id, patch);
    }

I am still seeing blank white space on iOS application using api method. Is it the iOS application or the app method? Just curious as this effects any user wanting to buy from iOS?

Tried to use an image from the GF site to see if its my images, and still doesn’t display on iOS. I wonder if there is an issue with the calls on iOS when it comes to displaying images.

Please download or git pull the GFApi again. Before running the sample code, run this command in the gfapi folder:

npm update

The listing image should display on all platforms now, but please use JPG or PNG only.

Is it against the rules to use Gifs?

Not stated, but it’s pretty darn annoying with animated GIFs. If more people uses it, I’m sure there will be a rule.