In particular I want to extract EXIF data from uploaded images.
I’d prefer to do this in Python, however I’ve only found solutions to extract EXIF data clientside in JS. This is the JS library I’ve found: https://github.com/exif-js/exif-js along with this Dash clientside callbacks functionality to run JS code after files are uploaded: https://dash.plotly.com/clientside-callbacks.
Here’s my attempt to get this working, however it doesn’t seem to do anything after an image is uploaded:
import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
app = dash.Dash(__name__, external_scripts=['https://cdn.jsdelivr.net/npm/exif-js'],)
app.title = "Get exif"
app.layout = html.Div(
[
dcc.Upload(
id='upload-upload_images',
children=html.Div([
'Drag and Drop or ',
html.A('Select Files')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
},
# Allow multiple files to be uploaded
multiple=True
),
html.Div(id='display_exif'),
]
)
app.clientside_callback(
"""
window.onload=getExif;
function getExif(file_list) {
var img1 = file_list[0];
var my_exif = EXIF.getData(img1, function() {
var make = EXIF.getTag(this, "Make");
var model = EXIF.getTag(this, "Model");
var makeAndModel = document.getElementById("makeAndModel");
makeAndModel.innerHTML = `${make} ${model}`;
});
return my_exif
}
""",
Output('display_exif', 'children'),
Input('upload-data', 'contents'),
)
app.run_server(debug=False)
It would be amazing if this was possible in Streamlit, if not then in Dash, Flask or with any other way in Python. I don't have experience with JS, so afterwards I’d like to get this extracted EXIF data back into Python to work with it further.
Appreciate a lot any help!