Device image upload via API

Hi,

Is it possible to upload and then view the device image via API? Any advice on how to do it?

I tested in traccar modern interface, the browser makes a POST and a GET request:

POST: http://demo.traccar.org/api/devices/1/image
GET: data:image/jpeg;base64,/9j/4RdbRXh...

No Preview and no Response, I get this notice in the browser: Failed to load response data: Request content was evicted from inspector cache.

Further to my testing, when trying to upload the image in the media directory I am getting 401 Unauthorized.

Any help will be appreciated!

The official web app also uses the API, so the answer is yes. Check how the official app does it and do the same thing.

Hi, thanks for the the fast response!

That's the thing, there is no information on the Traccar API page and checking the browser requests provides incomplete picture of the process. No luck with forum search either.

I also checked the source code but cannot seem to find which file manages the image upload.

If you can point me in the right direction it will be great!

Hum, so once we save the updated device details the server makes a PUT request like this:

https://demo.traccar.org/api/devices/1

And there we can see the image name in the attributes:

{"id":1,"attributes":{"deviceImage":"device.jpeg"},"name":"Car Name","uniqueId":"1111111","status":"offline","lastUpdate":"2023-01-07T12:22:47.000+00:00","positionId":111111,"geofenceIds":null,"phone":"null","category":"car","disabled":false,"expirationTime":null}

Still, how do I send the image upload request so that Traccar accepts it?

So after some more digging, it seems that image is sent as Base64 String. Interesting approach.

Three questions:

1- Is this the URL that we have to send the image string to: https://demo.traccar.org/api/devices/1/image

2- Is this the JSON that we have to send:

{"image":"data:image/jpeg;base64,/9j/4RdbRXhpZgAATU0AKgAAAAg..."}

3- Are there any other headers that we have to send (apart from the usual ones)?

Here's the source code for image upload:

https://github.com/traccar/traccar-web/blob/master/modern/src/settings/DevicePage.js#L48-L51

Thanks for the update, it turns out it's really simple once you know where to look at.

I can now upload an image and display it successfully.

However, I run into another problem - when I try to upload a different image for the same device, image is not being updated. On my POST method, I still get ResponseCode: 200 and Response Body: device.jpeg but the image file is never updated. No errors in Traccar log.

Is it possible to be some kind of a permission issue? I have read and write for the owner user.

Maybe caching issue?

Unfortunately, it's not that. I am looking at the file Last Modified date directly on the server.

If traccar doesn't update the image, shouldn't it send the appropriate error message?

Could be a bug. Please create a ticket.

Hum, this is very strange, it turns out the file does upload/update but always with this name: device.jpeg; charset=utf-8.

Any idea why the file that I am uploading is named device.jpeg; charset=utf-8 instead of device.jpeg?

Forget it, all fixed. Thank you for the help, Anton!

Hi again,

I am still struggling with the image upload. While I manage to send the image data, the file that is written in media/deviceid/ folder is corrupt. Is there any place where I can see what is the POST request body that traccar expects? Also, is it JSON encoded?

I can see the body that the modern UI sends via browser, which is like data:image/png;base64,iVBORw0KGgoAAAANSU...

However, when I send this exact same string as POST request and contentType image/png or image/jpeg, the decoded file is broken.

This is what I have tired so far sending as POST body:

1. "data:image/png;base64,iVBORw0KGgoAAAANSU..."
2. "base64,iVBORw0KGgoAAAANSUh..."
3. "iVBORw0KGgoAAAANSUh..."

I also tried to encode it as JSON.

I would really appreciate your help!

Why is it broken? What is in the file comparing to what you sent?

I get "unsupported file type" error both when I try to open the image with image editor and also when I try to encode it online to base64 again.