# 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>`.&#x20;

**ximpdf Node**

Replace `pdfFile: <your value>` with `fileNodeId: <your value>`.&#x20;

### 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.&#x20;

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

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.

```javascript
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'}
    ...
})

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.navigaglobal.com/writer/8.1.3/developer-guide/upgrade-guides/8.0-image-pdf-upload-changes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.