how-to-upload-a-file-from-ue4-to-js-server-using-multer

Development Programming & Scripting C++
, , ,
1

I’m currently making a project that requires me to send a png image from unreal engine to a next JS server which uses multer to pass the file on to another server.

When sending my file as a binary the JS server (intermediate server) is not receiving a file from unreal.

I’ve tried the two following methods


        TArray<uint8> rawFileData;
        FFileHelper::LoadFileToArray(rawFileData, *media);
        Request->SetURL(API_HP_URL + "nude_upload");
        Request->SetHeader(TEXT("Content-Type"), TEXT("multipart/form-data; boundary=----WebKitFormBoundarywpp9S2IUDici8hpI"));
        Request->SetHeader(TEXT("Connection"), TEXT("keep-alive"));
        Request->SetHeader(TEXT("accept"), TEXT("application/json, text/plain, */*"));
        Request->SetContent(rawFileData);
        Request->SetVerb("POST");
        Request->OnProcessRequestComplete().BindUObject(this, &AHttpCommunicator::OnPostNudeSSResponse);

        Request->ProcessRequest();

and



        FString JsonString;
        TArray<uint8> rawFileData;
        TSharedRef<TJsonWriter<TCHAR>> JsonWriter = JsonWriterFactory<TCHAR>::Create(&JsonString);
        JsonWriter->WriteObjectStart();
        JsonWriter->WriteValue("fileName", pPathToFile);
        JsonWriter->WriteValue("file", FBase64::Encode(rawFileData));
        JsonWriter->WriteObjectEnd();
        JsonWriter->Close();
        Request->SetURL(API_HP_URL + "nude_upload");
        Request->SetHeader(TEXT("Content-Type"), TEXT("multipart/form-data; boundary=----WebKitFormBoundarywpp9S2IUDici8hpI"));
        Request->SetHeader(TEXT("Connection"), TEXT("keep-alive"));
        Request->SetHeader(TEXT("accept"), TEXT("application/json, text/plain, */*"));
        Request->SetContentAsString(JsonString);
        Request->SetVerb("POST");
        Request->OnProcessRequestComplete().BindUObject(this, &AHttpCommunicator::OnPostNudeSSResponse);

        Request->ProcessRequest();

both of these methods have the server return an undefined file obj


// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import path from 'path';
import MulterGoogleCloudStorage from "multer-google-storage";
import nextConnect from 'next-connect';

const Multer = require('multer');
const { Storage } = require('@google-cloud/storage');


const CLOUD_BUCKET = 'nude_locks';
const PROJECT_ID = 'hp-production-338902';
const KEY_FILE = path.resolve('./hp-production-key.json')


const storage = new Storage({
    projectId: PROJECT_ID,
    keyFilename: KEY_FILE
});

const bucket = storage.bucket(CLOUD_BUCKET);

const upload = Multer({
    storage: Multer.memoryStorage(),
    limits: {
        fileSize: 5 * 1024 * 1024,
    }
}).single('file');

const apiRoute = nextConnect({
    onNoMatch(req, res) {
        res.status(405).json({ error: `Method '${req.method}' Not Allowed` });
    },
});

apiRoute.use(upload);

apiRoute.post((req, res) => {
    console.log(req.file);
    if (!req.file) {
        res.status(400).send("No file uploaded.");
        return;
    }

    const blob = bucket.file(req.file.originalname);

    // Make sure to set the contentType metadata for the browser to be able
    // to render the image instead of downloading the file (default behavior)
    const blobStream = blob.createWriteStream({
        metadata: {
            contentType: req.file.mimetype
        }
    });

    blobStream.on("error", err => {
        next(err);
        return;
    });

    blobStream.on("finish", () => {
        console.log('finish');

        console.log(blob);

        // The public URL can be used to directly access the file via HTTP.
        const publicUrl = `https://storage.googleapis.com/${bucket.name}/${blob.name}`;

        // Make the image public to the web (since we'll be displaying it in browser)
        blob.makePublic().then(() => {
            res.status(200).send(`Success!\n Image uploaded to ${publicUrl}`);
        });
    });

    blobStream.end(req.file.buffer);

});

export default apiRoute;

export const config = {
    api: {
        bodyParser: false,
    },
}

const fileSelectedHandler = e => {
    const file = new File("D:/_Spectre/VHS/P210107_VHS_Configurator/P04_Unreal/Human_Configurator/Saved/Screenshots/Windows/-1-nude-2022-2-13.png");

    console.log(file);

    const formData = new FormData();
    formData.append('file', file);

    axios.post('/api/nude_upload', formData, {
        headers: {
            'Content-Type': 'multipart/form-data',
        }
    })
        .then(res => {
            console.log(res);
        });
}

Is there a way to create a file object from UE4?

alternatively is there a way to retrieve google cloud storage access tokens from UE4