Multiple flask_dropzone in one page












0















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,') }}









share|improve this question

























  • Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions.

    – halfer
    Nov 14 '18 at 20:11











  • i'll keep that in my mind thxx

    – za001a
    Nov 14 '18 at 23:43
















0















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,') }}









share|improve this question

























  • Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions.

    – halfer
    Nov 14 '18 at 20:11











  • i'll keep that in my mind thxx

    – za001a
    Nov 14 '18 at 23:43














0












0








0








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,') }}









share|improve this 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,') }}






python-3.x flask file-upload dropzone.js flask-uploads






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 14 '18 at 20:11









halfer

14.6k758112




14.6k758112










asked Nov 14 '18 at 16:45









za001aza001a

9310




9310













  • Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions.

    – halfer
    Nov 14 '18 at 20:11











  • i'll keep that in my mind thxx

    – za001a
    Nov 14 '18 at 23:43



















  • Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions.

    – halfer
    Nov 14 '18 at 20:11











  • i'll keep that in my mind thxx

    – za001a
    Nov 14 '18 at 23:43

















Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions.

– halfer
Nov 14 '18 at 20:11





Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions.

– halfer
Nov 14 '18 at 20:11













i'll keep that in my mind thxx

– za001a
Nov 14 '18 at 23:43





i'll keep that in my mind thxx

– za001a
Nov 14 '18 at 23:43












1 Answer
1






active

oldest

votes


















0














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





share|improve this answer
























  • thanks alot man , you know 2 days ago i dropped flask-dropzone and replaced it with dropzon.js . its harder but i can do as many configurations as i want now .

    – za001a
    Nov 19 '18 at 19:24











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53305054%2fmultiple-flask-dropzone-in-one-page%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














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





share|improve this answer
























  • thanks alot man , you know 2 days ago i dropped flask-dropzone and replaced it with dropzon.js . its harder but i can do as many configurations as i want now .

    – za001a
    Nov 19 '18 at 19:24
















0














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





share|improve this answer
























  • thanks alot man , you know 2 days ago i dropped flask-dropzone and replaced it with dropzon.js . its harder but i can do as many configurations as i want now .

    – za001a
    Nov 19 '18 at 19:24














0












0








0







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





share|improve this answer













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






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 17 '18 at 8:31









Yacoub BadranYacoub Badran

1




1













  • thanks alot man , you know 2 days ago i dropped flask-dropzone and replaced it with dropzon.js . its harder but i can do as many configurations as i want now .

    – za001a
    Nov 19 '18 at 19:24



















  • thanks alot man , you know 2 days ago i dropped flask-dropzone and replaced it with dropzon.js . its harder but i can do as many configurations as i want now .

    – za001a
    Nov 19 '18 at 19:24

















thanks alot man , you know 2 days ago i dropped flask-dropzone and replaced it with dropzon.js . its harder but i can do as many configurations as i want now .

– za001a
Nov 19 '18 at 19:24





thanks alot man , you know 2 days ago i dropped flask-dropzone and replaced it with dropzon.js . its harder but i can do as many configurations as i want now .

– za001a
Nov 19 '18 at 19:24




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53305054%2fmultiple-flask-dropzone-in-one-page%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Xamarin.iOS Cant Deploy on Iphone

Glorious Revolution

Dulmage-Mendelsohn matrix decomposition in Python