This seems a bit dodgy cause I'm not quite sure how it works yet, but it is working.
It's a Mongo implementation, however I am adding it here because I think the takeaway is that you can define and access multiple file inputs where the name
is a dynamic entity as are the number of inputs.
What enabled this was using iteritems()
.
Python
for key, value in request.files.iteritems():
uploaded_image = request.files[key]
name, ext = os.path.splitext(uploaded_image.filename)
if ext not in ('.png','.jpg','.jpeg','.JPG','.gif'):
return "File extension not allowed."
if uploaded_image and uploaded_image.file:
raw = uploaded_image.file.read()
filename = uploaded_image.filename
dbname = 'grid_files'
db = connection[dbname]
fs = gridfs.GridFS(db)
fs.put(raw,filename=filename, user_email = user_email)
This adds each image to the database with a filename and a user email for unique identification (as well as time and length fields automatically generated by MongoDB).
On the client side, the inputs were appended to the FormData object with:
jQuery
var image_inputs = $("#my_form input[type=file]");
$.each(image_inputs,function(obj,v) {
var file = v.files[0];
var filename = $(v).attr("data-img_filename");
var name = $(v).attr("id");
myFormData.append(name, file, filename);
});
And it seems the filename is automatically included without needing to define it as above: