Multiple flask_dropzone in one page

Question

I'm a new dev.

I have multiple steps form and I want to allow users to upload Max of 2 ( for e.g. DROPZONE_MAX_FILE_SIZE= 3, PLOADED_PATH=os.path.join(base, 'doc Form'))

then at a different section (step) of the form I want to allow user to upload more files with different config ( for e.g. DROPZONE_MAX_FILE_SIZE= 20, PLOADED_PATH=os.path.join(base, 'med'))

Things I've tried :

1 - tried to insert dropzone on the same forms twice in two different Div and provided custom options for each including different URL route but didn't work ( only works when I remove one of them) I always get error SECOND_PATH_URL_OR_FUNCTION is not defined

2 - after reading this answer Multiple Dropzone in a single page I've replaced div with form and added custom options where every dropzone have it's own function in flask

If I removed DROPZONE_UPLOAD_ACTION='handle_upload' from the app config and added as a custom option I get this error on chrome's console No URL provided.

When I add one of the URL, it's the only one that have chance to work because I get error for the second one handle_upload2 is not defined where handle_upload2 is just a duplicate from the original function that's called handle_upload which i have added it's url in the config options .

It seems as if custom_options doesn't overRide app.config details

I'm close but I don't know how to add both URL in the same page so I can run one function script onclick and send all data in an Ajax as if they were one form.

flask file current app config options :

UPLOADED_PATH=os.path.join(basedir, 'uploads'),
# Flask-Dropzone config:
DROPZONE_ALLOWED_FILE_TYPE='image',
DROPZONE_MAX_FILE_SIZE=3,
DROPZONE_MAX_FILES=30,
DROPZONE_IN_FORM=True,
DROPZONE_UPLOAD_ON_CLICK=True,
DROPZONE_UPLOAD_ACTION='handle_upload',  # URL or endpoint
DROPZONE_UPLOAD_BTN_ID='uploadID',

custom options for Drop Zone 1 :

    {{ dropzone.config(custom_init='dz = this;document.getElementById("uploadID").addEventListener("click", function handler(e) {dz.processQueue();});',
                 custom_options='autoProcessQueue: false, addRemoveLinks: true, maxFiles: 2,DROPZONE_UPLOAD_ACTION:handle_upload,') }}

and for drop Zone 2 :

{{ dropzone.config(custom_init='dz2 = this;document.getElementById("uploadID").addEventListener("click", function handler(e) {dz2.processQueue();});',
                     custom_options='autoProcessQueue: false, addRemoveLinks: true, maxFiles: 2,DROPZONE_UPLOAD_ACTION:handle_upload2,') }}

Answer 1

Flask-drop-zone documentation say: You may want to use different configuration for multiple drop area on different pages, in this case, you can pass the specific keyword arguments into dropzone.config() directly.

The keyword arguments should mapping the corresponding conflagration variable in this way:

DROPZONE_DEFAULT_MESSAGE –> default_message DROPZONE_TIMEOUT –> timeout DROPZONE_ALLOWED_FILE_TYPE –> allowed_file_type etc example:

{{ dropzone.config(max_files=10, timeout=10000, default_message='Drop here!') }}

The keyword argument you pass will overwrite the corresponding configurations.

---

So, i think you can't make different configuration for many drop-zones in the same page.

but you can send two URL for different drop-zones in the same page:

{{ dropzone.create(action= url_for('product.first_upload')) }}
{{ dropzone.create(action= url_for('product.second_upload')) }}

@product.route('/first_upload', methods=['POST'])
def first_upload():
    #do something

@product.route('/second_upload', methods=['POST'])
def second_upload():
    #do something

---

Also, you can send argument's to the upload function, to differ between drop-zones:

@product.route('/upload_images/<string:upload_for><int:id>', methods=['POST'])
def upload_images(upload_for, id):
    if upload_for == "Something like Cat Image":
        #do something with id passed