Api image file upload preview

Developer Talk API
,
1

Hi, I am uploading an image into an image column via the API without issues. However the icon for the image in the database view is generic and not showing a tiny preview like when I upload it directly. Is there a trigger to refresh this or this is considered a bug ?

image

2

Hi @scr ,
When you upload the image via the API, can you display it from your base ?
I ask you that question because while trying to reproduce your problem, I encountered the following behaviours :

  • if the non-public image URL (see Upload File/Image) is wrong, I get a {"success":true} answer but the tiny preview isn’t available and I get a message “This image failed to load” while trying to display the image from within my base
  • if the non-public URL is OK, I get the same {"success":true} answer but the tiny preview is automatically available
    (I tried that on SeaTable cloud)

Bests,
Benjamin

3

Hi @bennhatton,

I am able to click on the “generic” tiny preview to expose the full image without any issues. It really seems like the API upload process doesn’t trigger the “make a mini image” backend.

to get some context, I am building a book inventory where someone can run around the house with a barcode scanner and scan the ISBN numbers behind our books to automatically fill in most of the required details.

II’m using a webhook in seatable to trigger a workflow in n8n that will grab the ISBN entered in seatable form and use the google book api to get all the relevant data for the book (including the thumbnail/image url). I am then feeding the desired fields back to seatable. One API uploads to sealable text/number fields, and another API call uploads the image (binary). It then sends a discord message on my private server with some details about what was just added.

why make our life easy when we can make it hard eh :slight_smile:

thanks

4

Thumbnail is generated on the fly. The server need to be able to access the original image. If you can view the full image but not the thumbnail, it is likely you insert a wrong image URL in the cell.

You can upload an image via web interface. Then you can check with Chrome developer console to compare the two.

5

This is weird…
Can you tell us more about your upload process ? While trying to reproduce your case, I actually had to make three different API calls :

  1. The first one to get the upload link (as far as I understand, this one is needed only once, not every time as the upload link won’t change for every image)
  2. The second one to upload the image
  3. The last one to attach the image to an image column

As you said you upload a binary image, I thought maybe your process is slightly different and that’s why I’m not able to reproduce the situation…

6

Hi @daniel.pan and @bennhatton

within n8n here are the various steps, nothing crazy (yet … :stuck_out_tongue: ).

  1. I get a webhook from seatable to trigger my workflow
  2. the action right after my webhook listener is a seatable node that will use the row_id from the webhook BODY to download the ISBN number that was added to a table column
  3. I then have an IF node to stop if ISBN is empty
  4. google books node then uses the isbn number to get the volume via API
  5. I then split in 3 branches. 1 to go from a array of author and convert to a single string with comma instead, 1 to carry over rest of the text fields that I want from the google node and the next one extract the url also from the google node
  6. focusing on the image part: I then have a http request node to get the image from the previous step extracted URL
  7. I have a seatable node that will do the asset upload operation using the proper row ID and table name gathered some steps back.
  8. generic thumbnail icon show up in seatable and I get the full size image when I click on it.

as for uploading the image directly in seatable and watching my browser dev console;

I had to fix some ing-src Content security policy to allow books.google.com as an image source. Once that was fixed, I was able to upload a photo directly from the same url that n8n uses and the thumbnail is as it should.

NOW, I am going to assume that the seatable node within n8n makes more than one call in order to do the “image upload” like you mentioned. I should have clarified that I am not making the API calls myself but going through the API for image upload.

I’m not sure where to go from here to further troubleshoot this.

thanks

7

this screenshot shows the exact same image source that on the left was uploaded via n8n/API and on the right from the seatable web page via the url fetching process.

image
image857×471 21.7 KB

8

Hi @danie.pan, @benhatton. I think I might have found the bug preventing this from working.

So I just tried with a random png file somewhere. I was able to get it to work without any issues, however the kind of url google book gives me for the thumbnail is not a direct file. It makes an API call:

example:

http://books.google.com/books/content?id=FVO7CgAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api
I guess now it just needs fixing

Simon

9

Hi @scr ,
Sorry I abandoned ship: I struggled a lot but didn’t manage to reproduce a workflow similar to yours, particularly I failed to upload an image through n8n, neither with the upload image action, nor while trying a custom API call :sob: !
While trying to achieve this, I discovered the … (sorry I can’t find words to describe it :joy: :joy: ) cat API which returns images, but as you shown in your last message, the google book API doesn’t seem to return a JSON response containing the image URL (which is moreover “standard”, ending with filename.extension) as the cat API does, but directly the image…

If you look at the last message of this thread (unfortunately not directly applicable as it is Java), it seems that you can eventually make your app believe that you got a “real” image by getting the binary image file from the stream…
Maybe this link from n8n forum can help : it sounds pretty similar, except the image comes from another source.
Sorry I can’t help more… :frowning_face:

Bests,
Benjamin

10

@bennhatton
I guess as a temporary workaround, I could get n8n to download the image, write binary to disk and upload the file to seatable followed by deleting the staged binary file. It’s a lot less efficient, but I don’t see why it wouldn’t work. I just hope to see a more elegant solution (bug fix ? ) to this issue at some point.

btw if you need help getting n8n to upload stuff to seatable, feel free to ping me, I can provide you with some example workflow maybe.

Simon

11

Let me try to summarize this:

  • the n8n node works as expected and uploads a picture with thumbnail, if the image-source is a public available url, that points directly to the picture.
  • the upload of a file works, but the thumbnail is not generated correctly, if the file is behind a redirect.

To be honest, I don’t think, this should be handled in the n8n node. As you described, this is a special case, where you should first download the file as binary and then upload it to SeaTable.

12

Hi @cdb

  1. jpg, png, other supported image format) works without any issues if the URL sent through the node is a normal one (ending with the filename.extension)
  2. If the image url as you mentioned is a redirect or something other, the image itself lands in sealable without any differences, however the seatable mini thumbnail generation fails to generate.
  3. just have to be careful how I use the word thumbnail, as google book api calls the book cover a thumbnail.
  4. If I take the same URL (without filename.ext) in seatable and add an image with it, there is no issues whatsoever

My take on it is that the issue might just be the flow of things (when seatable generates the mini thumbnail when files are uploaded via the API) (which seems to differ from uploading via web).

I am a fringe case for sure, however I would expect the behaviour to be the same when uploading via api or via web.

thanks

Simon