Back

[SOLVED] Save image.png into Storage using Functions

  • 0
  • Self Hosted
  • Functions
  • Web
  • Storage
AndrewIAm
17 Feb, 2023, 16:45

I can't figure it out how to download image in .png by it's URL or Base64 string, I'm using Nodejs environment and get image in a two ways: Base64 string or URL. Seems like non of InputFile methods can do it without some additional action. Could anyone provide me a right direction, please?

TL;DR
The user was having an issue saving an image to storage using Functions. The issue was resolved by ensuring that the user had access to the file and checking the request headers. The user then asked how to display the image to the client using a URL from their bucket, but they were getting a 404 error. It was suggested that they try a different approach or use the fetch interface from Node.js. The thread ended with the user asking for guidance on downloading an image in .png format using a URL or Base64 string in a Node.js environment. No solution was provided for this specific issue.
AndrewIAm
17 Feb, 2023, 16:46

Save image.png into Storage using Functions

VincentGe
17 Feb, 2023, 18:05

πŸ‘€ So you're trying to get an image from the internet and put it into Appwrite's storage service right?

VincentGe
17 Feb, 2023, 18:05

Hmmmmm

VincentGe
17 Feb, 2023, 18:05

Have you sanity checked your code outside an Appwrite function?

AndrewIAm
17 Feb, 2023, 18:12

Nope, just wonder if it possible to make it work with Appwrite tools only

VincentGe
17 Feb, 2023, 18:13

πŸ‘€ Hmmm lemme play around with it, it should be possible.

VincentGe
17 Feb, 2023, 18:13

You may need a system library from node to save image to buffer or smthing, lemme try it.

VincentGe
17 Feb, 2023, 18:29

Node.js file handling hurts my eyes but:

TypeScript
import { Client, ID, Storage, InputFile } from 'node-appwrite';
import fetch from "node-fetch";
import fs from "fs";


const client = new Client()
    .setEndpoint('https://localhost/v1') // Your API Endpoint
    .setProject('test-self-signed')                // Your project ID
    .setKey('SECRET')         // Your secret API key
    .setSelfSigned()
;

// Init SDK

const storage = new Storage(client);


fetch("https://fastly.picsum.photos/id/641/200/300.jpg?hmac=TpiMIigzR3rlnmP84Df902LYzuV4pApn7Tq6lCYic0A").then(res => {
        const promise = storage.createFile('default', ID.unique(), InputFile.fromStream(res.body, 'image.jpg'));
        promise.then(function (response) {
            console.log(response);
        }, function (error) {
            console.log(error);
        });
    }
);
VincentGe
17 Feb, 2023, 18:30

This would work

VincentGe
17 Feb, 2023, 18:30

I'm more familiar with the fetch interface from node.js, which returns the body as a stream

VincentGe
17 Feb, 2023, 18:30

But I'm sure there's a million other ways to do this, it's just finding smthing that gives you what you need

AndrewIAm
18 Feb, 2023, 06:25

That helps a lot. Thank you! But another issue: how can I show this image to the cleint (provide URL from my bucket)? I'm trying to use this one: http://localhost/v1/storage/buckets/{BUCKET_ID}/files/{FILE_NAME}/view but got 404. What I did wrong?

Drake
18 Feb, 2023, 06:29

Make sure the user has access to the file. Check that the fallback header or Appwrite cookie is sent in the network request. If not, you may need to make sure your Appwrite endpoint and front end app are on the same base domain

AndrewIAm
18 Feb, 2023, 06:36

Bucket accessible for Any role and coockie is setup

Drake
18 Feb, 2023, 06:59

if it's set to any, then no cookie should be required.

maybe you're missing the project id: https://appwrite.io/docs/rest#no-headers

AndrewIAm
18 Feb, 2023, 13:24

Got it, thanks Steven! You saved my day 😍

VincentGe
18 Feb, 2023, 23:34

If the issue is fixed, remember to mark the thread title as resolved

AndrewIAm
19 Feb, 2023, 08:35

[REOLVED] Save image.png into Storage using Functions

VincentGe
20 Feb, 2023, 19:47

[SOLVED] Save image.png into Storage using Functions

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more