0

I am attempting to upload an image from a file on the client as the value of a Wakanda entity's image attribute named thumbnail. I am using the example from the documentation but I'm getting the following error in the browser:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8081/Artwork(016A8CCE202847FA87DF78A27353121D)/thumbnail?$rawPict=image/jpeg

Here is my code:

ds.Artwork.find(artworkId).then(artwork => {
    return artwork.thumbnail.upload(this.testFileInputElement.files[0]);
}).catch(e => {
    debugger;
});

The error is returned in the catch e argument. I have checked that the artwork entity is retrieved properly, the thumbnail attribute has an upload method and that this.testFileInputElement.files[0] is a proper File object.

Jeff G
  • 1,996
  • 1
  • 13
  • 22

2 Answers2

1

2nd Update: The bug is fixed in latest version of Wakanda.

Update: I filed a bug on Wakanda Github and it has been accepted. You can track the bug status there. In the meantime, please feel free to use the workaround provided below.

I tested and get the same 404 error. This appears to be a bug. The correct file upload URL should have "/rest" between baseURL and dataclass name like: http://localhost:8081/rest/Artwork(016A8CCE202847FA87DF78A27353121D)/thumbnail?$rawPict=image/jpeg.

The fix I found is to add "/rest" to line 3454 of "wakanda-client.no-primise.js" in web/node_modules/wakanda-client:

MediaBaseService._buildUri = function (dataClassName, entityKey, attributeName) {
        return '/rest/' + dataClassName + '(' + entityKey + ')' + '/' + attributeName;
};

This fix worked for me. I will report the bug and potential fix to the team. enter image description here

Xiang Liu
  • 393
  • 1
  • 7
0

Have you tried uploading the image using REST upload()?

I wouldn't recommend it for production use, but it should test whether you can upload an image to that entity.

You could also try the code below which I developed because I have my own API.

function uploadFile(request,response){

response.contentType = 'application/json';

var i,
    j=1,
    nameTemp,
    img,
    files=[],
    returnJSON = [],
    newName,
    folder,
    filePath;

folder = getFolder('path')+'/database/data/uploads/'
for(i=0;i<request.parts.length;i++){

    filePath = folder + request.parts[i].fileName.replace(/\s/g,'_');
    files.push(new File(filePath));
    returnJSON[i]={};
    returnJSON[i].name = request.parts[i].name
    returnJSON[i].value = request.parts[i].fileName;

    var documentName = request.parts[i].name

    //saveFileToData(filePath, imgName);

}

for(i=0;i<files.length;i++){
    j=1;
    var filePath;
    if(!files[i].exists){



        myBinaryStream = BinaryStream(files[i],'Write');
        myBinaryStream.putBlob(request.parts[i].asBlob);
        myBinaryStream.close();
        saveFileToData(files[i].path, files[i].name);

    }else{
        while(files[i].exists){
            nameTemp = files[i].name.replace(/\s/g,'_');
            filePath =  folder+files[i].nameNoExt.replace(/\s/g,'_')+j+'.'+files[i].extension
            files[i] = new File(filePath);
            newName = files[i].name;
            if(files[i].exists){
                files[i] = new File(folder+nameTemp);
            }
            j++;
        }
        myBinaryStream = BinaryStream(files[i],'Write');
        myBinaryStream.putBlob(request.parts[i].asBlob);
        myBinaryStream.close();
        returnJSON[i].value = files[i].name; //this is the fileName

        saveDocumentToData(files[i].path, nameTemp);

    }
}

return returnOK(returnJSON);
}

function returnOK (returnJSON) {
    returnJSON = JSON.stringify(returnJSON);
    return returnJSON;
}

function saveDocumentToData(path, documentName){

    var theDocumentFile = loadFile(path);



var theDocument = theDocumentFile.asPicture;

var documentEntity = ds.Document.createEntity();
    documentEntity.File = path;
documentEntity.name = FileName;
documentEntity.save();

}

Then install it with an index.js file in a module (in my case the module is called 'api') something like this:

exports.postMessage = function (message) {

var serviceFile = new File(module.filename);
var parent = serviceFile.parent;
var fileFile = new File(parent, 'file-handlers.js');

switch (message.name){
    case 'httpServerDidStart':
        httpServer.addRequestHandler("^/api/v1/file", fileFile.path, "fileHandler");
        break; 
    case 'httpServerWillStop':
            httpServer.removeRequestHandler("^/api/v1/file", adminFile.path, "fileHandler");
        break;
}

Then on the client side POST a message to 'http://localhost:8081/api/v1/file/uploadFile with the image in the body of the message.

You're welcome to use it if you want but I mainly included as one way of testing if you can upload the image to the file.

Chris Curnow
  • 643
  • 5
  • 15