3

I'm trying to do a simple ajax file upload, but I'm getting an "Uncaught TypeError: formData.has is not a function"

If I also comment out the formData.has() checking function and just replace it with formData.append('myResume'), I get a similar error that says formData.get() is not a function in my ajax call. Any suggestions? Thanks :)

Here's the html:

<div id="upload">
<form id="file-form" name="resume.pdf">
  <input type="file" id="file-select"/>
  <button type="submit" id="upload-button">Upload</button>
</form>

and the javascript:

$(function(){
    var formData = new FormData(); 

    $('#file-form').submit(function(event){
        var fileInput = document.getElementById('file-select').files;
        var file = fileInput.item(0);

        event.preventDefault();

        //Error here formData.has() is not a function 
        if(formData.has('myResume')){
            formData.set('myResume', file);
        } else{
            formData.append('myResume', file);
        }

        $.post('/upload', {file: formData.get('myResume')});
    })
})
Danny Liu
  • 499
  • 2
  • 5
  • 12

1 Answers1

5

See https://developer.mozilla.org/en-US/docs/Web/API/FormData#Browser_compatibility. It states that for chrome the delete(), get(), getAll(), has(), set() methods are supported behind a flag.

This means that you need to enable support for these methods from the settings (Enable experimental Web Platform features flag in chrome://flags).

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • Ohhhh thanks I see!! That answers my question. Do you know any way I might get around this though? If I want to avoid using the has() and get() methods because not everyone has support for them? – Danny Liu Jan 11 '16 at 02:01
  • You could create the `FormData` in the event handler and pass it the form in the contstructor. `var formData = new FormData(this);` – Gabriele Petrioli Jan 11 '16 at 02:09