8.0 - Image/PDF upload changes

Naviga Writer 8.0 included breaking changes for plugins which create content object Nodes containing image or pdf files. Plugins with image drag-and-drop functionality for example could be affected.

Is my plugin affected?

Your plugin is affected if any of the following is true:

• There is a Command or DropHandler in your plugin which creates BlockNodes with the types 'ximimage' or 'ximpdf'

• There is a Command or DropHandler in your plugin which calls the function api.editorSession.fileManager.sync

• Your plugin registers a Node with custom image/pdf upload capabilities

  • e.g. a custom image gallery, or other custom content object handling images

Fixing creating BlockNodes with image and pdf types

If there is no image/pdf created when your command/drophandler runs and you get an error similar to the following in the console:

Uncaught Error: Property fileNodeId is mandatory for node type ximimage

Find the place in your plugin where the method tx.insertBlockNode is called and replace the following property, depending on the node type:

ximimage Node

Replace imageFile: <your value> with fileNodeId: <your value>.

ximpdf Node

Replace pdfFile: <your value> with fileNodeId: <your value>.

Fixing api.editorSession.fileManager.sync

If the image/pdf node is created but it just seems to spin and never upload correctly, and the following error is printed in the console:

fileManager.sync is deprecated, please refer to the Naviga Writer 8.0 release overview for upgrade guide and fix

It is used mainly in commands/drophandlers which create FileNodes and BlockNodes with the type 'ximimage' or 'ximpdf'.

The sync method has been deprecated completely and will throw an error if called. To fix this, a new method called fileManager.upload has been created. This method takes an array of node Ids, and if the nodes created are image or pdf types, it should be as simple as replacing the function called:

// Creating nodes and storing the created node ids

setTimeout(() => {
    api.editorSession.fileManager.sync()
        .then(...)
        .catch(...)
}, 0)

// Replace the sync call above with the following call to upload

setTimeout(() => {
    api.editorSession.fileManager.upload([nodeId])
}, 0)

Fixing Nodes with custom image/pdf capabilities

Sometimes Nodes can store its own image/pdf data and in those cases the registered Node will need to be "uploadable". This can be accomplished by using the fileTrait imported from the writer module.

If your plugin is fairly new it should already be using at least the imageNodeTrait and imageCropTrait to add utility functions used by images.

Add the fileTrait as a parameter to withTraits function and rename the Node property defined as {type: 'file'} to fileNodeId.

When the fileManager.upload([nodeId]) function is called and the file upload completes/fails an event will be emitted on the Node. Add onFailedUpload and onUploaded functions to your Node class to handle the response.

Example below.

import {api, withTraits, traitBundle, BlockNode} from 'writer'

const {imageNodeTrait, imageCropTrait, authorNodeTrait, fileTrait} = traitBundle

class ExampleImageNode extends withTraits(BlockNode, imageNodeTrait, imageCropTrait, fileTrait) { 

    onFailedUpload({message, status, silent}) {
        // Do cleanup as needed
    }

    onUploaded(navigaDoc) {
        // Triggers after an image has finished uploading     
    }

}

ExampleImageNode.define({
    ...
    fileNodeId: {type: 'file'}
    ...
})