0

i am getting a 404 error when submitting a form. I try to upload a .png through that form and submit it right after the upload. Then the Server (Python, Flask) should be able to work with that. Does anyone know where my issue is?

AJAX:

<script>
    document.getElementById("exampleFormControlFile1").onchange = function() {
    console.log("Came here");
    $.ajax({
        url:'/uploadPNG/',
        type:'post',
        data:$('#exampleFormControlFile1').serialize(),
        success:function(){
            console.log("Came here");

            }
});
};
</script>

HTML:

<form method="POST" id="form">
    <div class="form-group">
    <label for="exampleFormControlFile1">Upload your .png template</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
    </div>
</form>

SERVER:

@app.route('/uploadPNG/', methods=['POST'])
def upload():
    if request.method == 'POST':
        print("Got png")
    return "gotcha"

Thank you in advance

TimS
  • 35
  • 7
  • Ugh, my guesses have been silly so far sorry. I think you'll want to change `url:'/uploadPNG/',` to `url: "{{ url_for('upload') }}"`. Does that work? – roganjosh Nov 29 '18 at 20:42
  • Thanks. Now i am getting that error : url_for('upload')%20%7D%7D 405 (METHOD NOT ALLOWED) – TimS Nov 29 '18 at 20:53
  • Where on Earth are you seeing "url_for('upload')%20%7D%7D"? :) Try also adding `` into the body of the form. But "url_for('upload')%20%7D%7D" doesn't make sense to me at all, something has gone wonky in how you've implemented my suggestion. – roganjosh Nov 29 '18 at 20:55
  • --------------------------------- $.ajax({ url: "{{ url_for('/uploadPNG/') }}", -------------------------------- Stil same error     – TimS Nov 29 '18 at 21:15
  • `"{{ url_for('/uploadPNG/') }}"` is _not_ what I wrote in my suggestion. I was not incorrect in referencing the _function name_ rather than the _route_ (though I can understand why you may have assumed that because I'm not sure it's completely intuitive) – roganjosh Nov 29 '18 at 21:17
  • BUT I did screw up on `value="csrf_token()"`. It should be ``, apologies – roganjosh Nov 29 '18 at 21:19
  • Sorry my bad! i changed everything that you suggested now but theres still the same error. Is my whole approach maybe weird? – TimS Nov 29 '18 at 21:24
  • No, it isn't, but it's my fault for not trying an answer tbh so we can see a complete picture at once. I've posted one, let's move the discussion there – roganjosh Nov 29 '18 at 21:26
  • Honestly, I started putting together a working example and just got buried in changes. I don't think my answer would be any use to anyone else as I was changing so much and not documenting it. Your general premise is correct, and I think my previous comments will help you, but a full answer is beyond the scope of SO unless I'm missing some trick. – roganjosh Nov 29 '18 at 21:44

1 Answers1

0

I just figured out the issue. Gonna answer my own post here so that others may have it easier. A magic wizard once told me to always check the documentation. http://flask.pocoo.org/docs/1.0/patterns/fileuploads/ Then I had to adjust the AJAX call like here: 'append' called on an object that does not implement interface FormData And then i had to add the name "file" to the input tag.

TimS
  • 35
  • 7