Is Parse's Javascript file upload broken?

Question

I've been trying to save a user-uploaded image to parse for the longest time, and nothing seems to work -- even when following their documentation.

Below is the handler I use for the onChange() on a multiple file upload. At first I was concerned about multiple file uploads, but at this point just saving one image doesn't work.

function fileHandler(event) {
  var files = event.target.files;
  stopPictures = [];
  $("#stop-img-container").empty();
  if (files[0] != null) {
    $("#stop-img-container").show();
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      var picReader = new FileReader();
      picReader.addEventListener("load",function(event){
          var picFile = event.target;
          var image = $("<img/>",{
            "title": picFile.name,
            "class": "stop-image",
            "src": picFile.result
          }).appendTo("#stop-img-container");
          var name = picFile.name;
          var dataFile = picFile.result;
          var base64str = dataFile.substring(dataFile.indexOf("base64,")+7,dataFile.length);
          var parseFile = new Parse.File(name,{base64:base64str}); // saving logs 404 Not Found from POST to "http://api.parse.com/1/files"
          var parseFile = new Parse.File(name,dataFile); // saving logs "Uncaught Creating a Parse.File from a String is not yet supported."
          var parseFile = new Parse.File(name,file); // saving logs 404 Not Found from POST to "http://api.parse.com/1/files"
          var parseFile = new Parse.File(name,base64str); // saving logs "Uncaught Creating a Parse.File from a String is not yet supported."
          parseFile.save().then(function (savedFile) {
            stopPictures.push(savedFile);
            alert("worked");
          });
      });
      picReader.readAsDataURL(file);
    }
  } else {
    $("#stop-img-container").hide();
  }
}

There's some extraneous stuff here, but basically it collects the user's selected files, displays them for them once they've finished loading, and then creates them as a Parse file. I've left it in to show that at least something is working as it properly locally stores and previews the user's selected files.

I have included three different ways of creating the same Parse file. However, all of them fail when I try to save to Parse in any way.

Parse's Javascript API docs says that any of these should work fine. But they lie, or I'm an idiot.

Anyone have any idea why this doesn't seem to work? Seems like a pretty critical aspect of their API is broken completely -- which I find hard to imagine.

EDIT: I'm also positive I'm properly parsing (lower case p) the base64 string as this site confirms the appropriate image and works.

Answer 1

I experienced the same problem.
Finally I found what causes the problem.
It's a "file name".

I suspect the file name in tuckerchapin's example is null.
var name = picFile.name;

I wrote the example with React.
this code works fine.

class ImageUpload extends React.Component {

  onChange(e) {
    var file = e.target.files[0];
    var parseFile = new Parse.File(file.name, file);
    Parse.User.current().set("icon",parseFile);
    Parse.User.current().save();
  }

  handleSubmit(e) {
   e.preventDefault();
  }

  render() {
     return (
       <form onSubmit={this.handleSubmit}>
         <input type="file" onChange={this.onChange.bind(this)} />
       </form>
     );
   }

}